Масштабирование с колесом прокрутки в CanvasJS

Question

Я использую этот скрипт рисовать диаграммы строки:

function processData(allText) { 
      var allLinesArray = allText.split('\r\n'); 
      if(allLinesArray.length>0){ 
        var dataPoints = []; 
        for (var i = 1; i <= allLinesArray.length-1; i++) { 
          var rowData = allLinesArray[i].split(';'); 
          dataPoints.push({label:rowData[0],y:parseInt(rowData[1])}); 
        } 
        drawChart(dataPoints); 


      } 
    } 

    function drawChart(dataPoints) { 
      var chart = new CanvasJS.Chart("chartContainer", { 
      theme: "theme2", 
zoomEnabled:true, 
      title:{ 
        text: "RPM" 
      }, 
legend: { 
horizontalAlign: "right", 
verticalAlign: "center" 
}, 
      data: [ 
      { 
        type: "line", 
        dataPoints: dataPoints 
      }] 
      }); 

      chart.render(); 
    } 

Текущий код масштабирования на мыши и перетаскиванием зону. Как изменить его, чтобы я мог масштабировать колесо прокрутки?

Answer 1

Обратите внимание на использование недокументированных внутренних компонентов CanvasJS и может быть повреждено в будущем.

1. прикрепить колеса мыши обработчик события:

   var chartContainer = document.getElementById("chartContainer"); 
   if (chartContainer.addEventListener) { 
       // IE9, Chrome, Safari, Opera 
       chartContainer.addEventListener("mousewheel", (e)=>this.MouseWheelHandler(e), false); 
       // Firefox 
       chartContainer.addEventListener("DOMMouseScroll", (e)=>this.MouseWheelHandler(e), false); 
   } 
   

2. реализации обработчика

   MouseWheelHandler(e) { 
   
   let dir : number = (e.wheelDelta || -e.detail) > 0 ? -1 : +1; 
   let b = this.chartV._axes.find((a: any) => {return a.type == 'axisX'}); 
   let delta : number = dir * (b.viewportMaximum - b.viewportMinimum)/10; 
   b.sessionVariables.newViewportMinimum = b.viewportMinimum - delta * (e.clientX/this.chartV.width); 
   b.sessionVariables.newViewportMaximum = b.viewportMaximum + delta * (1 - e.clientX/this.chartV.width); 
   this.chartV.render(); 
   }