jquery - Highcharts 中分组柱状图的明细

我正在尝试在highcharts中对分组的柱形图进行深入分析。我的图表在这里：

$(function () {

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Basic drilldown'
        },
        xAxis: {
            type: 'category',
            categories: [
                          "2011-12",
                          "2012-13",
                          "2013-14",
                          "2014-15",
                          "2015-16"
                        ]

        },

        legend: {
            enabled: false
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                }
            }
        },

        series: [
                  {
                    "name": "First",
                    "data": [
                      40351.62,
                      51506.83,
                      68566.23,
                      80596.9228,
                      94329.31
                    ]
                  },
                  {
                    "name": "Second",
                    "data": [
                      40750.4963,
                      56205.181,
                      63776.2866,
                      74912.5923,
                      83801.83617
                    ]
                  },
                  {
                    "name": "Third",
                    "data": [
                      28589.0331305,
                      40716.9008376,
                      42050.10774,
                      54934.329763,
                      1811.2277
                    ]
                  },
                  {
                    "name": "Forth",
                    "data": [
                      38022.7637359,
                      52503.122283245,
                      59760.3037668,
                      71143.7222503,
                      27.60156
                    ]
                  }
                ]
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://github.highcharts.com/master/highcharts.js"></script>
<script src="http://github.highcharts.com/master/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Grouped Column Chart

我想对图表中的每个列进行深入分析。但是我不知道该怎么做？

最佳答案

这是一个很好的问题！

在系列数据中，您需要为每个数据点定义一个y值和一个关联的drilldown id，例如：{ y: 40351.62, drilldown: 'test' }。

然后，您可以在drilldown属性中为展开的数据设置项目。

此方法的优点在于，您可以仅为所需的列指定向下钻取（例如，仅针对一个系列）。

这是我为该示例修改的代码：

drilldown : {
    series: [{
        name: 'Test Drilldown',
        id: 'test',
        data: [
            [ 'data A', 24.13 ],
            [ 'data B', 17.2 ],
            [ 'data C', 8.11 ],
            [ 'data D', 5.33 ]
        ]
    }]
},
series: [
      {
        "name": "First",
        "data": [
          { y: 40351.62, drilldown: 'test' },
          51506.83,
          68566.23,
          80596.9228,
          94329.31
        ]
      },
      // ... other series
]

您可以在这里找到小提琴的更新版本：http://jsfiddle.net/brightmatrix/6LXVQ/1187/

希望对您有帮助！

关于jquery - Highcharts 中分组柱状图的明细，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37725318/