Highcharts不显示从JSON推送的系列

时间:2012-11-05 07:58:54

标签: javascript jquery json highcharts

我无法找到我在Highcharts中设置图表系列的方法有什么问题。图表轮廓呈现但系列没有表明数据集有问题。在解析之后,被拉入的JSON数据看起来很好(靠近顶部的注释掉的硬编码数据块是数据的外观),我查看了Highcharts API并尝试了其他方法无济于事。我想知道我是不是只是推错了数据?我的javascript / jquery知识非常基础。谢谢!

 data.push([xval, yval]);

Jsfiddle link

2 个答案:

答案 0 :(得分:3)

修改了代码,以便图表获得渲染http://jsfiddle.net/u4kaC/13/

您应该在

的回调中调整图表
$.getJSON(...)

我已移动此代码

var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container'
                },
                xAxis: {
                    type: 'datetime'
                },
                series: [{
                    data: data
                }]
构建“数据”数组后立即

。 问题是你试图在触发getJson(..)函数的回调并且创建“data”对象之前绘制图形,这导致“data”对象始终为空,因此图形不是得出:)

这是函数的外观

$.getJSON('http://api.cosm.com/v2/feeds/79903/datastreams/Temperature.json?start=2012-10-31T14:01:46Z&end=2012-11-03T17:01:46Z&interval=3600?key=dNSiSvXZtR6QBUqbzll4CCgnngGSAKxIQVFSeXBneGpqWT0g', 
        function(inData) 
        {
            var xval = new Date();
            dateStart = Date.parse(inData.datapoints[0].at);
            for (i=0; i<inData.datapoints.length; i++)
            {
                var yval = parseFloat(inData.datapoints[i].value);
                xval = Date.parse(inData.datapoints[i].at);
                var x = [xval, yval];                   

                data.push({x: xval, y:yval});


             });

             var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container'
                },
                xAxis: {
                    type: 'datetime'
                },
                series: [{
                    data: data
                }]
               }
             });

答案 1 :(得分:1)

只是一个小的修正 - 在上面的答案中,图表是在for循环内创建的,导致为数据中的每个点启动一个图表。通过在循环外移动图表初始化来纠正这个问题:http://jsfiddle.net/highcharts/u4kaC/15/

$.getJSON('http://api.cosm.com/v2/feeds/79903/datastreams/Temperature.json?start=2012-10-31T14:01:46Z&end=2012-11-03T17:01:46Z&interval=3600?key=dNSiSvXZtR6QBUqbzll4CCgnngGSAKxIQVFSeXBneGpqWT0g', function(inData) {
    var xval = new Date();
    dateStart = Date.parse(inData.datapoints[0].at);
    for (i = 0; i < inData.datapoints.length; i++) {
        var yval = parseFloat(inData.datapoints[i].value);
        xval = Date.parse(inData.datapoints[i].at);
        var x = [xval, yval];

        data.push(x);
    }
    //data.push({x: xval, y:yval});
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        xAxis: {
            type: 'datetime'
        },
        series: [{
            data: data}]
    });
});