如何获取Chart.js折线图的数据并实现图表更新？

我创建了一个包含多条折线的Chart.js折线图，目前正尝试为其添加日期时间选择器，但由于无法获取图表的数据，导致无法完成图表更新。以下是我的图表声明代码：

var ctx = document.getElementById('canvas');
var myChart = new Chart(ctx, {
 type: 'line',
 data: {
 labels: time1, time2,
 datasets: [
 {
 label: 'Temperature - 1',
 data: temp1,
 backgroundColor: 'transparent',
 borderColor: 'red',
 borderWidth: 3
 },
 {
 label: 'Temperature - 2',
 data: temp2,
 backgroundColor: 'transparent',
 borderColor: 'purple',
 borderWidth: 3
 },
 {
 label: 'Humidity - 1',
 data: hum1,
 backgroundColor: 'transparent',
 borderColor: 'green',
 borderWidth: 3
 },
 {
 label: 'Humidity - 2',
 data: hum2,
 backgroundColor: 'transparent',
 borderColor: 'yellow',
 borderWidth: 3
 }]
 },
 options: {
 elements: {
 line: {
 tension: 0
 }
 },
 scales: {
 y: {
 title: "Temperature/Humidity",
 beginAtZero: true,
 min: 10,
 max: 60
 }
 }
 });

其中time1、time2、temp1、temp2、hum1、hum2均为数组。我希望使用Chart.js官方文档中提到的chart.update()方法更新图表，但不知道如何获取temp1、temp2这类数据数组。尝试使用myChart.data.datasets.data的方式无法生效，将数据集改为JSON对象形式（如{first_data:{ label: 'Temperature - 1', data: temp1, ... }}）也没有作用，请问该如何获取例如temp1这类数据？

解决方案 #

嗨，其实这就是个容易忽略的小细节！你之前尝试的myChart.data.datasets.data之所以没效果，是因为myChart.data.datasets本身是一个数组，而不是单个对象。

你可以通过数组索引精准获取每个数据集的data属性：

• 获取temp1：myChart.data.datasets[0].data
• 获取temp2：myChart.data.datasets[1].data
• 获取hum1：myChart.data.datasets[2].data
• 获取hum2：myChart.data.datasets[3].data

拿到对应的数据数组后，你就可以根据日期时间选择器的筛选结果修改这些数据，最后调用myChart.update()就能顺利完成图表更新啦。

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