一、先看效果
折线图
二、实现步骤
1、引入chart.js库:
<script src="jscss/chart.js"></script>
2、在html页面中加入:
<canvas id="myChart"></canvas>
3、使用js渲染canvas:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: datesArray, // X轴标签
datasets: [
// {
// label: '',
// data: [],
// borderColor: 'rgba(75, 192, 192, 1)', //产出的颜色
// backgroundColor: 'rgba(75, 192, 192, 0.2)',
// fill: false,
// }, {
// label: '',
// data: [],
// borderColor: 'rgba(255, 99, 132, 1)', //通过的颜色
// backgroundColor: 'rgba(255, 99, 132, 0.2)',
// fill: false,
// }
]
},
options: {
responsive: true,
scales: {
x: {
beginAtZero: true
},
y: {
beginAtZero: true,
ticks: {
// Y轴标签固定
callback: function(value, index, values) {
return [0,20, 40, 60, 80, 100].includes(value) ? value : '';
}
},
suggestedMin: 0,
suggestedMax: 100
}
}
}
});
里面的数据可以动态设置:
function updateChartData(labels, datasets) {
myChart.data.labels = labels; // 更新 X轴标签
myChart.data.datasets = datasets; // 更新 datasets
myChart.update(); // 重新渲染图表
}
如果找不到chart.js可以查看我的上一篇博文:http://t.csdnimg.cn/9GYAK