我在加载 .json 文件时遇到问题:
[
[
[
"2014-11-19 06:00:00",
"1.1"
],
[
"2014-11-19 14:00:00",
"4.9"
],
[
"2014-11-19 15:00:00",
"4.9"
],
[
"2014-11-19 16:00:00",
"4.9"
],
[
"2014-11-19 17:00:00",
"4.9"
],
[
"2014-11-19 18:00:00",
"4.9"
]
],
[
[
"2014-11-13 23:00:00",
"194"
],
[
"2014-11-14 00:00:00",
"195"
],
[
"2014-11-14 01:00:00",
"187"
],
[
"2014-11-14 02:00:00",
"191"
],
[
"2014-11-14 03:00:00",
"218"
],
[
"2014-11-14 04:00:00",
"170"
]
]
]
值:
[[data, valueTemperature],[data,WindMax]]
我尝试过这种方式，但不起作用:
$(document).ready(function () {
var options = {
chart: {
renderTo: 'container',
type: 'spline',
zoomType: 'xy'
},
title: {
text: 'Temperatura'
},
subtitle: {
text: '5 dni'
},
xAxis: {
type: 'datetime',
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
},
min: -25,
max: 25,
}, { // Secondary yAxis
title: {
text: 'Prędkość wiatru',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} m/s',
style: {
color: Highcharts.getOptions().colors[0]
}
},
min: 0,
max: 15,
opposite: true
}],
tooltip: {
shared: true
},
series: [{}]
};
var chart;
$.getJSON('test.json', function (data) {
options.series[0].data = data;
chart = new Highcharts.Chart(options);
});
});
如何正确编写数据类型？
最佳答案
有几个问题:
- 您已将数字数据存储为字符串。在尝试寻找解决方案时，我必须将温度和风速值中的
"去掉，否则我会得到 Highcharts Error #14 - 您有两个数据系列，但您只在
options.series中创建一个对象。您应该创建两个系列对象并将它们添加到options.series数组中。 - 对于第二个系列，您必须指定要使用的 y 轴。在本例中
yAxis == 1。 - 第二个 y 轴的最大值太低，无法显示数据。
以下是展示上述内容的示例:http://jsfiddle.net/6yvdkp20/1/
$(function () {
var options = {
chart: {
renderTo: 'container',
type: 'spline',
zoomType: 'xy'
},
title: {
text: 'Temperatura'
},
subtitle: {
text: '5 dni'
},
xAxis: {
type: 'datetime',
},
yAxis: [
{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
},
min: -25,
max: 25,
}, { // Secondary yAxis
title: {
text: 'Prędkość wiatru',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} m/s',
style: {
color: Highcharts.getOptions().colors[0]
}
},
min: 0,
max: 200,
opposite: true
}
],
tooltip: {
shared: true
},
series: [
{
data: [
[
"2014-11-19 06:00:00",
1.1
],
[
"2014-11-19 14:00:00",
4.9
],
[
"2014-11-19 15:00:00",
4.9
],
[
"2014-11-19 16:00:00",
4.9
],
[
"2014-11-19 17:00:00",
4.9
],
[
"2014-11-19 18:00:00",
4.9
]
]
},{
yAxis: 1, // This means the second yAxis will be used to plot this series
data:[
[
"2014-11-13 23:00:00",
194
],
[
"2014-11-14 00:00:00",
195
],
[
"2014-11-14 01:00:00",
187
],
[
"2014-11-14 02:00:00",
191
],
[
"2014-11-14 03:00:00",
218
],
[
"2014-11-14 04:00:00",
170
]
]
}
]
};
$('#container').highcharts(options);
});
由于您在评论中提到无法更改正在获取的数据的格式，因此您需要在收到数据后更正格式。以下函数应该正确地做到这一点(尽管我不做任何保证):
function fixFormat(data) {
for(var i = 0; i < dataSeries[0].length; ++i) {
dataSeries[0][i][1] = parseFloat(dataSeries[0][i][1]);
}
for(var i = 0; i < dataSeries[1].length; ++i) {
dataSeries[1][i][1] = parseInt(dataSeries[1][i][1]);
}
}
用法:
$.getJSON('http://kamery.topr.pl/meteo/charts/moko.php', function (data) {
// Correct the formatting
fixFormat(data);
// Put the data in the right place
options.series[0].data = data[0];
options.series[1].data = data[1];
});
关于javascript - 加载自定义 json 文件 - highcharts.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27070426/