使用Highcharts的追溯饼图显示/更新单独的条形图

问题描述：

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

I am trying to Show/Update a Bar graph in a different div with drilldown of piechart. I am using highcharts - http://www.highcharts.com/demo/pie-drilldown

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

Basically, at page load, there should be a piechart and a bar graph (lets name it as bargraph1. This bar graph will be in different div than pie chart. When I drill down in the piechart, it should update the bargraph1 with a new bargraph(lets name it as bargraph2). When I press back button next to piechart, it should bring back the old piechart and bargraph (bargraph1).

让我知道如何实现此图.

Let me know how to implement this graph.

答

您可以在追溯事件.

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

So if you have two sets of data, e.g.

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

您可以更新条形图的系列-使用第二组数据在钻取中更新，使用第一组数据钻取.

You can update bargraph's series - on drilldown with the second set of data, on drillup with the first.

 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/

使用Highcharts的追溯饼图显示/更新单独的条形图

相关推荐