在Highcharts中导入JSON数据
我已经读了很多关于这个项目的参考资料,但我仍然感到困惑。我已经添加了我的代码 在所附代码中,我有两个绘图在Highcharts中导入JSON数据,json,highcharts,Json,Highcharts,我已经读了很多关于这个项目的参考资料,但我仍然感到困惑。我已经添加了我的代码 在所附代码中,我有两个绘图plot_1使用页面中定义的数据,plot_2相同,但使用JSON导入的数据绘图1工作正常,绘图2不工作。在这个论坛上导入JSON数据有很多不同的版本,我试图模仿其中的许多版本,但都没有成功。我正在嵌入式系统上使用此代码。如果有人能帮忙,我将不胜感激 <script> $(function () { $('#plot_1').highcharts({
plot_1
使用页面中定义的数据,plot_2
相同,但使用JSON导入的数据<代码>绘图1工作正常,绘图2
不工作。在这个论坛上导入JSON数据有很多不同的版本,我试图模仿其中的许多版本,但都没有成功。我正在嵌入式系统上使用此代码。如果有人能帮忙,我将不胜感激
<script>
$(function () {
$('#plot_1').highcharts({
chart: {
borderWidth: 2,
borderRadius: 3,
borderColor: '#a1a1a1',
type: 'line',
marginBottom: 30
},
title: {
text: 'Battery Voltage and Current'
},
xAxis: {
type: 'datetime',
pointStart: Date.UTC(2013, 2, 26), // Jan = 0
pointInterval: 60 * 1000 * 15, // 15 minutes
labels: {
align: 'center',
x: 0,
y: 16
}
},
yAxis: [{ // Primary axis (left)
startOnTick: true,
title: {
text: 'Volts',
style: {
color: '#89A54E'
}
},
labels: {
align: 'right',
x: -3,
y: 0,
style: {
color: '#89A54E'
}
},
min: 6,
max: 16
},{ // Secondary axis (right)
opposite: true,
gridLineWidth: 1,
title: {
text: 'Amps',
style: {
color: '#4572A7'
}
},
labels: {
align: 'left',
x: 3,
y: 0,
style: {
color: '#4572A7'
}
},
min: -0.5,
max: 0.5
}],
legend: {
enabled: false
},
plotOptions: {
series : {
marker: {
enabled: false
}
}
},
series: [{
name: 'Volt',
color: '#89A54E',
data: [12.4, 12.4, 12.4, 12.2, 12.0, 11.9, 11.9, 11.8, 11.6, 11.4, 11.1, 10.9, 11.4, 11.5, 11.7, 11.9, 12.2, 12.4, 12.4, 12.4]
}, {
name: 'Amp',
color: '#4572A7',
yAxis: 1,
data: [-0.1, -0.2, -0.1, -0.2, -0.3, -0.3, -0.4, -0.3, -0.4, -0.4, -0.3, -0.3, 0.3, 0.3, 0.4, 0.5, 0.4, 0.4, 0.4, 0.1]
}]
});
});
</script>
<script>
$(function () {
var data1 = [], data2 = [];
function requestData1() {
$.ajax({
url: "sig0.jsn",
dataType: "json",
success: function(data1) {
alert (data1);
this.series[0].setData(data1);
},
cache: false
});
}
function requestData2() {
$.ajax({
url: "sig2.jsn",
dataType: "json",
success: function(data2) {
alert (data2);
this.series[0].setData(data2);
},
cache: false
});
}
$('#plot_2').highcharts({
chart: {
borderWidth: 2,
borderRadius: 3,
borderColor: '#a1a1a1',
type: 'line',
marginBottom: 30,
events: {
load: requestData1,
load: requestData2
}
},
title: {
text: 'Received Signal Strength'
},
xAxis: {
type: 'datetime',
pointStart: Date.UTC(2013, 2, 26),
pointInterval: 60 * 1000 * 15,
labels: {
align: 'center',
x: 0,
y: 16
}
},
yAxis: { // Primary axis (left)
startOnTick: true,
title: {
text: 'Strength (db)'
},
labels: {
align: 'right',
x: -3,
y: 0
},
min: -40,
max: 0
},
legend: {
align: 'left',
verticalAlign: 'top',
floating: true,
x: 50,
y: 45
},
plotOptions: {
series : {
marker: {
enabled: false
}
}
},
series: [{
name: 'Device A',
color: '#89A54E',
data: data1
},{
name: 'Device B',
color: '#4572A7',
data: data2
}]
});
});
</script>
最后,我将X轴时间数据与Y轴数据配对,因为我很可能会错过数据记录中的一些时间间隔,所以如果你能在答案中考虑的话。总的来说,我想绘制4个传感器的数据。
您应该在ajax调用中移动图表inilazize,因为在您的情况下,ajax和highcharts定义“同时”运行 因此,它应该看起来像: $.ajax({
url: "sig2.jsn",
dataType: "json",
success: function(data2) {
alert (data2);
this.series[0].setData(data2);
$('#plot_2').highcharts({
//parameters
});
},
cache: false
});
你真正的问题是什么?该过程是在
$的成功回调中创建图表。getJSON
感谢您提供的信息。我试过了,但似乎不起作用。当我按照你的建议去做时,整个图表不会出现。当我使用之前发布的代码时,我得到了基本图,但没有数据。通过我的代码,我还得到一个弹出窗口,上面写着“来自网页的污水”[object]
$.ajax({
url: "sig2.jsn",
dataType: "json",
success: function(data2) {
alert (data2);
this.series[0].setData(data2);
$('#plot_2').highcharts({
//parameters
});
},
cache: false
});