gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 15:15:21 25 4
gpt4 key购买 nike

chartjs-plugin-zoomChart.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();
});

它看起来像:enter image description here

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

所以问题是,在带有 chartjs-plugin-zoom 的 chartjs 中,有没有办法向图表添加缩放事件处理程序(滚轮和捏合事件)?谢谢。

最佳答案

遗憾的是,您无法将鼠标滚动事件添加到图表,因为 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 数组中删除/添加元素,上面的插件将检查为此,今后相应地显示/隐藏 rest zoom 按钮。

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

关于javascript - 使用 chartjs-plugin-zoom 将缩放事件处理程序添加到 chartjs 的图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44551904/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com