Chart.js折线图添加zoom缩放功能时报indexOf不存在错误如何修复？

错误根源 #

报错是两个问题共同导致的：

• 初始化Chart实例时传入的data结构不完整：labels设为null而非空数组，且未初始化datasets空数组，Chart.js内部处理数据时调用数组方法失败
• 你将接口返回的原生数组用$()包裹为jQuery对象，再调用slice返回的仍然是jQuery对象而非普通数组，Chart.js处理数据时调用数组的indexOf方法不存在，直接抛出异常

具体修改步骤 #

1. 修正初始化时的data结构
   将原来的空数据定义代码：

// 此处定义空数据是为了后续插入数据集
var data = {
    labels: null
};

替换为：

// 此处定义空数据是为了后续插入数据集
var data = {
    labels: [],
    datasets: []
};

2. 移除对数组不必要的jQuery包裹
   将两处用$()包裹数组的代码：

var myData = $(reply.data[name = myLimbLabels[a]].x).slice(startPoint, endPoint);
var timeSpan = $(reply.data.timeStamps.timeStamps).slice(startPoint, endPoint);

替换为直接调用原生数组的slice方法：

var myData = reply.data[myLimbLabels[a]].x.slice(startPoint, endPoint);
var timeSpan = reply.data.timeStamps.timeStamps.slice(startPoint, endPoint);

3. （可选优化）避免多次异步更新导致的重绘问题
   你当前循环发起多个AJAX请求，每个请求成功都会调用update，容易出现中间状态数据不完整的问题。可以将所有AJAX请求包装为Promise，等所有请求都完成后统一调用一次myNewChart.update()即可。

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