Chart.js 环形图（保姆级教程）

什么是 Chart.js 环形图？

在数据可视化的世界里，图表就像是一本无声的说明书。当我们要展示比例关系时，环形图（Doughnut Chart）就是最直观的选择。它不仅美观，而且能让人一眼看出各个部分占整体的比重。

想象一下，你有一块蛋糕，把它切成若干块，每一块代表一个类别。环形图就是把这块蛋糕画成一个圆环，中间留空，这样你就能清楚地看到每一部分有多大。这种图形特别适合展示分类数据的占比情况，比如用户的年龄段分布、产品销售占比、预算分配等。

Chart.js 环形图正是实现这种视觉效果的利器。它基于 HTML5 的 Canvas 技术，轻量、灵活，支持响应式设计，是前端开发中非常受欢迎的图表库之一。无论是网页应用还是数据仪表盘，只要涉及比例分析，它都能轻松胜任。

我们今天就来深入学习如何使用 Chart.js 创建一个真正可用的环形图，从零开始，一步步搭建属于你的数据可视化组件。

安装与引入 Chart.js

在开始画图之前，我们需要先把工具准备好。Chart.js 不需要复杂的构建流程，可以直接通过 CDN 引入，非常适合初学者快速上手。

打开你的 HTML 文件，在 <head> 标签内加入以下代码：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

这行代码的作用是告诉浏览器去一个全球加速的 CDN 服务器下载 Chart.js 的最新版本。jsdelivr.net 是一个非常稳定的资源托管平台，确保加载速度快、兼容性好。

💡 小贴士：如果你在本地开发，也可以使用 npm 安装。运行 npm install chart.js 即可，之后通过 import { Chart } from 'chart.js' 导入。但对初学者来说，CDN 更简单直接。

引入成功后，你就可以在页面中创建一个用于渲染图表的 <canvas> 元素。这个 <canvas> 就像是画布，Chart.js 会在这个画布上绘制图形。

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

这里我们给画布设置了 ID 为 myDoughnutChart，后面 JavaScript 就会通过这个 ID 找到它。width 和 height 定义了画布的尺寸，你可以根据需要调整。

创建数组与初始化

在画图之前，我们需要准备数据。环形图的核心是“比例”，而比例来源于数据。我们通常用两个数组来组织数据：一个是标签（labels），另一个是数值（data）。

假设我们要展示一个团队成员的技能分布情况：

前端开发：30%
后端开发：40%
产品经理：20%
设计师：10%

这些数据可以转化为 JavaScript 数组：

// 定义每个类别的名称（标签）
const labels = ['前端开发', '后端开发', '产品经理', '设计师'];

// 定义对应的数值（占比，可以是百分比或具体数量）
const data = [30, 40, 20, 10];

这里要注意，虽然我们写的是 30、40 这样的数字，但 Chart.js 会自动将它们转换为占总和的比例。比如 30 + 40 + 20 + 10 = 100，所以每个值就是它占总值的百分比。

接下来，我们要初始化 Chart.js 实例。这一步就像是告诉画笔：“准备好，我要开始画画了”。

// 获取画布元素
const ctx = document.getElementById('myDoughnutChart').getContext('2d');

// 创建 Chart.js 实例
const myChart = new Chart(ctx, {
    type: 'doughnut',           // 指定图表类型为环形图
    data: {
        labels: labels,         // 标签数组
        datasets: [{
            label: '技能分布',  // 图表数据集的名称（用于图例）
            data: data,         // 对应的数值
            backgroundColor: [    // 每个扇区的颜色
                '#FF6384',
                '#36A2EB',
                '#FFCE56',
                '#4BC0C0'
            ],
            borderColor: '#fff', // 扇区边框颜色
            borderWidth: 2       // 边框宽度
        }]
    },
    options: {
        responsive: true,        // 图表响应式，适配不同屏幕
        maintainAspectRatio: false, // 不保持宽高比，便于自定义尺寸
        plugins: {
            legend: {
                position: 'top',     // 图例位置：顶部
                labels: {
                    padding: 20    // 图例文字与图标之间的间距
                }
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const label = context.label || '';
                        const value = context.parsed.y || 0;
                        return `${label}: ${value}%`; // 自定义提示框显示内容
                    }
                }
            }
        }
    }
});

📌 注释说明：

getContext('2d')：获取 Canvas 的 2D 绘图上下文，是所有绘图操作的基础。

