當圖表具有不同寬度時，同步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); 
     } 
    } 
}); 

但是，如果我將圖表的寬度更改爲不同的大小，則tooltip無法正確同步。你可以檢查這個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/