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
• 控制大小：通过 容器设置宽高或 CSS
• 自适应重绘：

window.addEventListener('resize', () => {
  myChart.resize();
});

---

七、与框架集成

• Vue：使用 vue-chartjs
• React：使用 react-chartjs-2
• Angular：使用官方 ng2-charts

---

八、常见问题

Q1: 图表不显示？

• 确保 元素正确存在并指定宽高
• 确保在 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面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。