Question

我试图对一些稍微复杂的图表使用Highcharts Synchronization。我已经使同步在只有1个系列的其他图表上工作得很好。

您可以在此处查看示例：http://jsfiddle.net/nhng5827/o9uh2jqy/42/

我将我的复杂图表简化了几个点，通常该图表有6条线，而不是4条线。如您所见，工具提示仅出现在图形的右侧，并且所有内容都会延迟。如果工具提示未悬停在特定行上，我也不希望标注框读出任何数字。

我已经做了相当多的研究，并实现了一些我看到的代码，这些代码允许两个序列的图表进行同步（http://jsfiddle.net/mjsdnngq/72/），但是我认为最大的不同是系列数据只占实际图表的一半。

    $('#container').bind('mousemove touchmove touchstart', function (e) {
      var chart,
      points,
      i,
      secSeriesIndex = 1;

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

          if (points[0] && points[1]&& points[2]&& points[3]) {
              // if (!points[0].series.visible) {
              //     points.shift();
              //     secSeriesIndex = 0;
              // }
              // if (!points[secSeriesIndex].series.visible) {
              //     points.splice(secSeriesIndex,1);
              // }
              if (points.length) {
                  chart.tooltip.refresh(points); // Show the tooltip
                  chart.xAxis[0].drawCrosshair(e, points[0]); // Show the crosshair
                  chart.xAxis[0].drawCrosshair(e, points[3]); // Show the crosshair
              }
          }
      }
  });
 /**
  * Override the reset function, we don't need to hide the tooltips and crosshairs.
  */
 Highcharts.Pointer.prototype.reset = function () {
     return undefined;
 };
Highcharts.Point.prototype.highlight = function (event) {
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh([points[0],points[1],points[2],points[3]]); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
 * Synchronize zooming through the setExtremes event handler.
 */
function syncExtremes(e) {
    var thisChart = this.chart;

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

任何帮助将不胜感激。

Answer 1

要正确同步图表，必须在每个mousemove事件上清除点状态：

        Highcharts.each(chart.series, function(s) {
            Highcharts.each(s.points, function(p) {
                p.setState('');
            });
        });

实时演示：http://jsfiddle.net/BlackLabel/cvb6pwsu/

API参考：https://api.highcharts.com/class-reference/Highcharts.Point#setState

另外，请看以下示例：http://jsfiddle.net/BlackLabel/6f37b42q/，它对您可能会有用。

Highcharts 6.0同步错误

1 个答案: