Javascript 加载网页上另一个脚本中初始化的数组时出现问题_Javascript_Highcharts

Javascript 加载网页上另一个脚本中初始化的数组时出现问题

javascript highcharts

Javascript 加载网页上另一个脚本中初始化的数组时出现问题,javascript,highcharts,Javascript,Highcharts,这似乎是件容易得可笑的事，但我还是没能弄明白。我正在使用脚本从web API接收和构造一些数据。它将所有数据放在一个数组中，然后另一个脚本（稍后加载）使用这些数据用Highcharts绘制图表我的数据提取脚本如下所示： var dataSeries = []; fetch('https://eu-west-1.aws.webhooks.mongodb-stitch.com/api/client/v2.0/app/semapres-charts-dsioa/service/get-chart

这似乎是件容易得可笑的事，但我还是没能弄明白。我正在使用脚本从web API接收和构造一些数据。它将所有数据放在一个数组中，然后另一个脚本（稍后加载）使用这些数据用Highcharts绘制图表

我的数据提取脚本如下所示：

var dataSeries = [];

fetch('https://eu-west-1.aws.webhooks.mongodb-stitch.com/api/client/v2.0/app/semapres-charts-dsioa/service/get-chart-data/incoming_webhook/get-day?secret=secret').then(
    function(response){
        return response.json();
    }
).then(function(jsonData){
    for (let i=0;i<jsonData.length;i++) {
        dataSeries.push([jsonData[i][0].$date.$numberLong, jsonData[i][1].$numberDouble]);
    }
});

$(window).load(function () {
        let dataSeriesTest = [[1555318393000, 103.28],[1555318423000, 104.28]];
        var myChart = Highcharts.chart('highchart-container', {
            chart: {
                zoomType: 'x'
            },
            title: {
                text: 'Time'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Pressure (kPa)'
                }
            },
            series: [{
                name: 'Sensor0',
                data: dataSeries
            }]
        });
});

虽然我的html页面很长，但它的顶部有：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sematek Pontongtrykk</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.3.1/stitch.js"></script>
  <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
  <script src="data-fetch.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
  <script src="app.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="highcharter.js"></script>
</head>
<body>


Sematek Pontongtrykk

这靠近页面底部：

  <div id="highchart-container" width="100%" height="400"></div>

我得到了要绘制的图表，它看起来与我的测试数据没有关系，但在调试时，我得到了数组dataSeries在Highcharts脚本中的长度为0。尽管使用了jQuery加载方法，但它似乎在数据获取程序脚本之前调试了该脚本。

我确信我的数据获取程序脚本正在工作，并正在使用它生成一个数组

对于任何有相同问题的人，我找到了一个解决方案，那就是继续承诺链，以便将数据传递到Highcharts位

这是两个脚本的结果：

$(window).load(function () {
    let dataSeries = [];
    fetch('https://eu-west-1.aws.webhooks.mongodb-stitch.com/api/client/v2.0/app/semapres-charts-dsioa/service/get-chart-data/incoming_webhook/get-day?secret=secret').then(
        function (response) {
            return response.json();
        }
    ).then(function (jsonData) {
        for (let i = 0; i < jsonData.length; i++) {
        let time = jsonData[i][0].$date.$numberLong;
        let val = jsonData[i][1].$numberDouble
            dataSeries.push([parseInt(time),parseFloat(val)]);
        }
        return dataSeries;
    }).then(function (dataSeries) {
        let myChart = Highcharts.chart('highchart-container', {
            chart: {
                zoomType: 'x'
            },
            title: {
                text: 'Time'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Pressure (kPa)'
                }
            },
            series: [{
                name: 'Sensor0',
                data: dataSeries
            }]
        });
    });
});

$（窗口）。加载（函数（）{
让dataSeries=[]；
取（'https://eu-west-1.aws.webhooks.mongodb-stitch.com/api/client/v2.0/app/semapres-charts-dsioa/service/get-chart-data/incoming_webhook/get-day?secret=secret）。然后呢(
功能（响应）{
返回response.json（）；
}
).then（函数（jsonData）{
for（设i=0；i

您应该在创建图表的同一脚本中加载数据：

$(window).load(function() {
    var dataSeries = [];

    fetch('https://eu-west-1.aws.webhooks.mongodb-stitch.com/api/client/v2.0/app/semapres-charts-dsioa/service/get-chart-data/incoming_webhook/get-day?secret=secret').then(
        function(response) {
            return response.json();
        }
    ).then(function(jsonData) {
        for (let i = 0; i < jsonData.length; i++) {
            dataSeries.push([jsonData[i][0].$date.$numberLong, jsonData[i][1].$numberDouble]);
        }

        createChart();
    });

    function createChart() {
        var myChart = Highcharts.chart('highchart-container', {
            ...
        });
    }
});

您的主要问题是异步行为

我假设您的

app.js

包含数组初始化和获取，这意味着它将在

highcharter.js

之前开始执行，但由于获取需要时间，因此不会立即填充数组

这就是为什么继续承诺链将解决您的问题

$(window).load(() => {
  fetch('...')
    .then(res => res.json())
    .then(data => data.map(item => [parseInt(item[0].$data.$numberLong), parseFloat(item[1].$numberDouble)]))
    .then(doTheMagicWithHighcharter);
})

请注意，您不需要初始化数组

dataSeries

，因为您是通过链传递它的

$(window).load(() => {
  fetch('...')
    .then(res => res.json())
    .then(data => data.map(item => [parseInt(item[0].$data.$numberLong), parseFloat(item[1].$numberDouble)]))
    .then(doTheMagicWithHighcharter);
})