我有一个静态本地网页应该使用来自csv文件的数据进行更新(因此数据会写入文件,页面应该更新并显示新数据)。我的问题是,对于许多数据点,它变得非常慢,并且在一定数量的点之后它根本不会更新。
目前,页面更新的方式是每隔3秒读取一次文件并相应地更新。我想更有效的方法是查看文件的最新添加内容,然后将这些新点附加到当前数据集。我只是不确定该怎么做。
下面的代码解析csv文件并将数据分离到要在图表中使用的数组:
function parseCSVData(csvFile) {
time = [];
altitude = [];
outsideTemp = [];
insideTemp = [];
voltage = [];
state = [];
velocity = [];
degrees = [];
// cut CSV dataFiles into lines
var lines = csvFile.split("\n");
$.each(lines, function (lineNumber, line) {
if (lineNumber != 0) { // skip header line
var fields = line.split(",");
var missionTime = parseInt(fields[1]);
var altitude2 = parseInt(fields[2]);
var outsideTemp2 = parseInt(fields[3]);
var insideTemp2 = parseInt(fields[4]);
var voltage2 = parseInt(fields[5]);
var state2 = parseInt(fields[6]);
var velocity2 = parseInt(fields[7]);
var degrees2 = parseInt(fields[8]);
time.push(missionTime);
altitude.push(altitude2);
outsideTemp.push(outsideTemp2);
insideTemp.push(insideTemp2);
voltage.push(voltage2);
state.push(state2);
velocity.push(velocity2);
degrees.push(degrees2);
}
});
}
这是每3秒更新一次图表的代码:
setInterval(function blah() {
var file = fileName+'?q='+Math.random();
fillCharts(file);//which calls the parseCSVData function and fills the charts
}, 3000);
编辑:使用完整代码的pastebin:http://pastebin.com/Qmzn8azY
EDIT2:示例csv数据:
TEAM_ID,MISSION_TIME,ALT_SENSOR,OUTSIDE_TEMP,INSIDE_TEMP,VOLTAGE,FSW_STATE,VELOCITY,DEGREES
ubArtemis,0,36,20,20,9,1,0,0
ubArtemis,1,45,18,20,9,1,6,2
ubArtemis,2,200,16,20,9,1,10,5
ubArtemis,3,65,14,19,9,1,15,3
ubArtemis,4,79,12,17,8,2,22,4
ubArtemis,5,100,10,16,8,3,30,2
ubArtemis,6,120,8,15,8,4,39,0