Question

我在仪表板页面中使用多个highChart，例如linearea，spline，pie和多个图表的同步

为原型设置工具提示同步

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

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

但是上面的功能影响所有的高图，例如linearea和spline chart等我想要仅用于同步

Answer 1

请参阅此现场演示： http://jsfiddle.net/kkulig/eec3mg9t/

我将每个图表放在一个单独的容器中 - 然后更容易操作它们。 class="sync"表示应该同步图表：

<div id="container0"></div>
<div id="container1" class="sync"></div>
<div id="container2" class="sync"></div>

然后我使用这个类设置常见事件：

$('.sync').bind('mousemove touchmove touchstart', function(e) {
   (...)

我应用换行而不是覆盖Highcharts.Pointer.prototype.reset函数，以便为非同步图表触发默认操作。

  // Custom wrap
  Highcharts.wrap(Highcharts.Pointer.prototype, 'reset', function(proceed, allowMove, delay) {
    if (!this.chart.options.chart.isSynchronized) {
      proceed.apply(this, allowMove, delay);
    }
  });

HighCharts同步工具提示效果其他图表

1 个答案: