如何使用 csv 文件将加载后事件添加到高图图表

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>