Question

我尝试在使用ajax请求第一个数据点之前动态初始化我的HighChart系列值。我似乎无法弄清楚出了什么问题，或者我尝试了什么甚至是可能的。有人可以看看并帮忙吗？

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            marginRight: 10,
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Test'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 100,
        },
        yAxis: {
            title: {
                text: 'Test'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
            }
        },
        series: [{
            //AJAX NOT WORKING HERE
            name: 'Random data',
            data: (function() {
                var data = [];
                $.ajax({
                    type: "GET",
                    url: "/test/random2.php",
                    data: "p=2",
                    dataType: "json",
                    async: false,
                    success: function(result){
                        var values = JSON.parse(JSON.stringify(result));
                        var time = (new Date()).getTime();
                        for (i = -19; i <= 0; i += 1) {
                            data.push({
                                x: time + i * 60000,
                                y: values[i+19];
                            });
                        }
                    }
                });
                return data;})
        }]
    });        
});

更新代码 这是我的工作解决方案

    function doHighChart(data) {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'spline',
            marginRight: 10,
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Test'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 100,
        },
        yAxis: {
            title: {
                text: 'Test'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
            }
        },
        series: [{
            name: 'Random data',
            data: data
        }]
    });        
}

    $(document).ready(function() {
    var data = [];

    $.ajax({
        type: "GET",
        url: "/test/random2.php",
        data: "p=2",
        dataType: "json",
        async: false,
        success: function(result){
            var values = JSON.parse(JSON.stringify(result));
            var time = (new Date()).getTime();
            for (i = -19; i <= 0; i += 1) {
                //data.push([i, -i]);
                //data.push("{x:" + (time + i * 1000) ", y: " + values[i+19] + "}");
                data.push([
                    time + i * 1000,
                    values[i+19]
                ]);
            }
            doHighChart(data);
        }
    });
});

Answer 1

你需要调用$ .ajax（）并在回调中初始化你的图表。

如何使用AJAX初始化HighChart系列值？

1 个答案: