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/

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

1 个答案: