JavaScript数据可视化_Chart.js应用实例
Chart.js 是基于 HTML5 Canvas 的 JavaScript 图表库，支持折线图、柱状图、饼图等。1. 可通过 CDN 或 npm 引入；2. 创建柱状图需定义 canvas 和配置数据；3. 折线图可动态更新，适用于实时数据；4. 饼图展示分类占比，颜色可自定义。掌握 data、options 和 dataset 结构即可快速实现可视化。
Chart.js 是一个简单灵活的 JavaScript 图表库，基于 HTML5 的 Canvas 技术实现，适合在网页中快速构建各种类型的图表。它支持折线图、柱状图、饼图、雷达图、散点图等，配置项清晰，使用方便，非常适合前端开发者进行数据可视化展示。
1. 引入 Chart.js
使用 Chart.js 之前，需要先将其引入项目。可以通过 CDN 或 npm 安装方式引入。
如果使用模块化开发，可通过 npm 安装：
npm install chart.js2. 创建一个基础柱状图
以下是一个简单的柱状图示例，展示某公司四个季度的销售额。
首先，在 HTML 中添加一个 canvas 元素：
然后在 JavaScript 中初始化图表：
const ctx = document.getElementById('salesChart').getContext('2d');const salesChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: '销售额（万元）',
data: [30, 45, 60, 75],
backgroundColor: 'rgba(54, 162, 235, 0.6)'
}]
},
options: {
responsive: true,
scales: {
y: { beginAtZero: true }
}
}
});
这段代码创建了一个柱状图，横轴显示季度，纵轴显示销售额，每根柱子代表一个季度的数值。
3. 制作动态更新的折线图
Chart.js 支持动态更新数据，适用于实时监控场景，比如实时温度或访问量变化。
定义一个折线图：
const lineCtx = document.getElementById('liveChart').getContext('2d');const liveChart = new Chart(lineCtx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: '实时数据',
borderColor: 'rgb(75, 192, 192)',tension: 0.1,
data: []
}]
}
});
通过定时函数模拟数据更新：
let time = 0;setInterval(() => {
const newValue = Math.random() * 100;
liveChart.data.labels.push(time++);
liveChart.data.datasets[0].data.push(newValue);
if (liveChart.data.labels.length > 10) {
liveChart.data.labels.shift();
liveChart.data.datasets[0].data.shift();
}
liveChart.update();
}, 1000);
每秒新增一个随机值，并保持最多显示 10 个数据点，形成动态滚动效果。
4. 使用饼图展示占比数据
饼图适合展示分类数据的占比关系。例如，展示网站流量来源分布。
const pieCtx = document.getElementById('trafficChart').getContext('2d');new Chart(pieCtx, {
type: 'pie',
data: {
labels: ['直接访问', '搜索引擎', '社交媒体', '广告投放'],
datasets: [{
data: [30, 40, 20, 10],
backgroundColor: [
'#ff6384', '#36a2eb', '#cc65fe', '#ffce56'
]
}]
}
});
每个扇形区域用不同颜色表示，直观反映各渠道流量比例。
基本上就这些。Chart.js 上手快，文档完整，配合实际业务数据能快速生成美观图表。关键是理解 data、options 和 dataset 的结构，再根据需求调整样式和交互。不复杂但容易忽略细节，比如坐标轴设置或响应式布局，多试几次就能掌握。
