javascript - 使用 Highcharts 的深入饼图显示/更新单独的条形图

Question

我正在尝试通过饼图的向下钻取在不同的 div 中显示/更新条形图。我正在使用 highcharts - http://www.highcharts.com/demo/pie-drilldown

基本上，在页面加载时，应该有一个饼图和一个条形图(让我们将其命名为 bargraph1。该条形图将位于与饼图不同的 div 中。当我在饼图中向下钻取时，它应该更新 bargraph1使用新的条形图(将其命名为 bargraph2)。当我按饼图旁边的后退按钮时，它应该带回旧的饼图和条形图(bargraph1)。

让我知道如何实现这个图表。

Answer 1

您可以更新 drilldown events 上的条形图数据.

因此，如果您有两组数据，例如

var bargraphData = {
  bar1: [1,2,3,4,5],
  bar2: [5,4,3,2,1]
}

您可以更新条形图的系列 - 向下钻取时使用第二组数据，向上钻取时使用第一组数据。

 chart: {
    type: 'pie',
    events: {
      drilldown: function () {
        bargraph.series[0].update({
          data: bargraphData['bar2']
        });
      },
      drillup: function () {
        bargraph.series[0].update({
          data: bargraphData['bar1']
        });
      }
    }
},

示例:http://jsfiddle.net/n2kttm9x/