Развертка для сгруппированной диаграммы столбцов в высоких диаграммах

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 идентификатор для каждой точки данных, такой как: { 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/

Я надеюсь, что это полезно для вас!