Drilldown-Funktion in Highcharts im Falle von Liniendiagrammen

Question

Ich versuche, ein Liniendiagramm mit Highcharts zu generieren, die ein paar Ebenen heruntergebohrt werden können. Highchart hat diese Funktionalität für die Säulendiagramme, aber ich konnte nichts für die Liniendiagramme finden. Wenn ich versuche, den Diagrammtyp von Spalte zu Zeile zu ändern, erhalte ich eine weiße Linie als Diagramm, die nicht weiter heruntergebohrt werden kann. Gibt es irgendeine Möglichkeit, die Drilldown-Funktionalität in einem Liniendiagramm in Highcharts anzuwenden. Dies ist der Code, den ich habe:

$(function() { 
var chart; 
$(document).ready(function() { 

    var colors = Highcharts.getOptions().colors, 
     categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'], 
     name = 'Browser brands', 
     data = [{ 
       y: 55.11, 
       color: colors[0], 
       drilldown: { 
        name: 'MSIE versions', 
        categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'], 
        data: [10.85, 7.35, 33.06, 2.81], 
        color: colors[0] 
       } 
      }, { 
       y: 21.63, 
       color: colors[1], 
       drilldown: { 
        name: 'Firefox versions', 
        categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'], 
        data: [0.20, 0.83, 1.58, 13.12, 5.43], 
        color: colors[1] 
       } 
      }, { 
       y: 11.94, 
       color: colors[2], 
       drilldown: { 
        name: 'Chrome versions', 
        categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0', 
         'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'], 
        data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22], 
        color: colors[2] 
       } 
      }, { 
       y: 7.15, 
       color: colors[3], 
       drilldown: { 
        name: 'Safari versions', 
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon', 
         'Safari 3.1', 'Safari 4.1'], 
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14], 
        color: colors[3] 
       } 
      }, { 
       y: 2.14, 
       color: colors[4], 
       drilldown: { 
        name: 'Opera versions', 
        categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'], 
        data: [ 0.12, 0.37, 1.65], 
        color: colors[4] 
       } 
      }]; 

    function setChart(name, categories, data, color) { 
     chart.xAxis[0].setCategories(categories, false); 
     chart.series[0].remove(false); 
     chart.addSeries({ 
      name: name, 
      data: data, 
      color: color || 'white' 
     }, false); 
     chart.redraw(); 
    } 

    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'line' 
     }, 
     title: { 
      text: 'Browser market share, April, 2011' 
     }, 
     subtitle: { 
      text: 'Click the columns to view versions. Click again to view brands.' 
     }, 
     xAxis: { 
      categories: categories 
     }, 
     yAxis: { 
      title: { 
       text: 'Total percent market share' 
      } 
     }, 
     plotOptions: { 
      column: { 
       cursor: 'pointer', 
       point: { 
        events: { 
         click: function() { 
          var drilldown = this.drilldown; 
          if (drilldown) { // drill down 
           setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color); 
          } else { // restore 
           setChart(name, categories, data); 
          } 
         } 
        } 
       }, 
       dataLabels: { 
        enabled: true, 
        color: colors[0], 
        style: { 
         fontWeight: 'bold' 
        }, 
        formatter: function() { 
         return this.y +'%'; 
        } 
       } 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       var point = this.point, 
        s = this.x +':<b>'+ this.y +'% market share</b><br/>'; 
       if (point.drilldown) { 
        s += 'Click to view '+ point.category +' versions'; 
       } else { 
        s += 'Click to return to browser brands'; 
       } 
       return s; 
      } 
     }, 
     series: [{ 
      name: name, 
      data: data, 
      color: 'white' 
     }], 
     exporting: { 
      enabled: false 
     } 
    }); 
}); 

}); 
    </script> 
</head> 
<body> 

Bitte lassen Sie mich wissen, wenn eine Umgehung möglich ist.

Answer 1

Bitte nimm Blick auf Drill-Down Linie Beispiel: jsfiddle.net/mv9FV/6/