Angular中使用Chart.js更新标签时X轴不自动收缩如何解决？

核心问题原因 #

你清空旧数据后提前调用了chart.update()，但新的标签、数据赋值完成后没有再次触发图表重绘，Chart.js默认会保留之前的轴配置缓存，导致旧的多余标签没有被清除。

修改方案 #

步骤1：调整update调用时机 #

删除清空旧数据后的chart.update()调用，等所有新数据、标签全部赋值完成后再调用update方法。

步骤2：替换完整数据对象（适配Angular变更检测/ng2-charts规则） #

不要只修改barChartData数组内部元素的data属性，直接替换整个barChartData数组，避免引用不变导致的配置不更新问题。

修正后代码示例 #

// 先清空所有旧数据
this.barChartLabels = [];
this.xLabels = [];
this.Consumption = [];
this.Flow = [];
// 这里移除原来的chart.update()调用

this.resultSet.result.forEach(item => {
  this.xLabels.push(item.a);
  this.Flow.push(+item.b); // + 用于将字符串转为数字
  this.Consumption.push(+item.f);
});

// 赋值新标签
this.barChartLabels = this.xLabels;
// 直接替换整个barChartData数组，而不是修改内部元素的data属性
this.barChartData = [
  { data: this.Consumption, label: '消耗' },
  { data: this.Flow, label: '流量' }
];

// 所有数据赋值完成后再调用update触发重绘
this.chart.update();

可选补充配置（上述修改后仍有问题时添加） #

如果仍然有旧标签残留，可以在update前手动重置x轴配置，强制适配新标签长度：

this.chart.data.labels = this.barChartLabels;
// 关闭自动跳过，强制显示所有当前标签
this.chart.options.scales.x.ticks.autoSkip = false;
// 最大刻度数设置为当前标签长度
this.chart.options.scales.x.maxTicksLimit = this.barChartLabels.length;

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