如何将按国家统计的用户数据适配Chart.js饼图数据集？

嗨，我看你这里的问题出在对Chart.js饼图数据集结构的理解上！当前你在循环里每次给this.chart.datasets推送一个单独的{data: r.userCount}对象，这会导致数据集变成多个仅含单个数值的对象，而Chart.js的饼图要求单个数据集里的data是包含所有数值的数组。

正确的实现步骤： #

• 先初始化好图表的基础结构，让datasets数组里预先存在一个对象，它的data属性是一个空数组（后续用来收集所有userCount）
• 遍历接口返回的数据时，把国家名称追加到labels，同时把对应的userCount追加到数据集的data数组中
• 最后再创建Chart实例

修改后的完整代码： #

ngOnInit() {
    // 先初始化chart的基础结构，确保datasets有一个带空data数组的对象
    this.chart = {
        labels: [],
        datasets: [{
            data: [],
            // 你还可以在这里添加颜色、边框等其他配置，比如：
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
            hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
        }]
    };

    this.countryService.countriesWithUsers().subscribe(response => {
        response.forEach(r => {
            this.chart.labels.push(r.name);
            // 把userCount追加到第一个数据集的data数组里
            this.chart.datasets[0].data.push(r.userCount);
        });

        console.log(response);
        new Chart("canvas", {
            type: "pie",
            data: this.chart
        });
    });
}

关键说明： #

• Chart.js的饼图（以及大多数图表）的datasets是一个数组，每个元素代表一组数据系列。对于饼图来说，通常只需要一个数据系列，所以我们只操作datasets[0]即可
• 把所有userCount收集到同一个data数组中，这样Chart.js才能正确渲染出完整的饼图

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