更新Chart.js图表时标签与数据位置错位问题

Array.push()的原生行为没有问题，确实是把元素追加到数组末尾。你看到的标签跑到首位、数据留在末尾不匹配的问题，本质是图表渲染出来的元素顺序，和数组实际存储的顺序不一致，常见两种触发情况：

• X轴开了反向配置
  如果你在图表配置里给X轴加了reverse: true，轴标签渲染时会把数组顺序完全倒过来：你push到labels数组尾部的新标签，渲染时会出现在X轴最左边，也就是视觉上的第一个位置。这时候如果数据集的渲染逻辑没跟着轴配置对齐，就会出现标签和数据错位。
• X轴是自动排序的时间类型轴
  如果你的X轴类型设为了time时间轴，Chart.js会自动按照标签的时间值重新排序X轴显示内容，根本不管你push元素的先后顺序。要是你传的obj.x对应的时间比现有所有标签都早，这个标签就会被自动排到X轴最开头。但你手动push到数据集里的y值不会跟着标签自动重排，还是待在数组尾部，自然和对应的标签对不上。

1. 先确认数组实际内容：在执行deumChart.update()前打个断点，打印deumChart.data.labels和deumChart.data.datasets[0].data的值，确认新加入的obj.x和obj.y确实都在两个数组的尾部，别光靠渲染出来的位置判断数组操作是否正确。
2. 如果是反向轴导致的错位：要么删掉X轴配置里的reverse: true，要么加新数据的时候改用unshift()同时往labels和data数组的头部加值，保证两边顺序对齐。
3. 如果是时间轴导致的错位：别手动分开push标签和数据，要么push完之后把labels和对应的数据按照时间值做一遍同步排序再调用update，要么直接用Chart.js自带的数据更新API操作，避免顺序错乱。

你当前写的更新逻辑代码：

updateDeumdata: function (obj) {
    deumChart.data.labels.push(obj.x);
    deumChart.data.datasets[0].data.push(obj.y)
    deumChart.update();
}

手动分别修改labels和data数组的写法很容易因为配置问题出现顺序错位，更稳妥的方式是更新时全量替换labels和data的数组引用，减少隐式的渲染逻辑干扰。

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