如何使用csv文件將后加載事件添加到highchart圖

Question

我正在預處理CSV文件以用作圖表中的數據，如以下Highcharts文檔中所述：

http://www.highcharts.com/docs/working-with-data/custom-preprocessing#1

但我也希望它像下面的highcharts示例一樣動態更新：

http://www.highcharts.com/demo/dynamic-update

問題是我不希望完成后動態更新的數據是隨機的，因為我希望它從我的csv文件的其余部分中提取。

我認為最好的做法是將事件添加到$ .get（...）函數下，就像我的系列一樣，但是不會加載。

script(type='text/javascript').
    $(document).ready(function() {
        //chart without data
        var options = {
            chart: {
                renderTo: 'chartcon',
                type: 'spline',
                animation: Highcharts.svg,
                marginRight: 10,
                events: {
                    load: []
                }
            },
            title: {
                text: 'Live random data'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            series: []
        };

        $.get('EEC_Output.csv', function(csv){
            var lines = csv.split('\n');
            var series = {
                data: []
            };

            var time = (new Date()).getTime();
            var wait = 1000;
            $.each(lines, function(lineNo, line){
                var values = line.split(',');
                $.each(values, function(valueNo, value) {
                    if (valueNo == 2   && lineNo < 20 ) {
                        series.data.push({
                            x: time + (lineNo-20) * 1000,
                            y: parseFloat(value)
                        });
                    }
                });
            });
            options.series.push(series);
            var load = {
                    function(){
                    var series_ = options.series[0];
                    setInterval(function(){
                        var x = (new Date()).getTime();
                        var y = 40;
                        series_.addPoint([x,y],true,true);
                    },1000);
                }
            };

            options.chart.events.load.push(load);

            var chart = new Highcharts.Chart(options);

        });

但是，在原始的20行加載后，沒有任何反應。

Answer 1

解析完所有數據后，您可以使用空序列（或某些部分，如果需要的話）構建圖表，然后在加載事件中創建一個setInterval函數，該函數將從解析的數據數組中添加新點。

示例： http ： //jsfiddle.net/cmk49spq/

  $.get('data.csv', function(data) {
    // Split the lines
    var lines = data.split('\n');
    var series = [],
      dynamic = [],
      chart;

    // Iterate over the lines and add categories or series
    $.each(lines, function(lineNo, line) {
      var items = line.split(';');

      // header line containes categories
      if (lineNo === 0) {
        $.each(items, function(itemNo, item) {
          if (itemNo !== 0) {
            series[itemNo - 1] = {
              name: item,
              data: []
            };
            dynamic[itemNo - 1] = {
              data: []
            };
          }
          //if (itemNo > 0) options.xAxis.categories.push(item);
        });
        options.series = series;
        // Create the chart
        chart = new Highcharts.Chart(options);
      }

      // the rest of the lines contain data with their name in the first 
      // position
      else {
        var date = 0;
        $.each(items, function(itemNo, item) {
          if (itemNo === 0) {
            date = Date.parse(item);
          } else {
            //series[itemNo - 1].data.push({
            dynamic[itemNo - 1].data.push({
              x: date,
              y: parseFloat(item)
            });
          }
        });
      }
    });
    var len = dynamic.length,
      iter = 0,
      iterLen = dynamic[0].data.length;

    var addingDataDynamically = setInterval(function() {
      if (iter < iterLen) {
        for (var k = 0; k < len; k++) {
          chart.series[k].addPoint(dynamic[k].data[iter], false);
        }
        chart.redraw();
        iter++;
      } else {
        clearInterval(addingDataDynamically);
      }
    }, 1000)
  });

 $(document).ready(function() { var options = { chart: { renderTo: 'container', type: 'line' }, xAxis: { type: 'datetime' } }; $.get('data.csv', function(data) { // Split the lines var lines = data.split('\\n'); var series = [], dynamic = [], chart; // Iterate over the lines and add categories or series $.each(lines, function(lineNo, line) { var items = line.split(';'); // header line containes categories if (lineNo === 0) { $.each(items, function(itemNo, item) { if (itemNo !== 0) { series[itemNo - 1] = { name: item, data: [] }; dynamic[itemNo - 1] = { data: [] }; } //if (itemNo > 0) options.xAxis.categories.push(item); }); options.series = series; // Create the chart chart = new Highcharts.Chart(options); } // the rest of the lines contain data with their name in the first // position else { var date = 0; $.each(items, function(itemNo, item) { if (itemNo === 0) { date = Date.parse(item); } else { //series[itemNo - 1].data.push({ dynamic[itemNo - 1].data.push({ x: date, y: parseFloat(item) }); } }); } }); var len = dynamic.length, iter = 0, iterLen = dynamic[0].data.length; var addingDataDynamically = setInterval(function() { if (iter < iterLen) { for (var k = 0; k < len; k++) { chart.series[k].addPoint(dynamic[k].data[iter], false); } chart.redraw(); iter++; } else { clearInterval(addingDataDynamically); } }, 1000) }); }); // Emulate get $.get = function(id, fn) { fn(document.getElementById(id).innerHTML); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <div id="container" style="height: 300px"></div> <pre id="data.csv" style="display: none">Date;Input1;Input2;Input3;Input4 07.11.2014 01:20:28;0.15;0.16;0.19;0.15 07.11.2014 01:20:35;0.14;0.15;0.16;0.14 07.11.2014 01:20:36;0.15;0.14;0.19;0.17 07.11.2014 01:20:45;0.24;0.15;0.13;0.14 07.11.2014 01:20:56;0.15;0.24;0.11;0.14 </pre>