如何在highcharts中同步共享的工具提示和十字线？

k97glaaz 于 2023-01-13 发布在 Highcharts

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

我有几个图表，有些只有一个系列，有些有多个系列。我为有多个系列的图表显示共享工具提示。我在每个图表上显示垂直十字线。
现在我想同步图表。在一个图表中移动鼠标应该会在所有图表的正确位置显示所描述的功能（十字线和工具），并带有更新的数据。
正如你在fiddle中看到的，这并不完全有效。x位置被正确同步。工具提示被更新。但是鼠标悬停在第二个图表上时，第一个图表中的工具提示只显示一个y值，而不是两个。[编辑：我找到了一种更新十字线的方法但它并不是在每个图表中都有效，当我设置
工具提示：{共享：真的，
也许有更好的解决办法？]
https://jsfiddle.net/hbaed859/1/

let highlightFunction = function (point) {
Highcharts.charts.forEach(chart => {
  chart.series.forEach(s => {
    if (point.series.name != s.name) {
      s.points.forEach(p => {
        if (p.index === point.index) {
          p.setState('hover')
          p.series.chart.tooltip.refresh(p)
          // shows tooltip, but ignores "shared: true"       
         chart.xAxis[0].drawCrosshair(null, p);
      ...
 

chart = Highcharts.chart('chart1', {
 series: [{
  point: {
    events: {
      mouseOver(e) {
        let point = this;
        highlightFunction(point)
      }
    ...

[编辑]...该方法对于小数据集很好，对于大数据集，它需要很长时间来重新计算所有图表的十字准线位置。

highcharts

来源：https://stackoverflow.com/questions/75017437/how-to-synchronise-shared-tooltip-and-crosshair-in-highcharts

1条答案

按热度按时间

i1icjdpr1#

您已经非常接近于实现所需的结果。使用hideCrosshair方法实现十字线可见性，并将所有图表系列中的点添加到tooltip.refresh方法调用中。下面是优化的代码：

function setHighlightState() {
  const point = this;

  Highcharts.charts.forEach(chart => {
    if (point.series.chart !== chart) {
      const matchedPoints = [];

      chart.series.forEach(s => {
        const matchedPoint = s.points[point.index];
        matchedPoints.push(matchedPoint);
        matchedPoint.setState('hover');
      });

      chart.tooltip.refresh(matchedPoints)
      chart.xAxis[0].drawCrosshair(null, matchedPoints[0]);
    }
  });
}

function hideHighlightState() {
  const point = this;

  Highcharts.charts.forEach(chart => {
    if (point.series.chart !== chart) {
      chart.series.forEach(s => {
        s.points[point.index].setState('');
      });

      chart.tooltip.hide();
      chart.xAxis[0].hideCrosshair();
    }
  });
}

- 实时演示：**https://jsfiddle.net/BlackLabel/nwj3co0a/
- API参考：**https：//www.example.comapi.highcharts.com/class-reference/Highcharts.Axis#hideCrosshair

赞(0）回复(0）举报 2023-01-13

我来回答

如何在highcharts中同步共享的工具提示和十字线？

1条答案

相关问题

热门标签

最新问答