Highcharts在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] 
     ] 
     }] 
    } 
    }) 
});