使用chartjs-plugin-zoom为chartjs的图表添加缩放事件处理程序

Question

chartjs-插件缩放为缩放和平移插件chart.js之

您可以调用 chart.resetZoom() 以编程方式将缩放重置为默认状态。在 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 向图表添加缩放事件处理程序（滚轮和捏合事件）？谢谢。

Answer 1

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

\n\n

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

\n\n

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

\n\n

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

\n\n

基本上， chartjs-plugin-zoom 的工作方式是，它在鼠标滚动时从刻度数组中删除/添加元素，上面的插件将检查这一点，从此显示/隐藏其余缩放按钮。

\n\n

\xe1\xb4\xa1\xe1\xb4\x8f\xca\x80\xe1\xb4\x8b\xc9\xaa\xc9\xb4\xc9\xa2\xe1\xb4\x87x\xe1\xb4\x80\xe1\xb4 \x8d\xe1\xb4\x98\xca\x9f\xe1\xb4\x87\xe2\xa7\xa9

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n