Question

我正在使用highchart-react-official，正在使用它绘制两个图表：

1）具有多个系列的折线图

2）柱形图。

现在我想要，如果我将鼠标悬停在第一张图表中的某个点上，它将在第一张图表的线和第二张图表中的柱形图上同时显示高亮点。就像同步图表一样：http://jsfiddle.net/doc_snyder/51zdn0jz/6/

这是我的代码：

((H) => {
  H.Pointer.prototype.reset = () => undefined;

  /**
   * Highlight a point by showing tooltip, setting hover state and 
   draw crosshair
  */
  H.Point.prototype.highlight = function highlight(event) {
    event = this.series.chart.pointer.normalize(event);
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
  };

  H.syncExtremes = function syncExtremes(e) {
    const thisChart = this.chart;

    if (e.trigger !== 'syncExtremes') {
      // Prevent feedback loop
      Highcharts.each(Highcharts.charts, (chart) => {
        if (chart && chart !== thisChart) {
          if (chart.xAxis[0].setExtremes) {
            // It is null while updating
            chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
              trigger: 'syncExtremes',
            });
          }
        }
      });
    }
  };
})(Highcharts);


componentDidMount() {
  this.changeChart();

  ['mousemove', 'touchmove', 'touchstart'].forEach((eventType) => {
    document
      .getElementById('tab__charts')
      .addEventListener(eventType, (e) => {
        for (let i = 0; i < Highcharts.charts.length; i += 1) {
          const chart = Highcharts.charts[i];
          // let secSeriesIndex = 1;
          if (chart) {
            // Find coordinates within the chart
            const event = chart.pointer.normalize(e);

            // Get the hovered point

            chart.series.forEach(series => {
              const point = series.searchPoint(event, true);
              if (point) {
                point.highlight(e);
              }
            });
          }
        }
      });
  });
}

一些重要的图表配置：

tooltip: {
  enabled: true,
  useHTML: true,
  shared: true,
}

xAxis: {
  events: {
    setExtremes: (e) => {
      Highcharts.syncExtremes(e);
    },
  }
}

现在，通过同步两个图表上的工具提示，此代码可以正常工作。但是问题出在第一张图表中，它有两条线，当我将鼠标悬停在第一条图表上时，它会以圆形圆圈高亮显示该点，但是第二条并没有突出显示。

我找到原因的原因是在point.highlight(e);的{{1}}

对于第二个系列，此行在悬停时显示错误：

更具体地说，componendDidMount正在调用top函数：point.highligh(e)，检查问题的顶部，在该函数中此函数调用导致错误

H.Point.prototype.highlight = ()

注意：我将尝试重现并创建jsfiddle或类似的东西，但是如果有人可以帮助解决这个问题，则发布此内容。

我正在传递系列数据中的对象数组，因为我需要在图表点上提供更多信息的工具提示：

this.series.chart.tooltip.refresh(this);

以下是该问题的演示：https://codesandbox.io/s/pk2w85jpk0

Answer 1

问题在于数据格式，x值应以毫秒为单位：

        data: [
          {
            x: new Date("2018-12-25T09:00:06.247Z").getTime(),
            y: 6609592859.48
          },
          ...
        ]

实时演示：https://codesandbox.io/s/ovk25m493q

React Highchart：同步图表和工具提示未突出显示要点

1 个答案: