主题
折线图 Line
折线图用于展示数据随时间或类别的变化趋势。使用 Chart.js 可以轻松绘制丰富且美观的折线图,满足多种数据可视化需求。
基础折线图示例
下面示例展示了如何创建一个响应式折线图,包含数据点、颜色和简单动画效果。
js
(function() {
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
datasets: [{
label: '示例数据',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
plugins: {
legend: { display: true },
tooltip: { enabled: true }
}
}
});
})();
演示
折线图示例
loading