异常教程

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+ 小伙伴加入学习 ，欢迎点击围观

前言

在数据可视化领域，饼图（Pie Chart）凭借其直观的“分蛋糕”式呈现方式，成为表达比例关系的常用工具。而 Chart.js 饼图凭借轻量级、易集成、跨浏览器兼容等特性，成为开发者构建交互式图表的首选方案之一。无论是展示用户行为分布、销售占比，还是资源分配比例，Chart.js 饼图都能通过简洁的代码实现优雅的可视化效果。本文将从零开始，逐步解析如何使用 Chart.js 创建和优化饼图，并通过案例演示帮助读者快速掌握核心技能。

环境准备与初始化

安装与引入库文件

使用 Chart.js 饼图前，需先通过 npm 或直接引入 CDN 链接。对于编程新手，推荐直接使用 CDN 方式快速上手：

<!-- 引入 Chart.js 核心库 -->  
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

创建画布容器

HTML 中需定义一个 <canvas> 元素作为图表的渲染容器。例如：

<canvas id="myPieChart" width="400" height="400"></canvas>

这里，id 是关键，后续 JavaScript 代码将通过它获取画布对象。

基础用法：从零构建第一个饼图

配置数据与选项

饼图的核心是数据和配置选项。以下是一个最简示例，展示如何用 Chart.js 饼图呈现不同水果的销售占比：

// 获取 canvas 元素  
const ctx = document.getElementById('myPieChart').getContext('2d');  

// 创建饼图实例  
new Chart(ctx, {  
  type: 'pie', // 指定图表类型为饼图  
  data: {  
    labels: ['苹果', '香蕉', '橙子', '葡萄'],  
    datasets: [{  
      label: '水果销量占比',  
      data: [30, 45, 20, 5],  
      backgroundColor: [  
        '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'  
      ]  
    }]  
  }  
});

关键点解析

  1. type: 'pie'：明确图表类型，也可用 'doughnut' 创建环形图。
  2. data 对象：包含标签（labels）和数据集（datasets）。每个数据集需提供数值（data）和颜色（backgroundColor）。
  3. 颜色设置：通过十六进制代码定义扇区颜色，可自定义或使用随机生成工具（如 Coolors ）。

运行效果

上述代码会生成一个包含四片扇区的饼图，扇区面积与数值成正比。例如，“香蕉”占比 45%，因此面积最大。

高级功能：交互与动态更新

添加交互与动画

默认情况下，Chart.js 饼图支持悬停高亮和点击事件。通过配置 options 对象可增强交互体验：

options: {  
  responsive: true, // 自动适应容器尺寸  
  maintainAspectRatio: false, // 禁用固定宽高比  
  animation: {  
    duration: 2000 // 动画持续时间（毫秒）  
  },  
  plugins: {  
    legend: {  
      position: 'right' // 图例位置  
    },  
    tooltip: {  
      enabled: true // 启用工具提示  
    }  
  }  
}

动态更新数据

若需实时更新数据（如实时监控场景），可通过 update() 方法重新渲染图表：

// 假设数据源发生变化  
const newData = [25, 50, 18, 7];  
chart.data.datasets[0].data = newData;  
chart.update();

优化技巧：性能与可访问性

减少冗余数据

当数据量较大时，可通过以下方式优化：

  • 数据聚合：将占比低于 5% 的小项合并为“其他”类别。
  • 延迟加载：使用 defer 或 async 属性异步加载 Chart.js 库。

提升可访问性

为满足无障碍浏览需求，需添加 aria-label 和 role 属性：

<canvas  
  id="myPieChart"  
  role="img"  
  aria-label="水果销量分布饼图"  
  aria-describedby="chart-desc"  
></canvas>

实战案例：多数据集与自定义样式

案例 1：销售数据对比

假设需对比某电商平台 2023 年 Q1 的商品类目销量：

const ctx = document.getElementById('salesChart').getContext('2d');  
new Chart(ctx, {  
  type: 'pie',  
  data: {  
    labels: ['电子产品', '服饰', '家居', '食品'],  
    datasets: [{  
      label: '销售额占比',  
      data: [45, 25, 18, 12],  
      backgroundColor: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4'],  
      borderColor: 'white', // 添加边框颜色  
      borderWidth: 2 // 边框宽度  
    }]  
  },  
  options: {  
    plugins: {  
      legend: {  
        display: false // 隐藏图例，直接通过标签文本标注  
      }  
    },  
    layout: {  
      padding: 20 // 增加外边距  
    }  
  }  
});

效果说明

此案例通过调整边框颜色和宽度，增强扇区区分度，同时隐藏图例以简化界面。

案例 2：响应式布局

为适配移动端，可在 options 中设置：

responsive: true,  
plugins: {  
  title: {  
    display: true,  
    text: '用户设备分布'  
  }  
}

常见问题与解决方案

问题 1：图表未渲染

可能原因：canvas 元素未正确绑定或数据格式错误。
解决方法：

  1. 检查 HTML 中 canvas 的 id 是否与 JavaScript 中一致。
  2. 确保 data 数组长度与 labels 数组长度相同。

问题 2：颜色与数值不匹配

可能原因：backgroundColor 数组长度不足或顺序错误。
解决方法：

  • 使用与数据项数量相同的颜色数组。
  • 或通过函数动态生成颜色：
backgroundColor: (context) => {  
  const hash = context.dataIndex;  
  return `hsl(${hash * 36}, 70%, 50%)`;  
}

结论

Chart.js 饼图凭借其简洁的 API 和强大的功能，已成为开发者构建数据可视化方案的得力工具。从基础配置到高级交互，本文通过分步讲解和实战案例，帮助读者逐步掌握饼图的核心技能。无论是电商销售分析、用户行为统计，还是资源分配展示，合理运用 Chart.js 饼图都能让数据“说话”，为决策提供直观支持。

未来，随着数据可视化需求的多样化，建议读者进一步探索 Chart.js 的扩展插件（如 chartjs-plugin-datalabels），或结合前端框架（如 React、Vue）实现更复杂的交互场景。记住，优秀的图表不仅是技术实现，更是信息传达的艺术——选择合适的配色、布局和交互方式，才能真正让数据价值最大化。

最新发布

查看更多文章