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面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。