type: 'doughnut'：明确指定为环形图类型。

backgroundColor：为每个扇区设置不同颜色，让图表更美观。

borderColor 和 borderWidth：控制扇区边框样式，让图形更有层次感。

responsive: true：让图表能自动适应浏览器窗口大小变化。

plugins.legend：配置图例，让读者知道每个颜色代表什么。

tooltip：鼠标悬停时显示提示信息，增强交互体验。

配置颜色与样式

颜色是视觉传达中非常关键的一环。一个配色合理的环形图，不仅好看，还能提升信息传达效率。Chart.js 提供了丰富的样式配置项，我们可以轻松定制。

使用渐变色

如果你想让扇区有更高级的视觉效果，可以使用渐变色。例如，从深色渐变到浅色：

// 创建渐变背景
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, '#FF6384');
gradient.addColorStop(1, '#FFB3C6');

// 使用渐变色
backgroundColor: [gradient, '#36A2EB', '#FFCE56', '#4BC0C0']

🎨 提示：渐变色适合用于强调某些数据点，比如突出占比最大的类别。

调整环形图大小

默认情况下，环形图的内径是画布宽度的 50%。你可以通过 cutout 选项调整这个值，让中间空心部分更大或更小。

options: {
    // ...
    cutout: '70%'  // 内径为 70%，环更“瘦”
}

✅ 比喻：想象一个甜甜圈，cutout 越大，中间的洞就越大，整体看起来越“空心”。

添加动画效果

为了让图表更生动，可以开启动画。Chart.js 默认有平滑的进入动画。

options: {
    animation: {
        animateRotate: true,   // 旋转动画
        animateScale: true     // 缩放动画
    }
}

你可以通过调整 duration 控制动画时间，比如 duration: 1500 表示动画持续 1.5 秒。

实际案例：销售业绩占比分析

让我们来一个真实场景：某公司 2024 年第一季度的销售业绩分布。数据如下：

产品线	销售额（万元）
智能手机	45
平板电脑	25
智能穿戴	15
家电	15

我们用环形图来展示这些数据。

const labels = ['智能手机', '平板电脑', '智能穿戴', '家电'];
const data = [45, 25, 15, 15];

const ctx = document.getElementById('salesChart').getContext('2d');

const salesChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: labels,
        datasets: [{
            label: '销售额占比',
            data: data,
            backgroundColor: [
                '#FF6384',
                '#36A2EB',
                '#FFCE56',
                '#4BC0C0'
            ],
            borderColor: '#fff',
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'right',
                labels: {
                    padding: 15
                }
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const label = context.label || '';
                        const value = context.parsed.y || 0;
                        return `${label}: ${value} 万元`;
                    }
                }
            }
        }
    }
});

这个图表能清晰地告诉我们：智能手机贡献了最多销售额，占比 45%。而平板、智能穿戴和家电各占 25%、15%、15%。通过颜色区分，读者一眼就能抓住重点。

常见问题与优化建议

在实际使用中，你可能会遇到一些小问题。下面是一些常见情况及解决方案：

问题 1：图例太拥挤，显示不全

解决方法：将图例位置改为 right 或 bottom，并适当缩小字体或减少图例项。

plugins: {
    legend: {
        position: 'right',
        labels: {
            font: {
                size: 12
            }
        }
    }
}

问题 2：图表在小屏幕上显示不全

解决方法：确保设置了 responsive: true，并设置合适的画布尺寸。建议使用 max-width: 100% 配合 CSS：

#myDoughnutChart {
    max-width: 500px;
    margin: 0 auto;
}

问题 3：数据为 0 时扇区不显示

解决方法：确保 data 数组中没有 null 或 undefined，可以使用 data.map(v => v || 0) 防御性处理。

总结

Chart.js 环形图是一个强大又易用的工具，尤其适合展示比例关系。通过简单的 HTML + JavaScript 配合，你就能快速创建出专业级的可视化图表。

从数据准备、画布设置，到样式配置、交互优化，每一步都清晰可控。它不仅适合初学者入门，也能满足中高级开发者在项目中的复杂需求。

当你把一堆枯燥的数据变成一张生动的环形图时，你会感受到数据的力量——它不再只是数字，而是故事，是洞察，是决策的依据。

希望这篇文章能帮你真正掌握 Chart.js 环形图的使用技巧。动手试试吧，也许你下一次的项目汇报，就从一个漂亮的环形图开始。