2

ActiveAdminのダッシュボードにパーシャルを含むセクションを含めようとしています。セクションは表示されますが、空白です-部分的に表示するにはどうすればよいですか？Highchartsグラフを表示したい。

これが私のコードです：

Dashboards.rb：

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

       end
  end

_graph.html.erb（app / views / admin / dashboardにあります）：

<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>
4

3 に答える 3

1

アクティブな管理者は、application.jsで定義されたアセットをロードしていないようです（または、私にはロードされていないようです）。これにより、いくつかのグラフを生成しようとしたときに問題が発生しました。

私はいくつかのチャートを作成するためにラファエルを使用しています。javascripts内にraphaelというフォルダーがあり、必要なすべての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を使用できます。

于 2012-08-17T23:26:05.670 に答える
0

ActiveAdmin.setupで|config|を実行します config.register_javascript'http://code.highcharts.com/highcharts.js'

于 2020-12-09T17:47:56.190 に答える
-1

私はそれを修正しました、私がしなければならなかったのはjavascript_includeタグで私のJavaScriptを正しく参照することだけでした。

于 2012-06-29T03:42:25.070 に答える