如何在 Rails 应用程序中实现 Highcharts 柱状图？

Question

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

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

Highcharts Column-Drilldown 图表示例 (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

谢谢， 马特

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 的外观。

Answer 2

要让钻取在 Rails 中工作，您必须确保在 JavaScript 清单文件 (application.js) 中包含钻取模块。

我还必须下载该文件，因为它不是我的 highcharts 模块目录。你可以在这里找到文件：http://code.highcharts.com/modules/drilldown.js

将此添加到 application.js：

//= require highcharts/modules/drilldown

在 Rails 之外，您可以像这样包含向下钻取模块：

<script src="http://code.highcharts.com/modules/drilldown.js"></script>