터치 장치에서 하이 차트 3D 분산 형 차트의 회전 활성화

Question

웹 응용 프로그램에서 Highcharts를 사용하여 렌더링 한 아름다운 3D 분산 형 차트 this을 사용합니다.

마우스를 클릭하고 드래그하여 멋지게 회전합니다.

그러나 휴대 전화 나 태블릿에서도 회전하지 않습니다.

합니다 (Highcharts 샘플 페이지에서 채택) 다음과 같이 회전이 보이는 가능하게하는 코드 :

// Add mouse events for rotation 
$(chart.container).on('mousedown.hc touchstart.hc', function (eStart) { 
    eStart = chart.pointer.normalize(eStart); 

    var posX = eStart.pageX, 
     posY = eStart.pageY, 
     alpha = chart.options.chart.options3d.alpha, 
     beta = chart.options.chart.options3d.beta, 
     newAlpha, 
     newBeta, 
     sensitivity = 5; // lower is more sensitive 

    $(document).on({ 
     'mousemove.hc touchdrag.hc': function (e) { 
      // Run beta 
      newBeta = beta + (posX - e.pageX)/sensitivity; 
      chart.options.chart.options3d.beta = newBeta; 

      // Run alpha 
      newAlpha = alpha + (e.pageY - posY)/sensitivity; 
      chart.options.chart.options3d.alpha = newAlpha; 

      chart.redraw(false); 
     }, 
     'mouseup touchend': function() { 
      $(document).off('.hc'); 
     } 
    }); 
}); 

나는이 논리가 등록 된 이벤트가 내 장치에 사용할 수없는 가정 (최근 삼성 갤럭시 탭과 삼성 갤럭시 S5).

아이디어가 있으십니까?

Answer 1

터치 이벤트에 pageX 또는 pageY이없는 문제가 있습니다. event.pagePosition을 사용하는 대신 event.chartPosition을 사용해야합니다. chartPosition은 chart.pointer.normalize으로 정규화 된 후에 만 ​​사용할 수 있습니다.

또한 touchdrag 이벤트가 없으므로 touchmove

이어야합니다.