2017-12-20 3 views
0

다음 사양의 하이 차트 차트가 있습니다.하이 차트 | 차트 확대/축소 | 위젯과 함께 확대/축소합니다.

chart: { 
    zoomType: 'xy', 
    panKey: 'shift', 
    panning: true 
} 

내 관심사는 'panKey'입니다.

키보드의 "shift"키 대신 "마우스 오른쪽 버튼"에 팬 컨트롤을 어떻게 연결합니까?

참고로이 jsfiddle을 가져 가십시오.
http://jsfiddle.net/mqutcruw/23/

'클릭 이벤트'가 등록 된 사례가 있지만 사용 방법을 잘 모르겠습니다. (https://jsfiddle.net/BlackLabel/Utx8g/?utm_source=website&utm_medium=embed&utm_campaign=Utx8g)

+0

'panKey'는 확대/축소와 패닝 (https://api.highcharts.com/highcharts/chart.panning) 간의 전환에 사용됩니다. 따라서 마우스 왼쪽 버튼을 클릭하고 마우스 오른쪽 버튼을 클릭하여 패닝하면 확대/축소가 가능합니까? –

+0

맞습니다. 그리고 panKey는 둘 사이의 전환을위한 것이라는 것을 이해합니다. 나는 거기에 "교대"키 대신에 인민폐를 사용할 수 있는지, 아니면 다른 방법으로 그것을 할 수 있는지 알고 싶었다. – murphy1310

답변

1

라이브 데모를 참조하십시오 http://jsfiddle.net/kkulig/v078hLfq/

나는 Highcharts 코어의 일부 수정했다.

기본적으로 하이 차트는 RMB 이벤트를 완전히 무시합니다. 나는 그에 대한 책임이있는 if 문장을 주석 처리하고 도표에 rmbClicked 플래그를 대신 설정했다.

H.Pointer.prototype.onContainerMouseDown = function(e) { 
    //if (e.button !== 2) { 
    this.chart.rmbClicked = (e.button === 2); // set flag on chart - used in drag() 

그럼 I 드래그 또는 패닝을 수행할지 여부를 확인하는 덮어 drag 기능이 플래그를 사용했을

// disable context menu on rmb click 
    H.wrap(H.Pointer.prototype, 'setDOMEvents', function(proceed) { 
    proceed.call(this); 
    this.chart.container.oncontextmenu = function(e) { 
     return false; 
    } 
    }); 

: 마지막

if (!chart.rmbClicked) { 
    // make a selection 
    (...) 
    } else { // right mouse button clicked 
    // panning 

, I 컨텍스트 메뉴 이벤트를 중지

하이 차트 코어 수정에 관한 문서 페이지 :https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

+0

깔끔한! 감사!.. – murphy1310