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]只是一个测试案例。

使用动态数据更新chartJS

1 个答案: