Drilldown für gruppierte Säulendiagramm in Highcharts

Question

Ich versuche, Aufriss für eine gruppierte Säulendiagramm in Highcharts zu machen. Meine Grafik ist hier:

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

ich einen Drill-Down für jede Spalte in der Tabelle haben wollen. Aber ich verstehe nicht, wie man das macht?

Answer 1

Das ist eine gute Frage!

In Ihren Seriendaten müssen Sie einen y Wert und eine zugehörige drilldown ID für jeden Datenpunkt definieren, wie zum Beispiel: { y: 40351.62, drilldown: 'test' }.

Anschließend können Sie Elemente im Attribut drilldown für die erweiterten Daten einrichten.

Das Schöne an dieser Methode ist, dass Sie Aufrisse nur für die gewünschten Spalten angeben können (z. B. nur für eine Serie).

Hier ist der Code, den ich für dieses Beispiel geändert:

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 
] 

Sie können eine aktualisierte Version Ihrer Geige finden Sie hier: http://jsfiddle.net/brightmatrix/6LXVQ/1187/

Ich hoffe, dies ist nützlich für Sie!