2017-11-25 152 views
0

我使用多个highChart在多个图表的仪表盘页面如linearea,花键,馅饼和同步HighCharts同步提示作用的其他图

设置提示同步原型

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和样条图等等我想申请的同步只有

回答

0

参照这个现场演示: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); 
    } 
    }); 
+0

Highcharts包装工作,当绑定重置原型火鼠标移动,但是当mouseleave高图div甚至改变页面,但仍然看着鼠标移动,你可以告诉我如何停止观看鼠标移动 – fahad

相关问题