使用chartjs-plugin-zoom将chart事件的缩放事件处理程序添加到chartjs的图表中 [英] Add zoom event handler to charts for chartjs with chartjs-plugin-zoom

问题描述

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

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

解决方案

不幸的是，你不能将鼠标滚动事件添加到图表中，因为 chartjs-plugin-zoom 默认会阻止这种情况。

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

 插件：[{
 beforeDraw：function（c）{
 var reset_zoom = document.getElementById（reset_zoom） ; //重置按钮
 var ticks = c.scales ['x-axis-0']。ticks.length; // x轴ticks数组
 var labels = c.data.labels.length; //标签数组
 if（ticks< labels）reset_zoom.hidden = false; 
 else reset_zoom.hidden = true; 
} 
}] 
  

添加此插件后跟图表选项。

基本上， chartjs-plugin-zoom 的工作方式是，它从/中删除/添加元素<鼠标滚动中的em> ticks 数组，上面的插件会检查，然后相应地显示/隐藏 rest zoom 按钮。

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

  var ctx = document.getElementById（myChart）; var myChart = new Chart（ctx，{type：'bar'，data：{labels：[Red，Blue，Yellow，Green ，紫色，橙色]，数据集：[{label：'＃of Votes'，数据：[12,19,3,5,2,3}}]}，选项：{pan：{enabled：是的，m ode：'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轴ticks数组var labels = c.data.labels.length; //标签数组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 =myChartwidth =600height =400>< / canvas>< / div>< button id =reset_zoomhidden>重置缩放< / button>  

chartjs-plugin-zoom is a zoom and pan plugin for Chart.js

You can call chart.resetZoom() to programmatically resets the zoom to the default state. See 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();
});

And it looks like:

However, I don't want to show the Reset zoom button in the first place. Instead, I would like to hide it first, and then listen for a zoom event (In chartjs-plugin-zoom the event is mouse wheel and pinch for touch screens) to show it.

So the question is, is there a way in chartjs with chartjs-plugin-zoom to add a zoom event handler (wheel and pinch events) to a chart? Thanks.

解决方案

Unfortunately, you can not add mouse scroll event to the chart, as the chartjs-plugin-zoom will prevent that by default.

However, you can use the following chart plugin, which will get the job done for you ...

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

add this plugin followed by your chart options.

Basically, the way chartjs-plugin-zoom works is, it removes/adds elements from/to the ticks array on mouse scroll, and the above plugin will check for that, henceforth show / hide the rest zoom button accordingly.

ᴡᴏʀᴋɪɴɢ ᴇ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>

这篇关于使用chartjs-plugin-zoom将chart事件的缩放事件处理程序添加到chartjs的图表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！