使用chartjs-plugin-zoom将chart事件的缩放事件处理程序添加到chartjs的图表中

Question

chartjs-plugin-zoom是Chart.js

的缩放和平移插件

您可以调用chart.resetZoom（）以编程方式将缩放重置为默认状态。请参阅this example on jsfiddle。

HTML：

<div class="myChartDiv">
    <canvas id="myChart" width="600" height="400"></canvas>
</div>

<button id="reset_zoom">
    Reset zoom
</button>

JavaScript的：

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3]
        }]
    },
    options: {
        pan: {
            enabled: true,
            mode: 'x',
        },
        zoom: {
            enabled: true,                      
            mode: 'x',
        }
    }
});

$('#reset_zoom').click(function(){
    myChart.resetZoom();
});

看起来像是：

但是，我不想首先显示重置缩放按钮。相反，我想首先隐藏它，然后听一个缩放事件（在chartjs-plugin-zoom中，事件是鼠标滚轮和捏合触摸屏）来显示它。

所以问题是，有没有一种方法在chartjs中使用chartjs-plugin-zoom将缩放事件处理程序（wheel和pinch事件）添加到图表中？感谢。

Answer 1

不幸的是，您无法将鼠标滚动事件添加到图表中，因为 chartjs-plugin-zoom 默认会阻止它。

但是，您可以使用以下图表插件，它将为您完成工作......

plugins: [{
   beforeDraw: function(c) {
      var reset_zoom = document.getElementById("reset_zoom"); //reset button
      var ticks = c.scales['x-axis-0'].ticks.length; //x-axis ticks array
      var labels = c.data.labels.length; //labels array
      if (ticks < labels) reset_zoom.hidden = false;
      else reset_zoom.hidden = true;
   }
}]

添加此插件，然后添加图表选项。

基本上， chartjs-plugin-zoom 的工作方式是，它在鼠标滚动中删除/添加 ticks 数组中的元素，上面的插件会检查为此，此后显示/隐藏休息缩放按钮。

ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇᴀᴍᴘʟᴇ

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
         label: '# of Votes',
         data: [12, 19, 3, 5, 2, 3]
      }]
   },
   options: {
      pan: {
         enabled: true,
         mode: 'x',
      },
      zoom: {
         enabled: true,
         mode: 'x',
      }
   },
   plugins: [{
      beforeDraw: function(c) {
         var reset_zoom = document.getElementById("reset_zoom"); //reset button
         var ticks = c.scales['x-axis-0'].ticks.length; //x-axis ticks array
         var labels = c.data.labels.length; //labels array
         if (ticks < labels) reset_zoom.hidden = false;
         else reset_zoom.hidden = true;
      }
   }]
});

$('#reset_zoom').click(function() {
   myChart.resetZoom();
});

.myChartDiv {
   max-width: 600px;
   max-height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://npmcdn.com/Chart.Zoom.js@0.3.0/Chart.Zoom.min.js"></script>
<div class="myChartDiv">
   <canvas id="myChart" width="600" height="400"></canvas>
</div>
<button id="reset_zoom" hidden>
   Reset zoom
</button>

Answer 2

另一种方法是使用zoom插件的onZoomComplete事件。

首先，您应该将样式应用于缩放按钮，默认情况下将其隐藏。

.reset-zoom {
    display: none;
}

和按钮

<button id="reset_zoom" class="reset-zoom">
    Reset zoom
</button>

然后在图表的缩放选项上添加

zoom: {
   enabled: true,
   mode: 'x',
   onZoomComplete: function(myChart) {
         $('#reset_zoom').show();
   }
}

为了在调用resetZoom后再次隐藏缩放按钮，您可以添加

$('#reset_zoom').click(function(){
    myChart.resetZoom(); 
    $('#reset_zoom').hide();
});

因此，每次您放大重置缩放按钮时都会显示，并且一旦重置缩放，它将再次隐藏。