无法获取highcharts中的温度数据

时间:2016-01-05 13:26:07

标签: javascript highcharts

我正在使用此代码从api.forecast.io获取温度数据但无法这样做。这是我的代码

$(function () {

$('#container').highcharts({
      title: {
        text: 'Temperature'
    },

    subtitle: {
        text: 'New Delhi'
    },

    xAxis: {
    	title: {
    		text: 'Days'
    	},
    	type: 'datetime',
    },

    yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        
        plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
    },

    tooltip: {
        valueSuffix: '°C'
    },
	
    legend: {
        enabled: false
    },

    series: [{
       name: 'Daily Temp',       
       pointStart: Date.now(),
       pointInterval: 24*60*60*1000,
	   data: []
    }]

  });

});

$.ajax({
 url: "https://api.forecast.io/forecast/87a7dd82a91b0b765d2576872f2a3826/53.479324,-2.248485",
 cache: false,
 jsonp: "callback",
 dataType: "jsonp",
 success: function(chart) {

  var myChart = $('#container').highcharts();
    
   
 for(var i=0; i<chart.daily.data.length; i++)
 {
  myChart.series[0].data.push(chart.daily.data[i].temperature); 
 }
	}
 });

我只是从使用api获取数据,但是当我绘制图表时,没有数据。有人能帮我吗?如果你认为我的api url不正确,那么请建议任何其他API,通过它我可以获取特定城市的每日温度数据。

1 个答案:

答案 0 :(得分:2)

你有几个问题。

1)您没有告诉图表绘制数据。

您在渲染图表后设置数据数组,这不会绘制数据 - 它只是将数据附加到对象。

您可以通过在for循环中构建数据数组来解决此问题,然后在循环之后使用highcharts api setData()调用来解决此问题。

2)没有属性&#34;温度&#34;在数据集中。有温度最高温度和温度。

示例:

var myChart = $('#container').highcharts();
var chartData = [];

for(var i=0; i < chart.daily.data.length; i++)
{
  chartData.push(chart.daily.data[i].temperatureMax); 
}

myChart.series[0].setData(chartData);

更新小提琴: