在高图中对分组柱状图进行深入分析

Question

我正在为高分组中的分组柱状图进行深入分析。我的图表是在这里：

$(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

我想有图表中的每一列下钻。但我不明白该怎么做？

Answer 1

这是一个很好的问题！

在您的系列数据中，您需要为每个数据点定义一个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/

我希望这是对你有帮助！