是否可以在 ChartJS 上添加拖动和缩放功能？我想做类似 here 的事情.
下面是我绘制折线图的方法:
<canvas class="square_margin_less" id="myChart" width="100" height="30" > </canvas>
<script>
new Chart(document.getElementById("myChart").getContext('2d'),
{
type: 'line',
data: {
labels: {{ data.labels|safe }},
datasets:
[{
label: 'x',
data: {{ data.x }},
borderColor: 'rgba(233,105,118,1)',
},
{
label: 'y',
data: {{ data.y }},
borderColor: 'rgba(96,143,239,1)'
},
{
label: 'z',
data: {{ data.z }},
borderColor: 'rgba(144,247,136,1)'
}]
},
});
</script>
有一些个性化的方法吗？
最佳答案
我没有找到 Chart.js 的“拖动和缩放”功能以及“平移和缩放”版本的简单示例，因此我决定自己实现演示版本。
外部脚本列表非常重要:hammer-js，然后是Chart.bundle.js 和chartjs-plugin-zoom.js .
const config = {
type: 'line',
data: {
labels: [new Date('2019-08-20'), new Date('2019-08-25'), new Date('2019-08-30')],
datasets: [{
label: 'Line',
data: [2, 5, 3],
borderColor: '#D4213D',
fill: false,
}, ],
},
options: {
scales: {
xAxes: [{
type: 'time',
}, ],
},
pan: {
enabled: true,
mode: 'xy',
},
zoom: {
enabled: true,
mode: 'xy', // or 'x' for "drag" version
},
},
};
window.onload = function() {
new Chart(document.getElementById('chart'), config);
};<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.6.6/chartjs-plugin-zoom.js"></script>
<html>
<body>
<div style="width:380px;">
<canvas id="chart"></canvas>
</div>
</body>
</html>如果有人对其他库感兴趣，我在 Vicotry 网站上找到了一个有趣的解决方案，它具有折线图的“画笔和缩放”功能:https://formidable.com/open-source/victory/guides/brush-and-zoom/ .
编辑:在“拖动”版本中，您必须使用缩放:
drag: {
borderColor: 'hsl(35, 100%, 60%)',
borderWidth: '3',
backgroundColor: 'hsl(35, 100%, 60%)',
},
关于javascript - ChartJS折线图拖动和缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50004657/