javascript - Highcharts 加载数据而不是绘图

Question

我正在尝试将数据动态加载到 Highcharts 中，但我遇到了问题。我尝试了很多方法来做到这一点，数据似乎已加载到 JS，但未绘制图表。

目前这是我在 jQuery 的 document ready 函数中的代码:

options = {
    chart: {
        renderTo: 'container',
        zoomType: 'x',
        animation: true,
    },
    title: {
        text: null
    },
    subtitle: {
        text: null
    },
    xAxis: {
        type: 'datetime',
        title: {
            text: null
        },
    },
    yAxis: {
        title: {
            text: 'Size',
        },
    },
    legend: {
        enabled: false
    },

   series: [{
        data: []
    }]
}

$.ajax({
        type: "GET",
        url: "works/load_data.php",
        data: "id=3&mdate=2012-02&mxdate=2012-03",
        success: function (items) {

            var obj = eval(items).load;
            var series = { data: [] };

            $.each(obj, function (itemNo, item) {
                series.data.push(item);
            });

            options.series.push(series);

        },
        cache: false,
});
var chart = new Highcharts.Chart(options);

图表上没有任何反应。但是，如果我登录以控制图表选项，我会得到:

我的 PHP 正在回显这样的数据: data = {load:[ {x: Date.UTC(2012,2,1,7,15), y: 0.012},{x: Date.UTC(2012,2,1,7,30), y: 0.068} ... ]}

至少对我来说似乎没问题。但它不起作用:(有人可以告诉我我做错了什么吗？谢谢。

Answer 1

AJAX 是异步的，这意味着调用发生在您呈现图表之后。尝试在成功事件后坚持创建图表，如下所示:

$.ajax({
        type: "GET",
        url: "works/load_data.php",
        data: "id=3&mdate=2012-02&mxdate=2012-03",
        success: function (items) {

            var obj = eval(items).load;
            var series = { data: [] };

            $.each(obj, function (itemNo, item) {
                series.data.push(item);
            });

            options.series.push(series);


            var chart = new Highcharts.Chart(options);

        },
        cache: false,
});