html - 在 HTML 表格中显示的 Highcharts

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