HTMLテーブルに表示するハイチャート

Question

現在、異なる種類のグラフを生成するシステムを作成しています。私はグラフとテーブルを作成したい、チャートがDRILLDOWNEDであるときに、テーブルも同様に同期する。 HighChartsがJSONに提示した現在のデータを出力する方法はありますか？このJSONはデータテーブルに入力されますか？ありがとう！

Answer 1

チェックこのJsFiddle Demo

あなたはあなたのデータへの鍵であるe.seriesOptions.idでidを得ることができます。次に、このIDをキーとして使用して、適切なデータを取得し、drillUpおよびdrillDownイベント内からデータテーブルを更新することができます。

HTML

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

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

JS

$(function() { 
    // Create the chart 
    $('#container').highcharts({ 
    chart: { 
     type: 'column', 
     events: { 
     drillup: function(e) { 
      //alert('drill Up'); 
      console.log(this); 
      console.log(e.seriesOptions.id); 

      console.log(this.options.series[0].name); 
      console.log(this.options.series[0].data[0].name); 
     }, 
     drilldown: function(e) { 
      //alert('drill Down'); 
      console.log(this); 
      console.log(e.seriesOptions.id); 

      console.log(this.options.series[0].name); 
      console.log(this.options.series[0].data[0].name); 
     } 
     } 
    }, 
    title: { 
     text: 'DrillUp button styling' 
    }, 
    xAxis: { 
     type: 'category' 
    }, 

    legend: { 
     enabled: false 
    }, 

    plotOptions: { 
     series: { 
     borderWidth: 0, 
     dataLabels: { 
      enabled: true, 
     } 
     } 
    }, 

    series: [{ 
     name: 'Things', 
     colorByPoint: true, 
     data: [{ 
     name: 'Dieren', 
     y: 5, 
     drilldown: 'animals' 
     }, { 
     name: 'Fruit', 
     y: 2, 
     drilldown: 'fruits' 
     }, { 
     name: "Auto's", 
     y: 4 
     }] 
    }], 
    drilldown: { 
     drillUpButton: { 
     relativeTo: 'spacingBox', 
     position: { 
      y: 0, 
      x: 0 
     }, 
     theme: { 
      fill: 'white', 
      'stroke-width': 1, 
      stroke: 'silver', 
      r: 0, 
      states: { 
      hover: { 
       fill: '#bada55' 
      }, 
      select: { 
       stroke: '#039', 
       fill: '#bada55' 
      } 
      } 
     } 

     }, 
     series: [{ 
     id: 'animals', 
     data: [ 
      ['Katten', 4], 
      ['Honden', 2], 
      ['Koeien', 1], 
      ['Schapen', 2], 
      ['Varkens', 1] 
     ] 
     }, { 
     id: 'fruits', 
     data: [ 
      ['Appels', 4], 
      ['Sinaasappels', 2] 
     ] 
     }] 
    } 
    }) 
});