当图表具有不同的宽度时，同步的HighCharts不起作用 [英] Synchronized HighCharts does not work when charts have different width

问题描述

在HighCharts中，我尝试使用同步多图表，如小提琴 .如果所有图表的宽度相等，它会很好地工作.

In HighCharts, I tried with Synchronized multi charts as explained in the Fiddle. It works well if provided all charts have equal width.

$('#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);
        }
    }
});

但是，如果我将图表的宽度更改为不同的大小，则工具提示将无法正确同步.您可以检查小提琴.

But If I change the width of the charts to different sizes, then tooltip does not sync properly. You can check this Fiddle.

即使图表大小不同，是否有任何同步方式?

Is there any way to sync even if charts have different sizes?

推荐答案

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

If you have data with the same x coordinates you can catch the point from the hovered chart and then find the corresponded points in the other two charts - and call 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事件

Bind the mousemove event

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

示例: http://jsfiddle.net/5vcc6z40/

这篇关于当图表具有不同的宽度时，同步的HighCharts不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！