同步页面上的多个StackBarchart( highcharts )

9gm1akwq 于 2022-11-10 发布在 Highcharts

关注(0)|答案(1)|浏览(124)

我在一个页面上有多个堆栈条形图，这些图表可能有不同的系列。如果我将鼠标悬停在图表中的堆栈上，我希望此悬停也同步到其他图表上（在悬停的堆栈名称处显示工具提示，显示悬停效果）。
问题是在下面的例子中，工具提示总是显示相反的堆栈系列名称。对于我的情况，如果我在第一个堆栈条形图中将鼠标悬停在安装上，它将在第一个图表中显示安装的工具提示，但在第二个图表中，它将显示其他工具提示。
我如何才能确保如果我悬停在第一个图表中的安装，然后在第二个图表中的特定堆栈的安装工具提示应该显示。
在注解中附加了相同的JSFiddle
谢谢

highcharts

来源：https://stackoverflow.com/questions/72748472/synchronizing-multiple-stackbarchart-highcharts-on-a-page

1条答案

按热度按时间

pgpifvop1#

它总是到达第二个（最后一个系列），并在其中将状态更改为悬停。要解决此问题，您需要检查悬停点所在的系列是否与循环中正在检查的点所在的系列相比较。

function sharedMouseOver() {
  let currentX = this.x;
  let currentSeries = this.series.index;

  charts = Highcharts.charts;
  charts.forEach(function(chart, index) {
    chart.series.forEach(function(series, seriesIndex) {
      series.points.forEach(function(point, pointsIndex) {

        if (point.x == currentX && point.series.index == currentSeries) {
          chart.tooltip.refresh(point)
          point.series.setState('hover');
        }
      })
    });
  });
}

演示：https://jsfiddle.net/BlackLabel/kfL5087x/1/

赞(0）回复(0）举报 2022-11-10

我来回答

同步页面上的多个StackBarchart( highcharts )

1条答案

相关问题

热门标签

最新问答