javascript - Highcharts 不显示从 JSON 推送的系列

Question

我很难找出我在 Highcharts 中设置图表系列的方式有什么问题。图表轮廓呈现，但系列没有，这表明数据集有问题。解析后，拉入的 JSON 数据看起来很好（顶部附近注释掉的硬编码数据块是数据的外观），我查看了 Highcharts API 并尝试了其他方法无济于事。我想知道我是否只是将数据推错了？我的 javascript/jquery 知识非常基础。谢谢！

 data.push([xval, yval]);

Jsfiddle 链接

Answer 1

修改了您的代码，以便图形呈现http://jsfiddle.net/u4kaC/13/

您应该在

$.getJSON(...)

我已经移动了这段代码

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

在你构建你的“数据”数组之后。问题是您试图在触发 getJson(..) 函数的回调并创建“数据”对象之前绘制图形，这导致“数据”对象始终为空，因此图形不是被画了:)

这是函数的外观

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

Answer 2

只是一个小的修正 - 在上面的答案中，图表是在 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}]
    });
});