在前端开发中，使用Chart.js可以快速实现各类数据可视化需求，它基于HTML5的Canvas元素绘制图表，兼容性良好且配置灵活，适合大多数常规数据展示场景。
环境准备
使用Chart.js前需要先完成库的引入，有两种常用的引入方式。
方式一：通过CDN引入
直接在HTML文件的<head>或<body>标签中添加Script标签引入Chart.js的CDN资源，这种方式适合快速测试或小型项目。
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
方式二：通过npm安装
如果是基于构建工具的前端项目，可以通过npm安装Chart.js依赖，然后在JavaScript文件中按需引入。
npm install chart.js
// 在JS文件中引入 import Chart from 'chart.js/auto';
基础使用步骤
使用Chart.js绘制图表的核心流程分为三步：准备Canvas容器、配置图表参数、实例化Chart对象。
1. 准备Canvas容器
在HTML中添加一个<canvas>标签作为图表的绘制容器，需要给容器设置明确的id，方便后续获取DOM元素。
<canvas id="myChart" width="400" height="200"></canvas>
2. 配置图表参数
Chart.js的图表配置主要包含type（图表类型）、data（数据配置）、options（可选的配置项）三个核心部分。
type：指定图表类型，可选值有bar（柱状图）、line（折线图）、pie（饼图）、doughnut（环形图）等data：配置图表的数据内容，包含标签数组labels和数据集数组datasetsoptions：可选配置，用于调整图表的标题、坐标轴、提示框等样式和行为
3. 实例化Chart对象
获取Canvas的上下文对象后，传入配置参数即可完成图表实例化。
完整示例：绘制柱状图
下面是一个完整的柱状图绘制示例，展示了近6个月的销售额数据，包含基础的样式配置。
// 获取Canvas上下文
const ctx = document.getElementById('myChart').getContext('2d');
// 图表配置
const config = {
type: 'bar', // 柱状图类型
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月'], // X轴标签
datasets: [{
label: '月度销售额（万元）', // 数据集标签
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: {
y: {
beginAtZero: true // Y轴从0开始
}
},
plugins: {
title: {
display: true,
text: '上半年销售额统计' // 图表标题
}
}
}
};
// 实例化Chart对象
new Chart(ctx, config);常用配置调整
实际使用中可以根据需求调整更多配置项，以下是几个常用的配置场景。
调整图表响应式
Chart.js默认支持响应式，当容器尺寸变化时图表会自动适配，也可以通过options.responsive和options.maintainAspectRatio控制响应式行为。
options: {
responsive: true, // 开启响应式
maintainAspectRatio: false // 不保持固定宽高比，随容器尺寸变化
}添加交互提示
默认情况下鼠标悬停在图表元素上会显示提示框，也可以通过配置调整提示框的样式和内容。
options: {
plugins: {
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)', // 提示框背景色
titleColor: '#fff', // 提示框标题颜色
bodyColor: '#fff' // 提示框内容颜色
}
}
}注意事项
- 确保Canvas容器在Chart实例化前已经完成DOM渲染，避免获取不到上下文对象
- 如果同一个Canvas容器需要绘制多个图表，需要先销毁之前的Chart实例，再创建新的实例
- 数据更新时不需要重新实例化Chart对象，可以直接修改
chart.data属性后调用chart.update()方法更新图表
如果需要更复杂的图表功能，可以参考Chart.js的官方文档获取更多配置项和API说明。
JavaScriptChart.js数据可视化前端图表修改时间：2026-06-06 07:44:23