使用PlotlyJS生成折线图时，二维数组按id排序报错的解决办法

首先来拆解你遇到的Uncaught TypeError: ndvi_array[data][0].sort is not a function错误：
你尝试调用ndvi_array[data][0].sort()，但ndvi_array[data][0]是数组里单个元素的id值（比如一个数字），而sort()是数组专属的方法，单个数字自然没有这个方法——这就是报错的核心原因。你要排序的是整个二维数组，而非单个id值。

接下来给你一步步修正的完整方案：

1. 先对整个二维数组按id排序 #

你需要先把整个ndvi_array按照每个子数组的第0项（也就是id）完成排序，代码如下：

// 按id（子数组第0项）升序排序，降序则改为b[0]-a[0]
ndvi_array.sort((a, b) => a[0] - b[0]);

这里的a和b分别代表数组里的两个子元素，a[0]-b[0]会让数组按id从小到大排列，完全符合你的排序需求。

2. 重构Plotly绘图逻辑 #

你原来的for循环有个关键问题：每次循环都创建新的data数组并调用Plotly.newPlot，这样最后页面上只会显示最后一个数据点的图，根本不是你想要的折线图效果。正确的做法是：

• 先从排序后的数组里批量提取x轴、y轴数据
• 一次性创建Plotly数据集，只调用一次绘图方法

完整可运行的代码示例：

// 第一步：先按id排序整个数组
ndvi_array.sort((a, b) => a[0] - b[0]);

// 第二步：批量提取x、y轴数据
const xValues = [];
const yValues = [];
// 用普通for循环遍历数组，比for...in更安全
for (let i = 0; i < ndvi_array.length; i++) {
  // 打印验证排序后的数据
  console.log('id: '+ndvi_array[i][0]+', data: '+ndvi_array[i][1]+', index: '+ndvi_array[i][2]);
  xValues.push(ndvi_array[i][1]);
  yValues.push(ndvi_array[i][2]);
}

// 第三步：创建Plotly数据并绘图
const data = [{
  x: xValues,
  y: yValues,
  type: 'scatter',
  mode: 'lines+markers' // 可选，同时显示折线和数据点，更直观
}];

Plotly.newPlot('ndvi-index', data);

额外小提示 #

• 尽量避免用for...in遍历数组，它是为遍历对象属性设计的，遍历数组用普通for、forEach或for...of更稳妥，能避免很多意外问题。
• 如果你的id值包含非数字类型，排序逻辑需要调整，但从你的报错信息来看应该都是数字，上面的代码完全适用。

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