javascript - 如何在 Rails 应用程序中实现 Highcharts 柱形钻取图表？

Question

我正在尝试实现 Highcharts Column-Drilldown Chart在我的 Rails 应用程序中使用 lazy_high_charts 。我想显示从数据库中提取并存储在四个数组(areas、areaScores、departments 和 deptScores)中的数据。我在将 JS 从 example (JSFiddle) 转换时遇到问题在 highchart 网站上列出了 ruby​​。我无法找到任何有关在 ruby​​ 中创建列钻取图表的资源。任何有关如何将钻取图表集成到我的 ruby​​ 应用程序中的帮助将不胜感激。

我已经包含了 Highcharts 演示页面上显示的示例 JavaScript 和我的 Controller 方法，该方法用数据填充四个数组并构建 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
                }
            })

        }
    });
});

我的 Controller :

  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

谢谢， 马特

Answer 1

我没有使用 Lazy Highcharts，但假设它镜像 JavaScript API 中的 JSON您需要按名称添加子系列，例如

  f.series(
    name: "Department Score",
    colorByPoint: true, 
    data: @deptScores,
    drilldown: "subdept"  #add this 
  )

然后您需要添加向下钻取数据，如果 Lazy Highcharts 支持它，它可能看起来像这样:

  f.drilldown(
    series: {
      id: "subdept",
      data: [
        ["One", 1],
        ["Two", 2],
        ["Three", 3]
      ]
    }
  )

查看此basic drilldown fiddle看看生成的 Javascript 应该是什么样子。