时间戳

首页 > 解决方案 > 使用动态数据更新 chartJS

javascript - 使用动态数据更新 chartJS

问题描述

我的计划是使用 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:{}
});

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

标签： javascriptchart.js

解决方案

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

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

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

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

推荐阅读