加载自定义 json 文件 - 高图表.js
Loading a custom json file - highcharts.js
我在加载 .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错误#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];
});
相关文章:
- 如何访问高图表工具提示中的任何特定数据
- 将图表动态添加到组合高图表中
- 在Firefox中导出高图表时出现黑色图像错误
- 高图表中的参数行 80 无效.js
- 统一呈现高图表.js图表,而不是从左到右
- 如何从高图表动态更新 pointStart 系列属性.js
- 简单高图表用作单独的.js文件,但不在视图中
- 高图表 js 单击旋转并展开弧线
- 高图表重新加载骨干网的问题.js
- 高图表.js添加鼠标悬停功能或悬停状态(实现中断图表?
- 将自定义链接添加到饼图中的系列/数据部分(高图表.js)
- 高图表.js如何强制 x 轴标签显示所有月份,无论图表大小如何
- 如何隐藏底部垂直线高图表.js
- 具有动态数据的高图表 $http.post 角度 js
- 加载自定义 json 文件 - 高图表.js
- 获取错误'无法读取属性'文档'未定义的'在导入exporting.js时(导出高图表)
- 高图表如何在PHP小部件中使用js对象
- 如何向这个JS PNG转换器添加更多列?[高图表]
- 高图表JS显示错误的颜色
- JS高图表.js不同格式的饼图数据