ActiveAdmin儀表板部分未顯示？

Question

我想在ActiveAdmin的控制面板中包含一個包含部分的部分。該部分出現，但它是空白的 - 我如何使部分出現？我想顯示一張Highcharts圖表。

這裏是我的代碼：

dashboards.rb：

section "Business Summary", do 
    div do 
     render 'graph' 

     end 
    end 

_graph.html.erb（位於應用程序/視圖/管理/儀表板）：

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<script type="text/javascript" charset="utf-8"> 
    $(function() { 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'column' 
      }, 

      xAxis: { 
       categories: ['Automotive', 'Agency', 'Contractor', 'Country Club', 'Other'] 
      }, 
      yAxis: { 
       min: 0, 

       title: { 
        text: 'Business Summary' 
       }, 
       stackLabels: { 
        enabled: true, 
        style: { 
         fontWeight: 'bold', 
         color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
        } 
       } 
      }, 
      legend: { 
       align: 'right', 
       x: 100, 
       verticalAlign: 'top', 
       y: 0, 
       floating: true, 
       backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', 
       borderColor: '#CCC', 
       borderWidth: 1, 
       shadow: false 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + 'Total: ' + this.point.stackTotal; 
       } 
      }, 
      plotOptions: { 
       column: { 
        stacking: 'normal', 
        dataLabels: { 
         enabled: true, 
         color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
        } 
       } 
      }, 
      series: [{ 
       name: 'Mobile', 
       data: [5, 3, 4, 27, 2]}, 
      { 
       name: 'Foursquare', 
       data: [2, 2, 3, 2, 1]}, 
      { 
       name: 'Facebook', 
       data: [3, 4, 4, 2, 5]}, 
      { 
       name: 'Yelp', 
       data: [3, 4, 4, 2, 5]}, 
      { 
       name: 'Google', 
       data: [3, 4, 4, 2, 5]}] 
     }); 
    }); 

});​​ 
</script> 
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 

Answer 1

我固定它，我所要做的就是正確引用我的JavaScript和javascript_include標籤。

Answer 2

活動管理員似乎並沒有加載任何在application.js中定義的資產（或者它似乎不適合我..）。當我嘗試生成一些圖表時，這導致了一個問題。

我正在使用raphael創建一些圖表。我有一個名爲raphael的JavaScript文件夾，其中包含我需要的所有js文件。

所以我的部分看起來像這樣：

_user_count.html.erb

<%= javascript_include_tag '/assets/raphael/raphael.js' %> 
<%= javascript_include_tag '/assets/raphael/g.raphael.js' %> 
<%= javascript_include_tag '/assets/raphael/g.pie.js' %> 

<script> 
    $(function() { 
    var r = Raphael("holder"), 
     pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { 
      legend: ["%%.%% - Enterprise Users", "%%.%% IE Users"], legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]}); 

    r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" }); 
    pie.hover(function() { 
     this.sector.stop(); 
     this.sector.scale(1.1, 1.1, this.cx, this.cy); 

     if (this.label) { 
     this.label[0].stop(); 
     this.label[0].attr({ r: 7.5 }); 
     this.label[1].attr({ "font-weight": 800 }); 
     } 
    }, function() { 
     this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce"); 

     if (this.label) { 
     this.label[0].animate({ r: 5 }, 500, "bounce"); 
     this.label[1].attr({ "font-weight": 400 }); 
     } 
    }); 
    }); 
</script> 

<div id="holder"></div> 

而且我的積極管理部分：

section "User Count", do 
    div do 
     render 'user_count' 
    end 
    end 

現在你可以在局部使用你的JavaScript。