使用Highcharts的追溯饼图显示/更新单独的条形图 [英] Show/Update Separate Bar graphs with Drilldown Pie chart of 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的追溯饼图显示/更新单独的条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！