javascript - Highcharts 不显示函数的数据值

Question

我已经使用以下 Highchart 的演示创建了一个 Highchart:

https://www.highcharts.com/demo/dynamic-update

现在我做了什么，我创建了自己的函数来向图表添加动态值。

我创建了一个函数来从特定的 php 文件中获取动态数据，该文件的数据在每个页面加载事件中都会发生变化。

我在 getData 函数 console.log 中获取数据值

这是我正在使用的脚本。

<script type="text/javascript">
  $(document).ready(function(){     
     function getData(){
            $.ajax({
                type: 'GET',
                url: 'data.php',
                success: function(data){
                //  var number = document.write(data) ;
                 console.log(data);
                    return data ;

                }
            }) ;
        }
Highcharts.chart('chart', {
    chart: {
        type: 'spline',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: function () {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = getData();
                          console.log(y);
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },

    time: {
        useUTC: false
    },

    title: {
        text: 'Live random data'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br/>',
        pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        name: 'Random data',
        data:    (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -19; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: getData()
                });
            }
            return data;
        }())
    }]
});

});
</script>

现在您可以看到，我已经创建了一个 getData 函数并获取了返回的数据值。

在 getData 函数下的控制台日志中，我每隔一秒就会得到一个整数值。

问题是在 Highchart 的函数下，我无法使用 getData 函数获取数据值，它在控制台中返回未定义。

Highchart 正在运行，但未显示任何数据点。它在移动但没有显示任何数据点。

请指正我做错的地方。

感谢任何帮助。谢谢

Answer 1

ajax 调用是异步运行的，因此您不能真正从中返回数据。

相反，您应该在 ajax 成功函数中呈现图表。

这里已经有一个很好的例子。

https://www.highcharts.com/docs/working-with-data/live-data

基本上 1.点加载调用函数getData 2.在Getdata中调用ajax函数。 3. 使用新数据成功使用ajax渲染图表。

document.addEventListener('DOMContentLoaded', function() {
    chart = Highcharts.chart('container', {
        chart: {
            type: 'spline',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },
        series: [{
            name: 'Random data',
            data: []
        }]
    });        
});

/**
 * Request data from the server, add it to the graph and set a timeout 
 * to request again
 */
function requestData() {
    $.ajax({
        url: 'live-server-data.php',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 20; // shift if the series is 
                                                 // longer than 20

            // add the point
            chart.series[0].addPoint(point, true, shift);

            // call it again after one second - add this if you want to auto refresh
            // setTimeout(requestData, 1000);    
        },
        cache: false
    });