Chart.js 环形图

Chart.js 环形图（Doughnut Chart）教程

环形图（Doughnut Chart）是饼图（Pie Chart）的变种，它在中心有一个空心部分，可以用来展示每个部分的占比。Chart.js 提供了简单的方法来创建环形图。

1. 引入 Chart.js

确保你已经引入了 Chart.js 庂库。如果还没引入，可以使用以下方式：

1.1 通过 CDN 引入

在 HTML 文件中添加以下代码来引入 Chart.js：

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

1.2 使用 npm 安装（适用于现代前端框架）

如果你使用 npm 或 yarn，可以通过以下命令安装：

npm install chart.js

然后在 JavaScript 中导入：

import Chart from 'chart.js/auto';

2. 创建基本环形图

2.1 添加 `<canvas>` 元素

在 HTML 文件中添加一个 <canvas> 元素，这个元素将承载环形图：

<canvas id="doughnutChart"></canvas>

2.2 在 JavaScript 中绘制环形图

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

const doughnutChart = new Chart(ctx, {
    type: 'doughnut',  // 图表类型为环形图
    data: {
        labels: ['Red', 'Blue', 'Yellow'],  // 标签
        datasets: [{
            label: 'My Doughnut Chart',  // 数据集的标签
            data: [10, 20, 30],  // 数据
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],  // 每一块的背景色
            borderColor: ['#FF6384', '#36A2EB', '#FFCE56'],  // 边框颜色
            borderWidth: 1  // 边框宽度
        }]
    },
    options: {
        responsive: true,  // 响应式
        plugins: {
            legend: {
                position: 'top',  // 图例位置
            },
            tooltip: {
                enabled: true,  // 启用提示工具
            }
        }
    }
});

3. 自定义环形图

3.1 动态调整中心空心部分的半径

你可以通过 cutout 属性来调整环形图中心的空心部分的半径。值越大，空心部分越大，默认值为 0，表示不空心。

const customDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            label: 'Custom Doughnut',
            data: [10, 20, 30],
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
            borderColor: ['#FF6384', '#36A2EB', '#FFCE56'],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            },
            tooltip: {
                enabled: true,
            }
        },
        cutout: '60%'  // 中心空心部分半径设置为 60%
    }
});

3.2 环形图多个数据集

和其他类型的图表一样，环形图也可以支持多个数据集。每个数据集会生成一个独立的环形图部分。

const multiDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [
            {
                label: 'Dataset 1',
                data: [15, 25, 60],
                backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
                borderColor: ['#FF6384', '#36A2EB', '#FFCE56'],
                borderWidth: 1
            },
            {
                label: 'Dataset 2',
                data: [20, 10, 70],
                backgroundColor: ['#FF5733', '#1F77B4', '#FFB300'],
                borderColor: ['#FF5733', '#1F77B4', '#FFB300'],
                borderWidth: 1
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            },
            tooltip: {
                enabled: true,
            }
        },
        cutout: '70%'  // 中心空心部分半径设置为 70%
    }
});

3.3 配置环形图的提示和图例

通过 plugins 配置，你可以自定义环形图的提示和图例的样式。例如，可以设置图例的位置或启用/禁用提示框。

const configDoughnutChart = {
    type: 'doughnut',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            data: [30, 40, 50],
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
            borderColor: ['#FF6384', '#36A2EB', '#FFCE56'],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom',  // 图例位置
                labels: {
                    font: {
                        size: 14  // 图例字体大小
                    }
                }
            },
            tooltip: {
                callbacks: {
                    label: function(tooltipItem) {
                        return `Value: ${tooltipItem.raw}`;  // 自定义显示的提示文本
                    }
                }
            }
        },
        cutout: '50%'  // 设置空心部分的半径为 50%
    }
};

4. 更新和销毁图表

4.1 更新环形图数据

你可以动态更新环形图的数据。例如，如果你要修改 datasets 中的 data 数组，更新后调用 update() 方法：

doughnutChart.data.datasets[0].data = [40, 30, 20];
doughnutChart.update();

4.2 销毁环形图

如果你需要销毁图表并移除所有事件监听器，可以使用 destroy() 方法：

doughnutChart.destroy();

5. 总结

基本环形图：通过 type: 'doughnut' 创建环形图，设置 data 和 labels 数组。
自定义环形图：可以使用 cutout 属性来控制中心空心部分的大小，调整显示效果。
多个数据集：通过 datasets 数组支持多个数据集，生成多个环形图部分。
交互性：通过配置 tooltip 和 legend 来显示提示框和图例，可以控制其显示样式。
动态更新和销毁：通过 update() 方法来动态更新图表数据，destroy() 用于销毁图表。

环形图是一种直观的方式，适用于显示各部分占整体的比例。如果你有更多问题，或想了解更多图表定制技巧，随时告诉我！