ChartJS环形图问题：数据归为单标签且呈现嵌套圆环

问题1：数据归到同一主标签 & 问题2：嵌套圆环的原因 #

这两个问题根源一致：你给每个数据项都创建了单独的dataset。ChartJS中，环形图的单系列数据应该放在同一个dataset内，多个dataset才会生成嵌套圆环，且每个dataset对应图例中的一个主标签。你当前的写法会让每个数据变成独立的圆环层，同时图例标签混乱。

修正后的代码 #

<script>
    var ctx = document.getElementById("racionMix").getContext('2d');
    var racionChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: [],
            // 初始化时创建一个空的dataset，所有数据都放在这里
            datasets: [{
                label: 'Racion Mix', // 统一的主标签
                backgroundColor: [],
                data: []
            }]
        },
        options: {
            plugins: {
                title: {
                    display: true,
                    fontSize: 16,
                    text: 'Racion Mix'
                },
            }
        }
    });

    @for (int index = 0; index < @Model.Count; index++)
    {
        @:addData( "@Model[index].MixName", "@Model[index].TotalQty", getRandomColor())
    }

    function addData(label, value, color) {
        // 把标签添加到labels数组
        racionChart.data.labels.push(label);
        // 获取唯一的dataset，添加颜色和数据（注意转成数字类型）
        var dataset = racionChart.data.datasets[0];
        dataset.backgroundColor.push(color);
        dataset.data.push(Number(value));
        // 更新图表
        racionChart.update();
    }

    function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
</script>

关键修改说明 #

• 初始化图表时，datasets数组里只保留一个空的dataset，设置统一的主标签。
• addData函数不再新建dataset，而是把颜色和数据追加到这个唯一的dataset的对应数组中。
• 将value转成Number类型，避免ChartJS把字符串当成无效数据处理。

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