javascript - Highcharts 同步图表与其他图表结合

标签 javascript jquery highcharts synchronization tooltip

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

为了说明我的意思,我做了以下示例:

JSFiddle

$('#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 图表。

希望您能帮我解决这个问题!

最佳答案

你是对的,问题是 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/

关于javascript - Highcharts 同步图表与其他图表结合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48608331/

相关文章:

javascript - jQuery-一次停止所有音频

javascript - HighChart 正在阻止父级上的点击事件

javascript - 从数组创建对象数组

javascript - 在 Javascript 对象中查找和替换键

javascript - 抓取谷歌词典

jquery - 屏蔽输入在 Android 手机中不起作用

javascript - Highcharts 下载带有 svg 模式的图表

javascript - 通过地址栏加载远程 JavaScript 文件

javascript - 如果单击链接,则停止绑定(bind) "blur"

javascript - Owl Carousel - 宽度计算错误