ChartJs Doughnut环形图使用parsing解析自定义数据集无展示问题咨询

Doughnut 环形图支持 parsing 配置，你遇到空白问题是因为配置的参数类型不匹配环形图的数据解析规则。

• 柱状图（bar）属于笛卡尔坐标系图表，依赖x、y两个坐标轴完成数据映射，因此 parsing 配置中可以通过xAxisKey、yAxisKey指定自定义对象的对应字段，你之前的bar图配置符合规则，因此可以正常渲染。
• 环形图（doughnut）、饼图（pie）属于非笛卡尔坐标系的图表，不需要坐标轴做数据映射，每个数据点仅需要读取一个数值字段，因此parsing配置中不能使用yAxisKey参数，需要使用key参数指定要读取的数值字段名。

修正后的代码如下：

var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        // 若要将自定义对象中的n字段作为分类标签，可在此处提取
        labels: [{vX:12, n:'vx'}, {vX:13, n:'vx2'}].map(item => item.n),
        datasets: [{
            label: '# of Votes',
            data: [{vX:12, n:'vx'}, {vX:13, n:'vx2'}],
            parsing:{
                key:'vX'
            },
            borderWidth: 1
        }]
    },
    options: {
        
    }
});

如果不需要保留原始自定义对象结构，也可以提前把数据处理成数值数组传入，同样可以正常渲染。使用parsing的方式更适合需要保留原始数据做后续交互（比如点击事件读取完整对象属性）的场景。

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