Highchart Drill-Down und die Kombination von Diagrammtyp

Question

Ich mag würde auf meinem Drill-Down-Diagramm (in den Kindern-Chart) Spalte und Spline wie hier mischen: https://jsfiddle.net/lostrailler/Ljotp059/

Aber wenn ich versuche, ich habe nicht beide zum gleichen Zeit. Hier ist mein Code:

var chart = new Highcharts.Chart({ 
     chart: { 
     renderTo: 'container', 
     type: 'column' 
    }, 
    title: { 
     text: 'Scores par paliers' 
    }, 
    xAxis: { 
     type: 'category', 
     labels: { 
      rotation: -45, 
      align: 'right', 
      style: { 
       fontFamily: 'Verdana, sans-serif' 
      } 
     }, 
     min: 0 
    }, 
    yAxis: { 
     title: { 
      text: 'Score' 
     }, 
     max: 100, 
     tickInterval: 10, 
     min: 0 
    }, 
    legend: { 
     enabled: false 
    }, 
    plotOptions: { 
     series: { 
      borderWidth: 0, 
      dataLabels: { 
       enabled: true 
      } 
     } 
    }, 
    exporting: { 
     enabled: true 
    }, 
    tooltip: { 
     formatter: function() { 
      if (this.point.drilldown) { 
       var s = this.key +' : <b>'+ this.y +' %</b>'; 
      } else { 
       var s = this.key +' : <b>'+ this.y + '</b>'; 
      } 
      return s; 
     } 
    }, 
    series: [{ 
      name: 'Marches', 
     colorByPoint: true, 
     data: [ 
      { 
       name: 'Step 1', 
       y: 89, 
       drilldown: 'step1' 
      }, 
      { 
       name: 'Step 2', 
       y: 17, 
       drilldown: 'step2' 
      }] 
    }], 
    drilldown: { 
     drillUpButton: { 
      relativeTo: 'spacingBox', 
      position: { 
       y: 0, 
       x: -50 
      } 
     }, 
     series: [ 
      { 
       id: 'step1', 
       name: 'Step 1', 
       type: 'column', 
       data: [['Game 1', 100],['Game 2', 100],['Game 3', 100]] 
      }, 
      { 
       id: 'step2', 
       name: 'Step 2', 
       type: 'column', 
       data: [['Game 1', 0],['Game 2', 100],['Game 3', 0]] 
      }, 
      { 
       id: 'step1', 
       name: 'Step 1', 
       type: 'spline', 
       data: [['Game 1', 83],['Game 2', 82],['Game 3', 79]] 
      }, 
      { 
       id: 'step2', 
       name: 'Step 2', 
       type: 'spline', 
       data: [['Game 1', 0],['Game 2', 100],['Game 3', 0]] 
      }] 
    } 
}); 

JsFiddle: https://jsfiddle.net/lostrailler/fe1zzwph/

Irgendwelche Ideen?

Vielen Dank.

Answer 1

können Sie Drill-Down-Ereignis Callback-Funktion für neue Serie als Drill-Down hinzu: http://api.highcharts.com/highcharts#chart.events.drilldown

drilldown: function(e) { 
    var chart = this, 
    drilldowns = chart.userOptions.drilldown.series, 
    series = []; 
    e.preventDefault(); 
    Highcharts.each(drilldowns, function(p, i) { 
    if (p.id.includes(e.point.name)) { 
     chart.addSingleSeriesAsDrilldown(e.point, p); 
    } 
    }); 
    chart.applyDrilldown(); 
} 

können Sie verwenden addSingleSeriesAsDrilldown(), ähnlich der Methode: http://api.highcharts.com/highcharts#Chart.addSeriesAsDrilldown

Aber Sie können mehrere Serien hinzufügen als Aufriss mit dieser Methode.

Hier sehen Sie ein Beispiel sehen, wie es funktionieren kann:

http://jsfiddle.net/h5xjp8h5/12/

Mit freundlichen Grüßen.