使用动态数据更新 chartJS

Question

我的计划是使用 chartJS 显示温度图表，当您查看当地天气时，它看起来有点像 google 的图表。 我正在使用来自 openweathermap 的数据，并希望每 3 小时更新一次图表。

不幸的是，我无法找到一种解决方案，可以将我从 openweathermaps 获得的数据传递到图表数组并对其进行更新。

在文档中提到了一个更新功能 (http://www.chartjs.org/docs/latest/developers/updates.html)，但我认为我是一个血腥的初学者，无法真正理解如何在这种情况下应用它。

这就是我用来绘制静态数字图表的代码：

let myChart = document.getElementById('myChart').getContext('2d');

var WeatherChart = new Chart(myChart, {
 type:'line', 
 data:{
    labels:['3h', '6h', '9h', '12h',],
    datasets:[{data:[12, 16, 16, 8],}]
 },

options:{}
});

如何使用变量或数组中的数据来更新图表？

Answer 1

此答案将取决于您尝试更新信息的方式。假设您完全按照您的规定使用，您将每 3 小时设置一个计时器并运行此函数：

function updateWeatherChart(){
    WeatherChart.data.datasets[0].data = [1, 2, 3, 4];
    WeatherChart.update();  
}

您可以拥有一些东西，就像文档中所说的那样，遍历数据并首先将其删除。或者，您可以使用要更新现有图表的新信息重新分配它。

请记住，您必须先运行代码而不是 [1, 2, 3, 4]，才能获取新信息并用您自己的数组替换该数组。 [1, 2, 3, 4] 只是一个测试用例。