jquery – 为什么Highcharts不接受来自我的JSON的UTC值？

2023年3月13日 170次阅读

我正在尝试将一些
JSON格式的数据从COSM提要到一个简单的图表中,但是我很难这样做.我不确定我是否误解了系列阵列是如何工作的(即使在查看
documentation之后也是如此).

这是我在其中进行实验的代码(我最终希望通过循环获取流式传输的JSON数据,但是现在我只是手动尝试推送第二个数据点).

$(document).ready(function(){
            var options = {
                    chart: {
                        renderTo: 'container',
                        type: 'line',
                        marginRight: 130,
                        marginBottom: 25
                    },
                    title: {
                        text: 'Temperature',
                        x: -20 //center
                    },
                    xAxis: {
                        //type: 'datetime',
                    },
                    yAxis: {
                        title: {
                            text: 'Temperature (°C)'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                                return '<b>'+ this.series.name +'</b><br/>'+
                                this.x +': '+ this.y +'°C';
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 100,
                        borderWidth: 0
                    },
                    exporting: {
                        enabled: false
                    },
                    series: [{"name":"Temperature", "data":[]}]
            };
            $.getJSON('http://api.cosm.com/v2/feeds/79903.json?key=dNSiSvXZtR6QBUqbzll4CCgnngGSAKxIQVFSeXBneGpqWT0g', function(data) 
            {
                var xval = data.datastreams[7].at;
                var yval = parseFloat(data.datastreams[7].current_value);
                alert(xval);
                alert(yval);
                var pointChart = new Array(xval, yval);
                options.series[0].data.push(pointChart);
                xval = data.datastreams[2].at;
                yval = parseFloat(data.datastreams[2].current_value);
                pointChart = [xval, yval];
                options.series[0].data.push(pointChart);
                //options.series[0].data.push(data.datastreams[7].at, 25);
                alert(options.series[0].data[0]);
                alert(options.series[0].data[1]);
            });
            var chart = new Highcharts.Chart(options);
        });

JSON看起来像这样：

{
   "version" : "1.0.0",
   "created" : "2012-10-12T05:01:53.231981Z",
   "status" : "live",
   "location" : {
   },
   "datastreams" : [{
         "max_value" : "100.0",
         "min_value" : "0.0",
         "at" : "2012-10-22T01:28:12.610947Z",
         "id" : "Battery_Level",
         "current_value" : "88"
      }, {
         "max_value" : "30431.0",
         "min_value" : "-26691.0",
         "at" : "2012-10-22T01:22:32.905001Z",
         "id" : "Heading",
         "current_value" : "95"
      }, {
         "max_value" : "64.9304",
         "min_value" : "21.6153",
         "at" : "2012-10-22T01:30:52.656318Z",
         "unit" : {
            "symbol" : "%"
         },
         "id" : "Humidity",
         "current_value" : "55.7556"
      }, {
         "max_value" : "32684.0",
         "min_value" : "0.0",
         "at" : "2012-10-22T01:30:52.656318Z",
         "id" : "Light_Level",
         "current_value" : "37"
      }, {
         "max_value" : "649994.0",
         "min_value" : "-139994.0",
         "at" : "2012-10-18T06:47:56.226880Z",
         "unit" : {
            "symbol" : "µT"
         },
         "id" : "Magnetic_X",
         "current_value" : "-24.90"
      }, {
         "max_value" : "99997.0",
         "min_value" : "-9.9006731e+24",
         "at" : "2012-10-18T06:47:56.226880Z",
         "unit" : {
            "symbol" : "µT"
         },
         "id" : "Magnetic_Y",
         "current_value" : "7.35"
      }, {
         "max_value" : "432.0",
         "min_value" : "-3950.0",
         "at" : "2012-10-18T06:47:56.226880Z",
         "unit" : {
            "symbol" : "µT"
         },
         "id" : "Magnetic_Z",
         "current_value" : "7.10"
      }, {
         "max_value" : "25.59",
         "min_value" : "11.1",
         "at" : "2012-10-22T01:30:52.656318Z",
         "unit" : {
            "symbol" : "°C"
         },
         "id" : "Temperature",
         "current_value" : "22.3800"
   ],
}

据我了解,Highcharts接受x轴的UTC格式的日期/时间值？来自我的JSON Feed的UTC无效吗？

最佳答案 您必须将日期和时间值转换为Unix时间戳,然后Highcharts将接受它.

Date.UTC(2010, 0, 1)

看看this tutorial如何在Javascript中使用日期对象.

点赞