Highchart Drilldown zu simultanen Mehrfachserien und Y-Achse

Question

Hallo Ich möchte HighChart-Paket verwenden und JS-Figuren mit Drilldown-Fähigkeit
machen 1. Zeigen Sie mehrere Serien gleichzeitig auf gebohrter Ebene.
2. Verwenden Sie mehrere (z. B. 2) Y-Achsen, um die verschiedenen Einheiten aus diesen Serien auf der Drilldown-Ebene anzugeben.

Basierend auf dem Ausgangspunkt des Codes:

$(function() { 
// Create the chart 
$('#container').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Browser market shares. January, 2015 to May, 2015' 
    }, 
    subtitle: { 
     text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.' 
    }, 
    xAxis: { 
     type: 'category' 
    }, 
    yAxis: { 
     title: { 
      text: 'Total percent market share' 
     } 

    }, 
    legend: { 
     enabled: false 
    }, 
    plotOptions: { 
     series: { 
      borderWidth: 0, 
      dataLabels: { 
       enabled: true, 
       format: '{point.y:.1f}%' 
      } 
     } 
    }, 

    tooltip: { 
     headerFormat: '<span style="font-size:11px">{series.name}</span><br>', 
     pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>' 
    }, 

    series: [{ 
     name: 'Brands', 
     colorByPoint: true, 
     data: [{ 
      name: 'Microsoft Internet Explorer', 
      y: 56.33, 
      drilldown: 'Microsoft Internet Explorer' 
     }, { 
      name: 'Chrome', 
      y: 24.03, 
      drilldown: 'Chrome' 
     }, { 
      name: 'Firefox', 
      y: 10.38, 
      drilldown: 'Firefox' 
     }, { 
      name: 'Safari', 
      y: 4.77, 
      drilldown: 'Safari' 
     }, { 
      name: 'Opera', 
      y: 0.91, 
      drilldown: 'Opera' 
     }, { 
      name: 'Proprietary or Undetectable', 
      y: 0.2, 
      drilldown: null 
     }] 
    }], 
    drilldown: { 
     series: [{ 
       name: 'Microsoft Internet Explorer', 
      id: 'Microsoft Internet Explorer', 
      categories: ['v11','v8','v9','v10','v7'], 
      type: 'spline', 
      data: [ 
        ['v11',25], 
        ['v8',17], 
       ['v9',8], 
       ['v10',5], 
       ['v7',3]] 
     }, { 
      name: 'Chrome', 
      id: 'Chrome', 
      data: [ 
       ['v40.0',5], 
       ['v41.0',4.32], 
       ['v42.0',3.68] 
      ] 
     }] 
    } 
}); 
}); 

http://jsfiddle.net/h5xjp8h5/2/

mit drei js Quellcode:

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/data.js"></script> 
<script src="https://code.highcharts.com/modules/drilldown.js"></script> 

Aber wenn ich den Drill-Down Teil Code wie folgt machen:

drilldown: { 
     series: [{ 
       name: 'Microsoft Internet Explorer', 
      id: 'Microsoft Internet Explorer', 
      type: 'spline', 
      data: [ 
        ['v11',25], 
        ['v8',17], 
       ['v9',8], 
       ['v10',5], 
       ['v7',3]] 
     }, { 
       name: 'Microsoft Internet Explorer Cost', 
      id: 'Microsoft Internet Explorer', 
      type: 'spline', 
      yAxis: 1, 
      data: [ 
        ['v11',50], 
        ['v8',40], 
       ['v9'60], 
       ['v10',65], 
       ['v7',73]] 
     }, { 
      name: 'Chrome', 
      id: 'Chrome', 
      data: [ 
       ['v40.0',5], 
       ['v41.0',4.32], 
       ['v42.0',3.68] 
      ] 
     }] 
    } 

Mit y-Achse Teil:

yAxis: [{ 
     title: { 
      text: 'Total percent market share' 
     } 

    }, 
        { 
     title: { 
       text: 'cost' 
     }, 
      opposite: true 
    }], 

http://jsfiddle.net/h5xjp8h5/3/

Es hat nicht funktioniert.

Könnte jemand bitte helfen Sie mir dabei:
1) Ich möchte auf Microsoft Internet Explore in eine Ansicht mit zwei Spline-Serien, eine mit Versionsverwendung und die andere mit Version Kosten.
2) Ich möchte diese beiden Serien in.
3) mit zwei Y-Achse.

Vielen Dank im Voraus.

Answer 1

Sie können Drill-Down-Ereignis Callback-Funktion für neue Serie als Drill-Down hinzu:

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 als Drill-Down hinzufügen mit dieser Methode.

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

http://jsfiddle.net/h5xjp8h5/10/

Mit freundlichen Grüßen.