如何在 Rails 应用程序中实现 Highcharts 柱形细分图表

我正在尝试使用lazy_high_charts在我的 Rails 应用程序中实现 Highcharts 柱形向下钻取图表。我想显示从我的数据库中提取并存储在四个数组（区域、区域分数、部门和部门分数）中的数据。我在将 JS 从 highchart 站点上列出的示例 （JSFiddle） 转换为 ruby 时遇到问题。我无法找到有关在 ruby 中创建柱形钻取图表的任何资源。有关如何将钻取图表集成到我的 ruby 应用程序中的任何帮助将不胜感激。

我已经包含了Highcharts演示页面上显示的示例JavaScript和我的控制器方法，该方法用数据填充四个数组并构建Highchart。

Highcharts 柱形细分图表示例 （Javascript）

$(function () {
    Highcharts.data({
        csv: document.getElementById('tsv').innerHTML,
        itemDelimiter: ''t',
        parsed: function (columns) {
            var brands = {},
                brandsData = [],
                versions = {},
                drilldownSeries = [];
            // Parse percentage strings
            columns[1] = $.map(columns[1], function (value) {
                if (value.indexOf('%') === value.length - 1) {
                    value = parseFloat(value);
                }
                return value;
            });
            $.each(columns[0], function (i, name) {
                var brand,
                    version;
                if (i > 0) {
                    // Remove special edition notes
                    name = name.split(' -')[0];
                    // Split into brand and version
                    version = name.match(/([0-9]+['.0-9x]*)/);
                    if (version) {
                        version = version[0];
                    }
                    brand = name.replace(version, '');
                    // Create the main data
                    if (!brands[brand]) {
                        brands[brand] = columns[1][i];
                    } else {
                        brands[brand] += columns[1][i];
                    }
                    // Create the version data
                    if (version !== null) {
                        if (!versions[brand]) {
                            versions[brand] = [];
                        }
                        versions[brand].push(['v' + version, columns[1][i]]);
                    }
                }
            });
            $.each(brands, function (name, y) {
                brandsData.push({ 
                    name: name, 
                    y: y,
                    drilldown: versions[name] ? name : null
                });
            });
            $.each(versions, function (key, value) {
                drilldownSeries.push({
                    name: key,
                    id: key,
                    data: value
                });
            });
            // Create the chart
            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Browser market shares. November, 2013'
                },
                subtitle: {
                    text: 'Click the columns to view versions. Source: netmarketshare.com.'
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    title: {
                        text: 'Total percent market share'
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y:.1f}%'
                        }
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
                }, 
                series: [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: brandsData
                }],
                drilldown: {
                    series: drilldownSeries
                }
            })
        }
    });
});

我的控制器：

  def generateOrgBreakdownReport
    # First, query the database for the data you need for the report
    @jsonanswerBRKD = queryDatabaseForOrgProgressReport()
    # Second, process and combine data as needed for the report
    @areaBreakdown, @deptBreakdown, @employBreakdown = computeAreaAndDeptPrepareScore(@jsonanswerBRKD)
    # Third, you'll need to put the processed data into a format 
    # Highcharts will understand for the data series it uses
    # for the graph. 
    #THESE ARRAYS HOLD THE NAMES AND SCORES OF AREAS AND DEPARTMENTS
     @deptScores, @departments, @areaScores, @areas = cycleThroughProcessedDataAndCreateHighChartsDataSetsBreakdown(@areaBreakdown, @deptBreakdown, @employBreakdown) 
    # Last, we put the newly made data sets for Highcharts to work its magic.
    #DONT KNOW HOW TO IMPLEMENT DRILLDOWN FOR RUBY
    @orgBreakdown = LazyHighCharts::HighChart.new('column') do |f|
      f.chart( type: 'column' )
      f.xAxis(
        title: { text: "Areas" },
        type: 'category'
      )
      f.yAxis(
        title: { text: "Preparedness Score (%)"},
      )
      f.series(
        name: "Department Score",
        colorByPoint: true, 
        data: @deptScores
      )
      f.series(
        name: "Area Score", 
        data: @areaScores
      )
      f.title( 
        text: "Organizational Breakdown"
      )
      f.options[:xAxis][:categories] = @areas
      f.drilldown({:series=>{
        name:"Dept. Score",
        data: @deptScore
        }
        })
    end
  end

谢谢马 特