Highcharts加载数据而不是绘图 [英] Highcharts loading data and not plotting

问题描述

我试图将数据动态加载到Highcharts，但我遇到了问题。我试图用很多方式来做这件事，数据似乎被加载到JS，但图不会被绘制。

目前这是我在jQuery的文档准备函数：



  options = {
图表：{ 
 renderTo：'container'，
 zoomType：'x'，
动画：true，
}，
 title：{
 text：null 
 $，
副标题：{
 text：null 
}，
 xAxis：{
类型：'datetime'，
 title：{
 text：null 
}，
}，
 yAxis：{
 title：{
 text：'Size'，
}，
 $，
图例：{
启用：false 
}，
 
系列：[{
 data：[] 
}] 
 
 
 $ .ajax（{
类型：GET，
 url：works / load_data.php，
 data：id = 3& mdate = 2012-02& mxdate = 2012-03，
成功：函数（项目）{
 
 var obj = eval（items）.load; 
 var series = {data：[]}; （b，b，b，b，b，b， 
 
 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} ...]}

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

解析方案

AJAX是异步的，意思是这个调用发生在你呈现图表之后，尝试在成功事件之后粘贴图表创建，如下所示：



  $。ajax（ {
 type：GET，
 url：works / load_data.php，
 data：id = 3& mdate = 2012-02& mxdate = 2012-03，
成功：函数（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，
}）; 
  




I'm trying to load data dynamically into Highcharts but I'm having problems. I tried to do this in a lot of ways and the data seems to be loaded to the JS but the graph is not plotted.

Currently this is my code in jQuery's document ready function:

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);

Nothing happens on the graph. But if I log to console the chart options I get this:

My PHP is echoing the data like this: data = {load:[ {x: Date.UTC(2012,2,1,7,15), y: 0.012},{x: Date.UTC(2012,2,1,7,30), y: 0.068} ... ]}

Seem to be OK, to me at least. But it's not working :( Can someone tell me what I'm doing wrong?? Thanks.

解决方案

AJAX is asynchronous, meaning the call happens after you render the chart. Trying sticking the chart creation after your success event, like so:

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

这篇关于Highcharts加载数据而不是绘图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！