Question

这似乎很简单，但是我仍然无法弄清楚。我正在使用脚本从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]);
    }
});

我的Highchart脚本如下：

$(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>

这接近页面底部：

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

我得到了要绘制的图表，测试数据看起来还不错，但是在调试时，我得到了Highcharts脚本中Array dataSeries的长度为0。尽管使用了jQuery load方法，但它似乎还是在我的数据获取程序脚本之前调试了该脚本。我确定我的数据提取程序脚本正在运行，并使用该脚本制作了一个数组。

Answer 1

您应该将数据加载到创建图表的脚本中：

$(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', {
            ...
        });
    }
});

实时演示： http://jsfiddle.net/BlackLabel/hdjqgebt/

或者，您可以在数据加载后添加app.js脚本：

var dataSeries = [];

fetch(...).then(function(jsonData) {
    for (let i = 0; i < jsonData.length; i++) {
        ...
    }

    var script = document.createElement('script');
    script.src = "app.js";
    document.getElementsByTagName('head')[0].appendChild(script);
});

Answer 2

您的主要问题是异步行为。

我假设您的$categories = Category::all()->groupBy('parent_id')->toArray();包含数组初始化和提取操作，这意味着它将在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); })，因为您是通过链传递它的。

Answer 3

对于遇到同样问题的任何人，我找到了一个解决方案，该方案正在继续promise链，以便将数据传递到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
            }]
        });
    });
});

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

3 个答案: