2

我正在尝试在 ActiveAdmin 的仪表板中包含一个包含部分内容的部分。该部分出现，但它是空白的 - 如何使部分出现？我想显示一个 Highcharts 图表。

这是我的代码：

仪表板.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 中定义的任何资产（或者对我来说似乎没有......）。当我尝试生成一些图表时，这导致了一个问题。

我正在使用 raphael 创建一些图表。我在 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 回答