Question

我正在尝试在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>

Answer 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。

Answer 2

在ActiveAdmin.setup中| config | config.register_javascript'http://code.highcharts.com/highcharts.js'

Answer 3

我修复了它，我所要做的就是使用javascript_include标记正确引用我的JavaScript。

ActiveAdmin Dashboard部分不显示？

3 个答案: