Chart.js 安装使用教程
一、Chart.js 简介
Chart.js 是一个简单而灵活的 JavaScript 图表库，支持 8 种常用图表类型（折线图、柱状图、饼图等），基于 HTML5 Canvas 渲染。它轻量易用，适合快速构建响应式图表，广泛应用于仪表盘、可视化后台、统计图展示等场景。
二、Chart.js 安装方式
2.1 使用 CDN 引入（推荐快速使用）
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
2.2 使用 npm 安装（适合前端工程项目）
npm install chart.js --save
在模块中使用：
import Chart from 'chart.js/auto';
三、基本使用示例
3.1 HTML + JavaScript 示例
<canvas id="myChart" width="400" height="200"></canvas>
<script>const ctx = document.getElementById('myChart').getContext('2d');const myChart = new Chart(ctx, {type: 'bar',data: {labels: ['红色', '蓝色', '黄色', '绿色', '紫色', '橙色'],datasets: [{label: '颜色销量',data: [12, 19, 3, 5, 2, 3],backgroundColor: ['rgba(255, 99, 132, 0.6)','rgba(54, 162, 235, 0.6)','rgba(255, 206, 86, 0.6)','rgba(75, 192, 192, 0.6)','rgba(153, 102, 255, 0.6)','rgba(255, 159, 64, 0.6)']}]},options: {responsive: true,scales: {y: {beginAtZero: true}}}});
</script>
四、支持的图表类型
| 图表类型 | type 值 |
|---|---|
| 折线图 | line |
| 柱状图 | bar |
| 饼图 | pie |
| 环形图 | doughnut |
| 雷达图 | radar |
| 极地图 | polarArea |
| 散点图 | scatter |
| 气泡图 | bubble |
五、自定义配置项
Chart.js 提供多种可配置项，包括标题、图例、工具提示、布局、动画等。例如：
options: {plugins: {title: {display: true,text: '图表标题'},tooltip: {enabled: true}},animation: {duration: 1000}
}
六、响应式和样式控制
- 默认响应式：
responsive: true - 控制大小：通过
<canvas>容器设置宽高或 CSS - 自适应重绘：
window.addEventListener('resize', () => {myChart.resize();
});
七、与框架集成
- Vue：使用
vue-chartjs - React：使用
react-chartjs-2 - Angular：使用官方
ng2-charts
八、常见问题
Q1: 图表不显示？
- 确保
<canvas>元素正确存在并指定宽高 - 确保在 DOM 加载后再执行
new Chart()
Q2: 图表更新不生效？
使用更新方法：
myChart.data.datasets[0].data = [5, 10, 15, 20];
myChart.update();
九、学习资源推荐
- Chart.js 官网
- Chart.js 中文文档
- 菜鸟教程 Chart.js 教程
- Chart.js 示例库
本文由“小奇Java面试”原创发布，转载请注明出处。
可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。
