Chart.js 环形图（超详细）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在数据可视化领域，环形图（Doughnut Chart）以其直观、简洁的特点，成为展示比例关系的热门选择。Chart.js 环形图作为开源库 Chart.js 的核心组件之一，凭借轻量级、易集成和高度自定义的优势，成为开发者构建数据可视化界面的首选工具。无论是展示用户分布、销售占比，还是资源分配比例，环形图都能以清晰的视觉语言传递关键信息。

本篇文章将从零开始，系统讲解如何使用 Chart.js 创建和优化环形图。内容涵盖基础配置、样式调整、动态数据绑定等实用技巧，并通过真实案例演示如何将理论转化为实际应用。无论你是编程新手，还是希望提升可视化技能的开发者，都能在此找到适合自己的学习路径。

一、Chart.js 环形图的核心概念与特点

1.1 环形图的视觉逻辑与适用场景

环形图可以看作是饼图的“升级版”——它通过在饼图中心添加空白区域，使图表更具现代感，同时避免了饼图因中心点过密导致的可读性问题。其核心功能是展示不同数据项在整体中的占比关系。

适用场景举例：

• 用户注册来源的渠道分布（如社交媒体、搜索引擎、广告等）
• 月度销售额中各产品类别的贡献比例
• 网站流量的设备类型占比（手机、平板、PC）

1.2 Chart.js 的核心优势

Chart.js 是一款基于 HTML5 Canvas 的开源库，其优势体现在以下方面：

• 轻量级：压缩后仅约 30KB，适合移动端和桌面端使用。
• 易上手：通过简单的配置即可生成美观图表，无需复杂的依赖库。
• 跨平台兼容：支持主流浏览器（Chrome、Firefox、Safari 等）及 React、Vue 等前端框架。
• 高度可定制：提供丰富的 API 接口，支持动态数据更新和交互功能。

二、快速入门：创建第一个环形图

2.1 环境准备与基础代码结构

要使用 Chart.js 环形图，需完成以下步骤：

1. 引入库文件：通过 CDN 或 npm 安装 Chart.js。
2. 创建 Canvas 容器：在 HTML 中定义一个 <canvas> 元素作为图表的渲染区域。

<!-- HTML 结构 -->
<canvas id="myDoughnutChart" width="400" height="400"></canvas>

// JavaScript 配置
const ctx = document.getElementById('myDoughnutChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'doughnut', // 设置图表类型为环形图
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: '示例数据',
      data: [30, 50, 20],
      backgroundColor: ['#FF6B6B', '#4ECDC4', '#45B7D1']
    }]
  }
});

关键点解释：

• type: 'doughnut'：指定图表类型为环形图。
• data 对象包含标签（labels）和数据集（datasets）。
• backgroundColor 定义每个扇形块的颜色。

2.2 初级案例：展示学生学科成绩占比

假设某班级学生选修了三门课程，我们想用环形图展示各课程的选修比例：

// 数据示例
const courseData = {
  labels: ['数学', '语文', '英语'],
  datasets: [{
    label: '选修人数占比',
    data: [45, 30, 25],
    backgroundColor: ['#FFA726', '#9C27B0', '#009688']
  }]
};

// 初始化图表
new Chart(document.getElementById('courseChart'), {
  type: 'doughnut',
  data: courseData,
  options: {
    responsive: true, // 自适应容器尺寸
    maintainAspectRatio: false // 禁用固定宽高比
  }
});

三、深入配置：优化图表外观与交互

3.1 核心配置项详解

通过 options 对象，可以进一步调整图表的细节：

3.2 示例：添加标题与图例控制

options: {
  plugins: {
    title: {
      display: true,
      text: '学科选修比例分析',
      font: { size: 20, weight: 'bold' },
      color: '#333'
    },
    legend: {
      position: 'bottom', // 图例位置：top/bottom/left/right
      labels: {
        fontColor: '#555',
        usePointStyle: true // 使用点状图例图标
      }
    }
  },
  elements: {
    arc: {
      borderColor: 'white', // 扇形块边框颜色
      borderWidth: 3        // 边框宽度
    }
  }
}

3.3 动态数据更新与交互事件

Chart.js 支持在运行时更新图表数据，并绑定用户交互事件（如点击、悬停）。

// 动态更新数据
document.getElementById('updateData').addEventListener('click', () => {
  myChart.data.datasets[0].data = [20, 60, 20];
  myChart.update(); // 触发图表重绘
});

