使用动态数据更新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]只是一个测试案例.