2017-11-25 1 views
0
내가 여러 차트의 대시 보드 페이지, 예를 들면 linearea, 스플라인, 파이 및 동기화에서 여러 highChart을 사용하고

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

위한 그러나 기능 효과 위 모든 하이 차트 (예 : 라인 영역 및 스플라인 차트 등) 동기화에만 적용 할 내용

답변

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 highchart도 페이지를 변경하지만 DIV 때 여전히보고 마우스 움직임은 어떻게 마우스의 움직임을보고 중지하는 말해 줄 수 – fahad