chart.js使用教程

Chart.js 使用教程
创建图表的基础结构
为了创建一个基本的Chart.js图表，HTML页面上需要有一个<canvas>元素来作为绘图区域。
<canvas id="myChart"></canvas>
登录后复制
随后，在JavaScript文件中初始化这个Canvas对象并配置数据集以及样式选项：
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // 图表类型可以是'line','bar','radar'等
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
登录后复制
这段代码定义了一个柱状图(bar chart)，其中包含了颜色标签和投票数量的数据集合[^1]。
添加交互功能——缩放和平移插件
为了让图表具备更好的用户体验，chartjs-plugin-zoom提供了方便易用的功能扩展。通过安装此插件可以让用户轻松实现对图表内容的手势控制操作，比如放大缩小或者拖拽查看不同部分的内容。
首先确保已经引入了必要的库文件，并按照官方文档说明完成设置过程。
npm install --save chart.js chartjs-plugin-zoom
登录后复制
接着修改之前的脚本以激活这些特性:
import Chart from 'chart.js/auto';
import zoomPlugin from 'chartjs-plugin-zoom';

// 注册插件
Chart.register(zoomPlugin);

new Chart(document.getElementById('myChart'), {
plugins: [{
afterInit(chart) {
const originalFit = chart.fit.bind(chart);
Object.assign(chart, {
fit() {
this._resize();
originalFit.call(this);
}
});
}
}],
options: {
responsive: true,
pan: {
enabled: true,
mode: 'xy'
},
zoom: {
wheel: {
enabled: true
},
pinch: {
enabled: true
},
mode: 'xy'
}
}
});
登录后复制
上述代码片段展示了如何利用chartjs-plugin-zoom增强图表互动性的方法。