好几天没碰碰运气。 我想创建Highcharts图表以显示数据库中的数据。 我做了一些图表没有问题,但是我停留在显示一些点(20个或更多)的图表上,并将样条图滚动到左侧以显示新数据。
我创建了两个数组jfDatumi(包含来自数据库的hh:mm格式的时间)(12:10)和包含温度值(-2.3…)的jfTempOuts。
现在,我想在图表上显示每秒移动一次的数据,添加新点(时间,温度),但一次仅显示20个点。 当涉及到数组的末尾时,我希望图表从第一点开始。 就像这张图表https://www.highcharts.com/demo/dynamic-update一样,但我希望X轴显示我的数组(jfDatumi)中的时间,而不是当前时间(不包含var x =(new Date())。getTime())
有人可以帮助我吗?因此,我正在拔头发。 下面是我当前的代码。
$(function ()
{
$(document).ready(function ()
{
Highcharts.setOptions(
{
global:
{
useUTC: false,
}
});
$('#test').highcharts(
{
credits:
{
text: 'By: http://amicus.ba',
href: 'http://amicus.ba'
},
chart:
{
type: 'spline',
animation: Highcharts.svg, // Ne animiraj u starom IE
marginRight: 1,
events:
{
load: function ()
{
// Postaviti update grafikona svake sekunde
var series = this.series[0];
setInterval(function ()
{
var x = jfDatumi, // Trenutno vrijeme
//var x = new Date(), // current time
//x=jfDatumi,
//var x = (new Date()).getTime(),
y = jfTempOuts;
series.addPoint([x, y], true, true);
}, 1500);
}
}
},
title:
{
text: 'Test Vanjska temperatura [°C]'
},
xAxis:
{
type: 'datetime',
categories: jfDatumi,
minRange: 1,
title:
{
text: 'Vrijeme'
},
tickPixelInterval: 1,
},
yAxis:
{
minRange: 0,
title:
{
text: '[°C]'
},
plotLines: [
{
value: 0,
width: 2,
color: '#808080'
}]
},
tooltip:
{
formatter: function ()
{
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.numberFormat(this.y, 2) + ' [°C]';
}
},
legend:
{
enabled: false
},
exporting:
{
enabled: false
},
series: [
{
name: 'Vanjska temperatura',
//data: (jfTempOuts)
data: (function () {
// generate an array of random data
var data = [],
time = jfDatumi,
i;
for (i = 0; i <= 20; i += 1) {
data.push([
time,
jfTempOuts
]);
}
return data;
}())
}]
});
});
});
这一次,我有jfDatumi的时间,但没有jfTempOuts的温度值。
答案 0 :(得分:0)
我自己找到了解决方案。 这是对我有用的代码:
// Animirani grafikon vanjske temperature
$(function ()
{
$(document).ready(function ()
{
Highcharts.setOptions(
{
global:
{
useUTC: false,
}
});
$('#vanjskaTemp').highcharts(
{
credits:
{
text: 'By: http://amicus.ba',
href: 'http://amicus.ba'
},
chart:
{
type: 'spline',
animation: Highcharts.svg, // Ne animiraj u starom IE
marginRight: 1,
events:
{
load: function ()
{
// Postaviti update grafikona po podešenom intervalu
var series = this.series[0];
var br=20; // Start brojača za indeksiranje niza temperatura (podešeno u: for (i = 0; i <= 20; i += 1))
setInterval(function ()
{
br=br+1; // Brojač za indeksiranje niza temperatura
// Zaustavljanje skrolovanja ako je dostignut kraj niza jfTempOuts
if (br<=jfTempOuts.length-1)
{
var x = jfSamoVrijeme; // Vrijeme za X osu (zaustavi se osa ako se ne očitava)
y = jfTempOuts[br]; // Vrijednosti za Y osu (Vanjske temperature)
series.addPoint([x, y], true, true);
}
else
{
//document.write("BR:<li>"+br+"</li>");
}
}, 1500);
}
}
},
title:
{
text: 'Vanjska temperatura [°C]'
},
xAxis:
{
type: 'datetime',
categories: jfSamoVrijeme,
minRange: 1,
title:
{
text: 'Vrijeme'
},
tickPixelInterval: 1,
},
yAxis:
{
minRange: 0,
title:
{
text: 'Vanjska temperatura [°C]'
},
plotLines: [
{
value: 0,
width: 0.5,
color: '#808080'
}]
},
tooltip:
{
formatter: function ()
{
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.numberFormat(this.y, 2) + ' [°C]';
}
},
legend:
{
enabled: false
},
exporting:
{
enabled: false
},
series: [
{
name: 'Vanjska temperatura',
data: (function () {
var data = [],
time = jfSamoVrijeme,
i;
for (i = 0; i <= 20; i += 1) {
data.push([
time,
jfTempOuts
]);
}
return data;
}())
}]
});
});
});
// Kraj animiranog grafikona vanjske temperature
我现在唯一的问题是我不能显示前20分,但并不是那么重要。 我也将为该问题找到解决方案。 My chart