ハイチャートは、チャートのドリルダウン、別のチャートに反映できますか？

Question

ids container1とcontainer2の2つの別々のdivがあり、コンテナ1のスタックされた列をドリルダウンして結果がコンテナ1のスタックされた列が同じままであるコンテナ2に表示されるかどうかは疑問です。 本当にありがとうございます。

<div id="container1" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
<div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 

サンプルフィドル：http://jsfiddle.net/675kxe1q/ここ

エリアチャートは、同じチャートにドリルダウンに現れ、それは別のチャートにそれを表示することは可能でしょうか？

Answer 1

私が望むと思うのは、ドリルダウンではなく、第1のグラフの詳細なデータで第2のグラフを更新することです。 point.events.clickをご覧ください。これはクリックされたポイントを得ることができます。ここから、別のチャートのデータを更新/設定することができます。 Clickイベント・ロジック：

plotOptions: { 
    series: { 
    point: { 
     events: { 
     click: function() { 
      detailChart(this.category); 
     } 
     } 
    } 
    } 
}, 

その後container2で新しいグラフを作成するために起こっている一般的な機能：

function detailChart(categoryName) { 
    $('#container2').highcharts({ 
     chart: { 
     type: 'column' 
     }, 
     xAxis: { 
     categories: ['week1', 'week2', 'week3', 'week5'] 
     }, 

     plotOptions: { 
     series: { 
      cursor: 'pointer', 
      point: { 
      events: { 
       click: function() { 
       detailChart(this.category); 
       } 
      } 
      } 
     } 
     }, 

     series: [{ 
     data: [10, 20, 5, 4.9] 
     }] 
    }); 
    } 

あなただけではなく、何のオフthis.categoryをキーとして、あなたの細部のシリーズを設定することができますクリックキーにリンクされたデータの配列。

Answer 2

最も効率的な解決策は、デフォルトのドリルダウンを使用していて、e.seriesOptionsオブジェクトからドリルされたシリーズを抽出し、偽の値（イベントを停止する）を戻すドリルダウンイベントをキャッチすると思います。次のステップでは、シリーズを参照して新しいチャートを実行します。

chart: { 
      type: 'column', 
      events:{ 
       drilldown: function(e) { 
       e.seriesOptions.color = e.point.color; 
       detailChart(e.seriesOptions); 
       return false; 
       } 
      } 
     }, 
//.... 

    function detailChart(series) { 
    console.log('d', series); 
     $('#container2').highcharts({ 
     chart: { 
      type: 'area' 
     }, 
     xAxis: { 
      categories: ['week1', 'week2', 'week3', 'week5'] 
     }, 

     plotOptions: { 
      series: { 
      cursor: 'pointer', 
      point: { 
       events: { 
       click: function() { 
        detailChart(this.category); 
       } 
       } 
      } 
      } 
     }, 

     series: [series] 
     }); 
    } 
}); 

例：

• http://jsfiddle.net/wasdf21b/