如何使用angular 7缩放chart.js中的图表 [英] How to zoom charts in chart.js using angular 7
本文介绍了如何使用angular 7缩放chart.js中的图表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个line-chart
,我想缩放但无法执行.这是我的代码
I have a line-chart
and I want to zoom it but unable to do it. Here is my code
let ctx = document.getElementById('myChart')
let chart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [7, 10, 3, 5, 2, 3],
fill: true,
backgroundColor: 'orange',
borderColor: 'green',
pointBorderColor: 'red',
pointBackgroundColor: 'red'
}]
},
options: {
plugins: {
pan: {
enabled: true,
mode: 'x',
onPan: function () { console.log('I was panned!!!'); }
},
zoom: {
enabled: true,
drag: true,
mode: 'x',
onZoom: function () { console.log('I was zoomed!!!'); }
},
},
responsive: true,
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div class="row">
<div class="col d-flex justify-content-center">
<canvas id="myChart" style="max-width:95%;height:300px !important;"></canvas>
</div>
</div>
我将以下plugin
用于zooming
https://github.com/chartjs/chartjs-plugin-zoom#readme
我还在项目中加入了hammerjs
和angular/animations
.
I have also included hammerjs
and angular/animations
in my project.
更新
为什么打字稿不知道pan
和zoom
?
Why pan
and zoom
are unknown to typescript?
// package.json
"chart.js": "^2.7.3",
"chartjs-plugin-zoom": "^0.6.6",
推荐答案
首先,您需要运行npm install --save chartjs-plugin-zoom与npm一起安装.
First you need to Run npm install --save chartjs-plugin-zoom to install with npm.
然后在您的ts文件中导入"chartjs-plugin-zoom". 并编写这样的插件:
then do import 'chartjs-plugin-zoom' in your ts file. and write plugin like this :
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x'
},
zoom: {
enabled: true,
mode: 'x'
}
}
},
这篇关于如何使用angular 7缩放chart.js中的图表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文