Highcharts 同步图表与其他图表相结合

Question

我目前正在构建 highcharts 仪表板，但遇到了问题。如果我尝试将 highcharts 同步图表与其他图表结合使用，工具提示会与其他图表出错。如果您在同步图形上移动，工具提示会在其他图形中移动并保持可见。

为了说明我的意思，我做了以下例子：

$('#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];
// Find coordinates within the chart
event = chart.pointer.normalize(e.originalEvent);
// Get the hovered point
point = chart.series[0].searchPoint(event, true);

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

Highcharts.Pointer.prototype.reset = function() {
return undefined;
};

Highcharts.Point.prototype.highlight = function(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
};

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

我怀疑是这个问题

Highcharts.charts

因此，我认为工具提示适用于所有 highcharts 图表。

希望你能帮我解决这个问题！

Answer 1

你是对的，问题是 Highcharts.chart 数组，它包含页面上的所有图表。在您的情况下，一个好主意是向图表选项添加额外的属性以指示同步图表，例如：

    .highcharts({
      chart: {
        isSynced: true, // our own property
        height: 100,
        marginLeft: 40, // Keep all charts left aligned
        spacingTop: 20,
        spacingBottom: 20
      },
      ...
    });

现在过滤掉这些图表：

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

    // Only charts in sync:
    if (chart && chart.options.chart.isSynced) {
      // Find coordinates within the chart
      event = chart.pointer.normalize(e.originalEvent);
      // Get the hovered point
      point = chart.series[0].searchPoint(event, true);

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

固定演示：https://jsfiddle.net/BlackLabel/e3jdhjLo/5/

Highcharts 同步图表与其他图表相结合

Highcharts synchronized charts combining with other charts

javascript

jquery

synchronization

tooltip

highcharts