时间戳

首页 > 解决方案 > Highchart 不从动态创建的数组中渲染数据

javascript - Highchart 不从动态创建的数组中渲染数据

问题描述

我正在使用 Firebase 实时数据库来获取要在 Highchart 中呈现的数据。我已经声明了一个空数组。

    arrY = [];

然后在函数内部，我将 x 轴的值连同时间戳一起推送到数组中。

   arrY.push([time, parseFloat(tempC)]);

然后当我将数组分配给系列时启动 Highchart 时，图表不会呈现（控制台中没有错误消息）

           series: [{
                name: 'Temperature',
                data: arrY
            }]

但是，如果我用它的值和时间戳对数组进行硬编码并将其分配给它会被渲染的 highchart

    a = [[1591815122, 28],[1591815141, 28],[1591815161, 28],[1591815180, 28],[1591815200, 28]];

和

           series: [{
                name: 'Temperature',
                data: arrY
            }]

当我在控制台中记录两个数组时，两者都显示为数组，但为什么一个工作而另一个不工作？下图中的控制台输出

控制台输出

标签： javascriptarrayshighcharts

解决方案

您正在努力解决的问题与 JavaScript 异步有关。请注意，当您 console.log 时，arrY它是一个空数组。您需要延迟图表渲染，直到从服务器下载数据。

目前，发生了这样的事情：

  1. 数组已定义，
  2. 图表使用空数组呈现，
  3. 数据被下载并推送到阵列，

推荐阅读