Highcharts JS在使用许多数据点进行更新时变得非常慢

时间:2015-05-12 02:59:49

标签: javascript csv highcharts

我有一个静态本地网页应该使用来自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

0 个答案:

没有答案