如何用JavaScript按日期排序JSON数据？修正Chart.js展示顺序

我明白你遇到的问题了——用Java查询出来的通话数据是按你期望的日期顺序排列的，但传到前端用Chart.js展示时，数据顺序完全乱了，这确实会让图表展示逻辑混乱。咱们来一步步解决这个问题：

首先要明确一点：JavaScript里的普通对象，它的键的遍历顺序在某些场景下是不可靠的（尤其是旧浏览器），所以咱们不能直接对对象本身排序，得先把它转换成数组来处理。

具体步骤和代码示例 #

假设你的原始JSON数据是这样的：

const callData = {
  "2018-05-10": "14",
  "2018-04-26": "90",
  "2018-04-27": "12",
  "2018-05-16": "36",
  "2018-05-17": "30"
};

1. 把对象转换成键值对数组

用Object.entries()方法可以把对象转成[日期字符串, 通话数]这样的二维数组：

const entries = Object.entries(callData);

2. 按日期排序数组

接下来对这个数组排序，通过把日期字符串转换成Date对象，利用时间戳的差值来比较先后：

• 如果要升序（从最早到最晚）：

const sortedAscEntries = entries.sort((a, b) => new Date(a[0]) - new Date(b[0]));

• 如果要降序（从最晚到最早，和你Java查询的结果顺序一致）：

const sortedDescEntries = entries.sort((a, b) => new Date(b[0]) - new Date(a[0]));

3. 转换成Chart.js需要的格式

排序完成后，你可以直接提取Chart.js需要的labels和data数组：

// 以降序为例
const labels = sortedDescEntries.map(item => item[0]);
const data = sortedDescEntries.map(item => parseInt(item[1]));

这样你把labels和data传入Chart.js的配置里，就能得到顺序正确的图表了。

可选：转换成排序后的对象

如果你需要一个排序后的对象（现代浏览器会保留插入顺序），可以用Object.fromEntries()：

const sortedCallData = Object.fromEntries(sortedDescEntries);

为什么要这么做？ #

因为直接遍历对象的键时，JavaScript会按照键的字符串字典序来处理，而日期字符串的字典序和实际的时间顺序并不完全一致（比如"2018-05-10"在字典序里会比"2018-04-26"靠前，但实际时间更晚），所以必须通过Date对象来做时间维度的比较，才能得到正确的排序结果。

内容的提问来源于stack exchange，提问作者Carlos Arbeláñez