当图表具有不同的宽度时，同步的HighCharts不起作用

Question

在HighCharts中，我尝试使用Synchronized multi charts解释Fiddle。如果所有图表的宽度相等，则效果很好。

$('#container').bind('mousemove touchmove touchstart', function (e) {
    var chart,
        point,
        i,
        event;

    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i];
        event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
        point = chart.series[0].searchPoint(event, true); // Get the hovered point

        if (point) {
            point.highlight(e);
        }
    }
});

但是，如果我将图表的宽度更改为不同的大小，则工具提示无法正确同步。你可以查看这个Fiddle。

即使图表有不同的尺寸，有没有办法同步？

Answer 1

如果您有相同x坐标的数据，您可以从悬停图表中捕获该点，然后在其他两个图表中找到相应的点 - 并调用highlight()。

function highlightPoints(e) {
  const container = this;
  const charts = Highcharts.charts.slice();
  const chartIndex = charts.findIndex(chart => chart.renderTo === container);

  if (chartIndex > -1) {
    const chart = charts.splice(chartIndex, 1)[0];

    const event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
    const point = chart.series[0].searchPoint(event, true); // Get the hovered point

    if (point) {
      const x = point.x;
      point.highlight(e);

      charts.forEach(chart => {
        const points = chart.series[0].points;
        for (let i = 0; i < points.length; i = i + 1) {
          if (points[i].x === x) {
            points[i].highlight(e);
            break;
          }
        }
      })
    }
  }
}

绑定mousemove事件

  $('.chart-0, .chart-1, .chart-2').on('mousemove', highlightPoints);

例如：http://jsfiddle.net/5vcc6z40/