使用 Highcharts 的向下钻取饼图显示/更新单独的条形图

Question

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

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

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

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/