ChartJS: datalabels:以饼块为单位显示百分比值

基础概念

Chart.js 是一个基于 HTML5 Canvas 的 JavaScript 图表库，用于创建各种类型的图表，如折线图、柱状图、饼图等。datalabels 是一个 Chart.js 的插件，它允许你在图表的各个数据点上显示额外的信息，例如百分比、数值等。

优势

灵活性：datalabels 插件提供了丰富的配置选项，可以根据需要自定义标签的样式、位置和内容。
易用性：集成简单，只需在初始化图表时引入并配置插件即可。
兼容性：与 Chart.js 完美集成，支持所有 Chart.js 支持的图表类型。

类型

datalabels 插件支持多种类型的标签显示，包括但不限于：

数值
百分比
图例
自定义格式

应用场景

在饼图中显示每个饼块的百分比值是一个常见的应用场景。例如，在数据可视化项目中，需要展示不同类别的占比情况。

示例代码

以下是一个使用 Chart.js 和 datalabels 插件显示饼块百分比值的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chart.js with DataLabels</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['Red', 'Blue', 'Yellow'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                plugins: {
                    datalabels: {
                        formatter: (value, ctx) => {
                            let sum = 0;
                            let dataArr = ctx.chart.data.datasets[0].data;
                            dataArr.map(data => {
                                sum += data;
                            });
                            let percentage = (value * 100 / sum).toFixed(2) + "%";
                            return percentage;
                        },
                        color: '#000',
                        font: {
                            weight: 'bold',
                            size: 16,
                        },
                        anchor: 'end',
                        align: 'top',
                    },
                },
                title: {
                    display: true,
                    text: 'Pie Chart with DataLabels'
                }
            }
        });
    </script>
</body>
</html>

参考链接

常见问题及解决方法

问题：百分比值显示不正确

原因：可能是由于数据计算错误或格式化函数不正确导致的。

解决方法：

确保数据总和正确计算。
检查 formatter 函数是否正确实现百分比计算。

formatter: (value, ctx) => {
    let sum = ctx.dataset.data.reduce((a, b) => a + b, 0);
    let percentage = (value * 100 / sum).toFixed(2) + "%";
    return percentage;
}

通过以上步骤，你应该能够正确地在饼图中显示每个饼块的百分比值。