// 点击事件监听
myChart.canvas.addEventListener('click', (event) => {
  const points = myChart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, false);
  if (points.length) {
    alert(`您点击了 ${points[0].label}，占比 ${points[0].raw}%`);
  }
});

四、高级技巧：打造专业级可视化效果

4.1 渐变色与复杂样式

通过 CSS 渐变色或图像填充，可以为环形图赋予更丰富的视觉层次：

// 渐变色配置示例
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(255, 102, 102, 0.8)');
gradient.addColorStop(1, 'rgba(255, 204, 102, 0.8)');

// 应用到数据集
datasets: [{
  backgroundColor: [gradient, '#4ECDC4', '#45B7D1']
}]

4.2 嵌套环形图与混合图表

通过叠加多个环形图层，可实现类似“甜甜圈”或“多层饼图”的效果：

datasets: [{
  label: '内环',
  data: [30, 40, 30],
  backgroundColor: ['#FF6B6B', '#4ECDC4', '#45B7D1'],
  cutout: '60%' // 内环空心比例
}, {
  label: '外环',
  data: [25, 50, 25],
  backgroundColor: ['#FFA726', '#9C27B0', '#009688'],
  cutout: '80%' // 外环空心比例
}]

4.3 响应式布局与移动端适配

通过 CSS 媒体查询和动态调整 options 参数，确保图表在不同设备上保持最佳显示效果：

/* CSS 响应式设置 */
@media (max-width: 768px) {
  #myDoughnutChart {
    width: 100% !important;
    height: auto !important;
  }
}

// JavaScript 动态调整
window.addEventListener('resize', () => {
  myChart.resize();
});

五、实战案例：销售数据可视化分析

5.1 需求背景

某电商公司希望用环形图展示各季度销售额的占比，并添加动态数据加载功能。

5.2 完整代码实现

<!-- HTML 结构 -->
<div class="chart-container">
  <canvas id="salesChart"></canvas>
  <button id="refreshData">刷新数据</button>
</div>

// 数据模拟函数
function getRandomData() {
  return [Math.random() * 100, Math.random() * 100, Math.random() * 100];
}

// 初始化图表
const salesChart = new Chart(document.getElementById('salesChart'), {
  type: 'doughnut',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{
      label: '季度销售额占比',
      data: getRandomData(),
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
    }]
  },
  options: {
    plugins: {
      tooltip: {
        enabled: true,
        mode: 'index',
        intersect: false
      }
    }
  }
});

// 绑定刷新按钮事件
document.getElementById('refreshData').addEventListener('click', () => {
  salesChart.data.datasets[0].data = getRandomData();
  salesChart.update();
});

5.3 效果说明

• 用户点击“刷新数据”按钮时，图表会随机生成新的销售额数据并实时更新。
• 工具提示（Tooltip）展示当前扇形块的标签和具体数值。
• 通过调整 cutout 属性，可进一步缩小中心空白区域以适应更多数据项。

六、常见问题与解决方案

6.1 问题 1：图表不显示或报错

可能原因：

• Canvas 元素未正确绑定到 JavaScript。
• 数据格式错误（如 data 不是数值数组）。

解决方案：

// 检查 Canvas 是否存在
if (!document.getElementById('myChart')) {
  console.error('Canvas 元素未找到！');
}
// 确保 data 是数值数组
console.log(typeof myData.datasets[0].data[0]); // 应输出 'number'

6.2 问题 2：图例与图表位置冲突

解决方案：
通过调整 plugins.legend.position 或容器的 CSS 样式，避免布局重叠：

.chart-container {
  position: relative;
}
#salesChart {
  margin-bottom: 40px; /* 为图例预留空间 */
}

结论

通过本文的讲解，读者已掌握从基础到进阶的 Chart.js 环形图 实现方法，并通过实战案例验证了其在数据可视化中的应用价值。无论是快速搭建原型，还是打造复杂交互式图表，Chart.js 都能提供灵活且高效的解决方案。

下一步行动建议：

1. 尝试将环形图与其他图表类型（如折线图、柱状图）结合，构建多维度分析界面。
2. 探索 Chart.js 的插件生态（如 chartjs-plugin-datalabels），进一步增强数据标注功能。
3. 参考官方文档和社区案例，持续优化代码性能与用户体验。

数据可视化不仅是技术实现，更是信息传递的艺术。掌握 Chart.js 环形图的精髓，你将能更自信地用数据讲述故事，驱动业务决策！