如何在 highcharts 中加载超过 CSV 文件？答案

【问题标题】：How to load more than on CSV file in highcharts?如何在 highcharts 中加载超过 CSV 文件？
【发布时间】：2017-01-19 18:37:16
【问题描述】：

我正在尝试在 highcharts 中绘制图表，并结合来自 2 个 CSV 文件的变量。我根据这些示例进行了尝试：load multiple csv files (correct order) in one chart 和load data in highcharts from 2 different csv files 但我无法使其工作，网页中没有任何内容，它只是空白。如果您在 chrome 中看到错误，则抛出“Uncaught SyntaxError: Unexpected end of input”。

我真的很感激你能给我的任何帮助。这是我使用的代码和两个示例文件：

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>2 csv_v3</title>

    <!-- 1. Add these JavaScript inclusions in the head of your page -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/modules/data.js"></script>

    <!-- 2. Add the JavaScript to initialize the chart on document ready -->
    <script type="text/javascript">

$(document).ready(function() {

    var c = [];
    var d = []; 
    var e = [];
    var f = [];  


$.get('test1.csv', function (data1) {
    // Split the lines
    var lines = data1.split('\n');

// Iterate over the lines and add categories or series    
$.each(lines, function (lineNo, line) {
    var items = line.split(',');
            c.push(items[0]);
            d.push(parseFloat(items[1]));

      //    });     

$.get('test2.csv', function (data2) {
// Split the lines
var lines = data2.split('\n');

// Iterate over the lines and add categories or series    
$.each(lines, function (lineNo, line) {
   var items = line.split(',');
            e.push(items[2]);
            f.push(parseFloat(items[3]));   

        });       




var chart = new Highcharts.Chart(options);
            },'Text');

var options = {
              chart: {
                     renderTo: 'chart',
                     zoomType: 'xy',
                     },
              title: {
                     text: ''
                     },
              credits: {
                       enabled: true
                       },
              xAxis: {
                     title: {
                            text: 'Fecha'
                            },
                            categories: e
                            },
              yAxis: {
                     title: {
                            text: 'µg/m³'
                            }
                     },      
              series: [{
                       name: 'Puren',
                       data: d
                       }, {  
                       name: 'Ferroviario',
                       data: f    
                       }],

              };
      });
            </script>
 </head>
 <body>

 <!-- 3. Add the container -->
 <div id="chart" style="width: 900px; height: 500px; margin: 0 auto">         </div>

 </body>
 </html>

test1.csv

Date, Puren
18-07-16 0:00,152
18-07-16 2:00,175
18-07-16 4:00,188
18-07-16 6:00,209
18-07-16 8:00,241
18-07-16 10:00,254
18-07-16 12:00,262
18-07-16 14:00,267
18-07-16 16:00,290
18-07-16 18:00,324
18-07-16 20:00,341
18-07-16 22:00,343
19-07-16 0:00,344
19-07-16 2:00,346
19-07-16 4:00,348
19-07-16 6:00,353
19-07-16 8:00,362
19-07-16 10:00,374
19-07-16 12:00,375
19-07-16 14:00,373
19-07-16 16:00,376
19-07-16 18:00,379
19-07-16 20:00,376
19-07-16 22:00,367
21-07-16 0:00,347
21-07-16 2:00,322
21-07-16 4:00,306
21-07-16 6:00,278
21-07-16 8:00,237
21-07-16 10:00,216
21-07-16 12:00,204
21-07-16 14:00,198
21-07-16 16:00,174
21-07-16 18:00,140
21-07-16 20:00,123
21-07-16 22:00,120

test2.csv

Date, Ferroviario
19-07-16 0:00,172
19-07-16 2:00,171
19-07-16 4:00,169
19-07-16 6:00,169
19-07-16 8:00,169
19-07-16 10:00,165
19-07-16 12:00,154
19-07-16 14:00,121
19-07-16 16:00,82
19-07-16 18:00,67
19-07-16 20:00,63
19-07-16 22:00,59
21-07-16 0:00,56
21-07-16 2:00,53
21-07-16 4:00,50
21-07-16 6:00,44
21-07-16 8:00,32
21-07-16 10:00,24
21-07-16 12:00,21
21-07-16 14:00,20
21-07-16 16:00,17
21-07-16 18:00,14
21-07-16 20:00,13
21-07-16 22:00,12
22-07-16 0:00,11
22-07-16 2:00,11
22-07-16 4:00,11
22-07-16 6:00,9
22-07-16 8:00,9
22-07-16 10:00,9
22-07-16 12:00,9
22-07-16 14:00,9
22-07-16 16:00,9
22-07-16 18:00,9
22-07-16 20:00,9
22-07-16 22:00,9

【问题讨论】：

标签： javascript jquery csv highcharts

【解决方案1】：

最好的方法是创建自己的 CSV 解析器。示例如下：

Array.prototype.concatAll = function() {
  var results = [];
  this.forEach(function(subArray) {
    results.push.apply(results, subArray);
  });

  return results;
};

function csvToData(csv) {
  return csv.split('\n')
    .splice(1)
    .map((line) => line
      .split(',')
      .map((val, i) => {
        if (i === 0) {
          const a = val
            .split(' ')
            .map((s, i) => i === 0 ? s.split('-') : s.split(':')).concatAll().map(s => Number(s))
          return Date.UTC(2000 + a[2], a[1], a[0], a[3], a[4])
        } else {
          return Number(val)
        }
      })
    )
}

const test1_csv = `Date, Puren
18-07-16 0:00,152
18-07-16 2:00,175
18-07-16 4:00,188
18-07-16 6:00,209
18-07-16 8:00,241
18-07-16 10:00,254
18-07-16 12:00,262
18-07-16 14:00,267
18-07-16 16:00,290
18-07-16 18:00,324
18-07-16 20:00,341
18-07-16 22:00,343
19-07-16 0:00,344
19-07-16 2:00,346
19-07-16 4:00,348
19-07-16 6:00,353
19-07-16 8:00,362
19-07-16 10:00,374
19-07-16 12:00,375
19-07-16 14:00,373
19-07-16 16:00,376
19-07-16 18:00,379
19-07-16 20:00,376
19-07-16 22:00,367
21-07-16 0:00,347
21-07-16 2:00,322
21-07-16 4:00,306
21-07-16 6:00,278
21-07-16 8:00,237
21-07-16 10:00,216
21-07-16 12:00,204
21-07-16 14:00,198
21-07-16 16:00,174
21-07-16 18:00,140
21-07-16 20:00,123
21-07-16 22:00,120`
const test2_csv = `Date, Ferroviario
19-07-16 0:00,172
19-07-16 2:00,171
19-07-16 4:00,169
19-07-16 6:00,169
19-07-16 8:00,169
19-07-16 10:00,165
19-07-16 12:00,154
19-07-16 14:00,121
19-07-16 16:00,82
19-07-16 18:00,67
19-07-16 20:00,63
19-07-16 22:00,59
21-07-16 0:00,56
21-07-16 2:00,53
21-07-16 4:00,50
21-07-16 6:00,44
21-07-16 8:00,32
21-07-16 10:00,24
21-07-16 12:00,21
21-07-16 14:00,20
21-07-16 16:00,17
21-07-16 18:00,14
21-07-16 20:00,13
21-07-16 22:00,12
22-07-16 0:00,11
22-07-16 2:00,11
22-07-16 4:00,11
22-07-16 6:00,9
22-07-16 8:00,9
22-07-16 10:00,9
22-07-16 12:00,9
22-07-16 14:00,9
22-07-16 16:00,9
22-07-16 18:00,9
22-07-16 20:00,9
22-07-16 22:00,9`
const data1 = csvToData(test1_csv)
const data2 = csvToData(test2_csv)
const mergedData = [...data1, ...data2]
const options = {
  xAxis: {
    type: 'datetime'
  },
  series: [{
    data: mergedData,
    type: 'column'
  }]
}
const chart = Highcharts.chart('container', options);

console.log(data1, data2, mergedData)

现场示例： https://jsfiddle.net/a9zocb40/

[编辑]实时数据

const options = {
  chart: {
    events: {
      load: function() {
        const chart = this
        const data1 = csvToData(test1_csv)
        const data2 = csvToData(test2_csv)
        const mergedData = [...data1, ...data2].sort((a, b) => a[0] - b[0])
        console.log(data1, data2, mergedData)
        chart.series[0].setData(mergedData)
      }
    }
  },
  xAxis: {
    type: 'datetime'
  },
  series: [{
    data: [],
    type: 'column'
  }]
}

const chart = Highcharts.chart('container', options);

现场示例： https://jsfiddle.net/g8ocqwwr/

【讨论】：

感谢您的帮助，但我需要它来读取 csv 文件而不将系列值放入脚本中，因为最终它将被自动化并且 csv 将不断变化