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

Question

是否可以在 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);
               }
             }

当我将一条线悬停在面积图上并移动到饼图时，工具提示的背景颜色会发生变化。

Answer 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/