如何在Chart JS中按数值高低排序并修复Y轴标签错误

问题根因 #

你的标签映射逻辑写反了索引对应关系：dataIndexes中存储的是排序后位置对应原数组的索引，你之前的赋值方式会导致新标签数组出现空槽、顺序与排序后数值不匹配，同时修改完配置后缺少更新渲染调用。

修改后的代码 #

将你原有排序后的逻辑替换为以下代码即可：

//after the data is sorted
let meta = chart.getDatasetMeta(0);
let newMeta = [];
let newLabels = [];

// 按排序后的索引顺序映射对应数据
dataIndexes.forEach((originalIndex, sortedIndex) => {
  newMeta[sortedIndex] = meta.data[originalIndex];
  newLabels[sortedIndex] = chart.data.labels[originalIndex];
});

meta.data = newMeta;
chart.data.datasets[0].data = dataArray;
chart.data.labels = newLabels;
// 调用update方法刷新图表渲染
chart.update();

核心修改点 #

• 反转了索引映射逻辑：遍历排序后的索引列表dataIndexes，直接按新的排序位置赋值元数据和标签，保证和排序后的数值一一对应
• 新增chart.update()调用，所有对图表配置、数据的修改都需要调用该方法才能生效

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