在高圖中對分組柱狀圖進行深入分析

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/

我希望這是對你有幫助！