我花了一些时间试图解决这个问题。我通常会进行研究而不是提出问题，但我完全被难住了。我正在尝试使用 Forecast.io api 中的数据创建 Highchart。具体来说，是每小时的气温和每分钟的降水量。
对于那些不知道的人。要调用 Forecast.io，您需要自己的 API key 。 我现在不介意分享我的，因为你可以随时自动更改它。 这是调用特定位置所产生的 json 的链接(实际的 json 列表会占用太多空间并导致我的问题困惑)
https://api.forecast.io/forecast/87a7dd82a91b0b765d2576872f2a3826/34.6507,-82.8612
调用每小时温度:
- data.hourly.data[0].温度(当前小时)
- data.hourly.data[2].温度(现在已经两小时了，你明白了..)
我只是不知道如何将其包含在 highcharts javascript 中。 这是来自 Highcharts 的示例折线图，我稍作修改，但不知道从这里开始。我尝试过很多不同的方法。
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Temp'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
}
},
yAxis: {
title: {
text: ''
},
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // Light air
from: 0.3,
to: 1.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // Light breeze
from: 1.5,
to: 3.3,
color: 'rgba(0, 0, 0, 0)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // Gentle breeze
from: 3.3,
to: 5.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // Moderate breeze
from: 5.5,
to: 8,
color: 'rgba(0, 0, 0, 0)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // Fresh breeze
from: 8,
to: 11,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // Strong breeze
from: 11,
to: 14,
color: 'rgba(0, 0, 0, 0)',
label: {
text: '',
style: {
color: '#606060'
}
}
}, { // High wind
from: 14,
to: 15,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: '',
style: {
color: '#606060'
}
}
}]
},
tooltip: {
valueSuffix: ' m/s'
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
tickInterval: 3600000, // one hour
}
},
series: [{
name: 'Temperature',
data: []
}],
navigation: {
menuItemStyle: {
fontSize: '10px'
}
}
});
$.ajax({
url: "https://api.forecast.io/forecast/87a7dd82a91b0b765d2576872f2a3826/53.479324,-2.248485",
jsonp: "callback",
dataType: "jsonp",
success: function(data) {
}
});
});
http://jsfiddle.net/nn51895/kto8yt3r/
如有任何帮助，我们将不胜感激。
此外，我还阅读了 Highcharts 文档和示例。我想不通。我肯定错过了什么。
最佳答案
在这里，我创建了一个函数，它将数据序列和初始时间作为参数，并使用 highcharts 绘制它们。
ajax 请求正在获取每小时的温度，如下所示:
$.ajax({
url: "https://api.forecast.io/forecast/87a7dd82a91b0b765d2576872f2a3826/53.479324,-2.248485",
jsonp: "callback",
dataType: "jsonp",
success: function(odata) {
var dataArr = new Array();
var timeint = odata.hourly.data[0].time;
for(var i=0; i<odata.hourly.data.length; i++)
dataArr.push(odata.hourly.data[i].temperature);
plotLine(dataArr, timeint)
}
});
http://jsfiddle.net/kto8yt3r/3/
您始终可以根据需要设置 xAxis、yAxis 和工具提示数据的格式。
希望这有帮助!
关于javascript - 如何格式化 Highcharts 来获取特定的 json 数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26554910/