ChartJS更新全量数据后x轴旧标签未清除问题排查

问题原因 #

你当前只更新了图表数据集datasets中的数值，没有同步更新x轴对应绑定的data.labels属性，所以x轴会一直保留初始化时的旧标签，不会随新数据刷新。

修复方案 #

你需要先从新的全量数据中提取x轴标签，同步赋值给netProfitChart.data.labels，再执行更新，参考代码如下：

let netProfitData = @this.netProfitData;
// 新增：同步更新x轴标签数组
netProfitChart.data.labels = netProfitData.map(item => item.x);

netProfitChart.data.datasets[0].data = netProfitData;
netProfitChart.data.datasets[0].backgroundColor = netProfitData.map((value) => 
value.y > 0 ? fullConfig.theme.colors.green[400] : fullConfig.theme.colors.red[400]);

// 传入none参数可跳过过渡动画，避免旧数据残影残留
netProfitChart.update('none');

如果修改后仍有旧标签残留，可以先清空旧数据再赋值，彻底清除缓存：

// 第一步：清空旧数据并执行一次更新
netProfitChart.data.labels = [];
netProfitChart.data.datasets[0].data = [];
netProfitChart.update();

// 第二步：赋值新数据
let netProfitData = @this.netProfitData;
netProfitChart.data.labels = netProfitData.map(item => item.x);
netProfitChart.data.datasets[0].data = netProfitData;
netProfitChart.data.datasets[0].backgroundColor = netProfitData.map((value) => 
value.y > 0 ? fullConfig.theme.colors.green[400] : fullConfig.theme.colors.red[400]);

netProfitChart.update();

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