使用chartjs-plugin-zoom为chartjs的图表添加缩放事件处理程序 [英] Add zoom event handler to charts for chartjs with chartjs-plugin-zoom
问题描述
但是,我不想首先显示重置缩放"按钮.相反,我想先隐藏它,然后监听缩放事件(在 chartjs-plugin-zoom 中,事件是鼠标滚轮和触摸屏的捏合)来显示它.
所以问题是,chartjs 中是否有一种方法可以使用 chartjs-plugin-zoom 向图表添加缩放事件处理程序(滚轮和捏合事件)?谢谢.
很遗憾,您不能向图表添加鼠标滚动事件,因为 chartjs-plugin-zoom 将默认阻止该事件.
但是,您可以使用以下图表插件,它将为您完成工作......
插件:[{beforeDraw:函数(c){var reset_zoom = document.getElementById("reset_zoom");//复位按钮var ticks = c.scales['x-axis-0'].ticks.length;//x轴刻度数组var 标签 = c.data.labels.length;//标签数组if (ticks
添加此插件,然后添加您的图表选项.
基本上,chartjs-plugin-zoom 的工作方式是,它在鼠标滚动时从/向 ticks 数组中删除/添加元素,并且上面的插件将检查为此,此后相应地显示/隐藏 rest zoom 按钮.
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var ctx = document.getElementById("myChart");var myChart = 新图表(ctx,{类型:'酒吧',数据: {标签:[红色"、蓝色"、黄色"、绿色"、紫色"、橙色"]、数据集:[{label: '# of Votes',数据:[12, 19, 3, 5, 2, 3]}]},选项: {平底锅: {启用:真,模式:'x',},飞涨: {启用:真,模式:'x',}},插件:[{beforeDraw:函数(c){var reset_zoom = document.getElementById("reset_zoom");//复位按钮var ticks = c.scales['x-axis-0'].ticks.length;//x轴刻度数组var 标签 = c.data.labels.length;//标签数组if (ticks
.myChartDiv {最大宽度:600px;最大高度: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>
<button id="reset_zoom" hidden>重置缩放</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为chartjs的图表添加缩放事件处理程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!