複数のシリーズとY軸を同時にハイチャートドリルダウン

Question

こんにちはハイチャートパッケージを使用し、ドリルダウン機能を持つJS図を作成したいと考えています。
1.複数のシリーズを同時にドリルダウンレベルで表示します。
2.複数の（たとえば2つ）y軸を使用して、ドリルダウンレベルでこれらのシリーズと異なるユニットを示します。 3つのJSのソースコードと

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

：

は、コードの出発点に基づいて

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

しかし、私は次のようなドリルダウン部分のコードを作成するとき：

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] 
      ] 
     }] 
    } 

y軸部分と

：

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

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

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

それは動作しませんでした。

誰かが私にこれを助けてください：
1）Microsoft Internet Explorerでドリルダウンし、2つのスプラインシリーズ、1つはバージョンの使用、もう1つはバージョンコストのビューにします。
2）私はこれらの2つのシリーズが欲しい。
3）2つのy軸を使用する。

は事前にありがとうございました。

Answer 1

あなたのドリルダウンとして新シリーズを追加するためにあなたがドリルダウンイベントのコールバック関数を使用することができます。

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(); 
    } 

あなたはaddSingleSeriesAsDrilldownを（使用することができます）、と同様の方法：http://api.highcharts.com/highcharts#Chart.addSeriesAsDrilldown

しかし、あなたはドリルダウンとして複数の系列を追加することができますこの方法で。

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

敬具：

ここでは、それが動作する方法の例を見ることができます。