ChartJS更新图表数据设置自定义颜色触发TypeError问题

问题相关代码 #

function updateData() {
    removeData(bubbleChart);
    bubbleChart.data.labels.push("Test","test 2",);
    bubbleChart.data.datasets.forEach((dataset) => {
        dataset.data.push([45111.00,61.97,10],[1421413.00,236.55,10],);
    });
    bubbleChart.data.backgroundColor.push(randomColor())
    bubbleChart.update();
}

运行报错 #

TypeError: undefined is not an object (evaluating 'bubbleChart.backgroundColor.push')

问题根因 #

• 属性访问路径错误：backgroundColor是每个数据集（dataset）的自有属性，并不挂载在bubbleChart.data下，当前写法访问到的是undefined，对undefined调用push()方法自然抛出类型错误。
• 颜色数量和数据点不匹配：现有逻辑每个数据集推入了2个新数据点，但只尝试添加1个随机颜色，数量不对等时ChartJS会自动用默认蓝色补全缺失配置，最终导致图表全蓝。
• 逻辑绑定错误：颜色配置和数据点是一一对应关系，需要绑定到所属的dataset上，不能脱离数据集单独在data层级配置。

修复后代码 #

function updateData() {
    removeData(bubbleChart);
    bubbleChart.data.labels.push("Test", "test 2");
    bubbleChart.data.datasets.forEach((dataset) => {
        // 推入新的气泡数据点
        dataset.data.push([45111.00,61.97,10], [1421413.00,236.55,10]);
        // 为每个新数据点匹配对应随机颜色，推入当前数据集的背景色数组
        dataset.backgroundColor.push(randomColor(), randomColor());
        
        // 如果需要给整个数据集设置统一的随机颜色，替换上面的push逻辑为直接赋值即可：
        // dataset.backgroundColor = randomColor();
    });
    bubbleChart.update();
}

注意事项 #

• 如果是新增整个数据集而非给现有数据集加数据点，需要在新dataset对象内配置好backgroundColor，再将整个dataset推入bubbleChart.data.datasets数组。
• 逐点配色时，backgroundColor数组的长度必须和对应数据集的data数组长度完全一致，否则会出现颜色渲染异常。

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