Chart.js多系列饼图无法显示，请求技术排查

核心问题分析 #

• 未定义的Utils对象：代码中使用了Utils.months，但Chart.js 4.x版本已移除内置的Utils工具类，这会直接触发JS报错，中断饼图初始化流程。
• 饼图原生不支持多系列叠加：Chart.js的饼图（pie）默认仅支持单数据集，多数据集会直接重叠显示，无法实现预期的多系列分组效果。
• 依赖缺失风险：代码使用了jQuery的$(document).ready，若未引入jQuery库，初始化代码将无法执行。

修复步骤 #

1. 清理无效代码 #

删除代码中未使用且会引发报错的Utils相关行：

// 移除以下无效代码
const DATA_COUNT = 5;
const NUMBER_CFG = { count: DATA_COUNT, min: 0, max: 100 };
const labels = Utils.months({ count: 7 });

2. 适配多系列饼图实现 #

由于Chart.js饼图不支持多数据集，通过合并数据集+自定义分组控制来实现多系列效果，修改后的完整JS代码：

$(document).ready(function () {
    var ctx = $("#multiChart").getContext('2d');
    
    // 定义分组数据结构
    const groupData = [
        { name: 'Overall', colors: ['#AAA', '#777'], values: [21, 79], labels: ['Yay', 'Nay'] },
        { name: 'Group A', colors: ['hsl(0, 100%, 60%)', 'hsl(0, 100%, 35%)'], values: [33, 67], labels: ['Yay', 'Nay'] },
        { name: 'Group B', colors: ['hsl(100, 100%, 60%)', 'hsl(100, 100%, 35%)'], values: [20, 80], labels: ['Yay', 'Nay'] },
        { name: 'Group C', colors: ['hsl(180, 100%, 60%)', 'hsl(180, 100%, 35%)'], values: [10, 90], labels: ['Yay', 'Nay'] }
    ];

    // 合并为单数据集，同时标记数据所属分组
    const data = {
        labels: groupData.flatMap(g => [`${g.name} ${g.labels[0]}`, `${g.name} ${g.labels[1]}`]),
        datasets: [{
            backgroundColor: groupData.flatMap(g => g.colors),
            data: groupData.flatMap(g => g.values),
            meta: groupData.map(g => [g.name, g.name]).flat()
        }]
    };

    var myChart = new Chart(ctx, {
        type: 'pie',
        data: data,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    labels: {
                        generateLabels: function (chart) {
                            // 生成分组式图例，每个分组仅显示一个控制条目
                            const uniqueGroups = [...new Set(data.datasets[0].meta)];
                            return uniqueGroups.map((group) => {
                                const groupInfo = groupData.find(g => g.name === group);
                                return {
                                    text: group,
                                    fillStyle: groupInfo.colors[0],
                                    group: group,
                                    hidden: chart.data.datasets[0].meta.some((g, i) => g === group && chart.getDatasetMeta(0).data[i].hidden)
                                };
                            });
                        }
                    },
                    onClick: function (mouseEvent, legendItem, legend) {
                        // 点击图例时切换整个分组的显示/隐藏
                        const groupIndexes = legend.chart.data.datasets[0].meta.map((g, i) => g === legendItem.group ? i : -1).filter(i => i !== -1);
                        groupIndexes.forEach(idx => {
                            const dataItem = legend.chart.getDatasetMeta(0).data[idx];
                            dataItem.hidden = !dataItem.hidden;
                        });
                        legend.chart.update();
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function (context) {
                            return `${context.label}: ${context.formattedValue}`;
                        }
                    }
                }
            }
        }
    });
});

3. 确保依赖正确加载 #

• 确认页面已引入jQuery库（需放在Chart.js之前）：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.min.js"></script>
<div>
    <canvas id="multiChart" width="400" height="600"></canvas>
</div>

• 若使用ASP.NET MVC/Razor页面，确保@section Scripts中的代码在页面底部加载，避免DOM未就绪时执行初始化逻辑。

4. 调试验证 #

打开浏览器开发者工具（F12）的控制台，检查是否存在JS报错，根据报错信息进一步定位问题。

内容的提问来源于stack exchange，提问作者cr7oo