链接2种不同类型的highcharts数据

时间:2016-09-25 18:29:36

标签: highcharts

是否可以在2种不同类型的图表中链接/同步2个图表数据,以便一次显示工具提示?

例如,我有一个饼图和面积图。

饼图表示特定浏览器的百分比,面积图显示每个浏览器每年的下载量。

我需要做的是,如果有人点击或悬停在饼图的某个部分,则应突出显示相关行和区域图表的工具提示......

所以当有人点击/悬停在派对上的firefox时,与该区域相关的行应该显示,反之亦然......

这可能与highcharts有关吗?

到目前为止,我所做的工作是https://jsfiddle.net/livewirerules/a9tntdam/1/

我注意到的一件事是我在区域图表中添加了event以显示工具提示悬停时的颜色。

events: {
               tooltipRefresh: function(e) {
                 if (!e.target.hoverSeries) return;
                 $('.highcharts-tooltip>path:last-of-type')
                   .css('fill', e.target.hoverSeries.color);
               }
             }

当我在区域图表上悬停一条线并移动到饼图时,工具提示的背景颜色会发生变化。

1 个答案:

答案 0 :(得分:1)

当您将鼠标悬停在馅饼上时,我不确定您希望在工具提示中显示什么。你有一个点,所以很难在另一个图表上显示整个系列的工具提示。

您可以使用mouseOver和mouseOut事件回调函数突出显示系列(因此它们在悬停时看起来像):

point: {
  events: {
    mouseOver: function() {
      var name = this.name;
      Highcharts.each(chart2.series, function(s) {
        if (name === s.name) {
          s.setState('hover');
        }
      });
    },
    mouseOut: function() {
      var name = this.name;
      Highcharts.each(chart2.series, function(s) {
        if (name === s.name) {
          s.setState('');
        }
      });
    }
  }
},

您可以使用tooltip.refresh(point)刷新特定点上的工具提示:

      mouseOver: function(e) {
        this.group.toFront();
        this.markerGroup.toFront();
        var name = this.name;
        Highcharts.each(chart.series[0].data, function(p) {
          if (name === p.name) {
            p.setState('hover');
            chart.tooltip.refresh(p)
          }
        });
      },

在这里你可以看到一个如何工作的例子: http://jsfiddle.net/a9tntdam/4/