我正在从Firebase RealTime Database中检索数据。我需要在图表中获取值,所以我决定使用highchart.js。有人能解释一下为什么我的图表中最旧的值被删除吗?我使用highcharts股票。我试图添加滚动条,这样我就可以看到所有的值,但它不起作用。我也不明白为什么我的浏览器在我加载图表时冻结...我确实认为这是因为我在刷新浏览器时加载了图表,但这很奇怪,因为我现在最多只显示200个值。
多谢了!
main.js中的代码:
// function to plot values on charts
function plotValues(chart, timestamp, value) {
var x = epochToJsDate(timestamp).getTime();
var y = Number(value);
if (chart.series[0].data.length > 40) {
chart.series[0].addPoint([x, y], true, false, true); //If you want a point limit: 1) Change the "40" to the limit you want and put "true" instead of "false
} else {
chart.series[0].addPoint([x, y], true, false, true);
}
chartALM = createALMChart();
dbRef.orderByKey().on('child_added', snapshot => {
var jsonData = snapshot.toJSON();
// Save values on variables
var Défaut_communication_automate = jsonData.Défaut_communication_automate;
var timestamp = jsonData.timestamp;
// Plot the values on the charts
plotValues(chartALM, timestamp, Défaut_communication_automate);
});
Code in charts-definition.js :
// Create the charts when the web page loads
window.addEventListener('load', onload);
function onload(event) {
chartALM = createALMChart();
// Create ALM Chart
function createALMChart() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart-ALM',
type: 'spline'
},
rangeSelector: {
enabled: true,
height: 100,
allButtonsEnabled: true,
buttons: [{
{
type: 'year',
count: 1,
text: 'Week',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Month',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 2
},
series: [{
name: 'ALM',
showInNavigator: true
},{
name: 'ATRE'
}],
title: {
text: undefined
},
plotOptions: {
series: {
},
line: {
animation: false,
dataLabels: {
enabled: true
}
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { second: '%H:%M:%S' },
scrollbar: {
enabled: true
}
},
yAxis: {
title: {
text: 'Défaut communication automate'
}
},
credits: {
enabled: true
}
});
return chart;
}
1条答案
按热度按时间3qpi33ja1#
当涉及到冻结浏览器时,尝试关闭您的
onload()
函数,然后添加createALMChart()
函数。