하이 차트의 그룹화 된 열 차트 드릴 다운

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 값과 각 데이터 포인트에 대한 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/

을 나는 희망이 당신을 위해 도움이됩니다!