filereader - CSV 到用户自定义报告 (Dygraph)

Question

我正在尝试根据从 Codesys PLC 获得的数据创建一个好看的报告。我将创建 HTML 页面，您可以在其中放置包含数据的文件，然后将其解析为特定字段。

Codesys PLC 写入以下格式的 CSV 文件：

• 在该过程的一些一般数据部分下
• 在我将使用 Dygraph 可视化的趋势下。

当 CSV 文件仅包含 GRAPH 数据（直接从标题行开始）时，我测试了 Dygraph。我创建了新的 dygraph 并通过 FileReader 将 CSV 作为文件提供给它。

现在我正在努力如何处理该部分。我可以逐行阅读它，但是我需要再次将部分作为文件处理以将其放入 Dygraph。

所以主要问题是如何从特定位置读取文件作为 CSV 文件？

我测试了一些代码，我收集了一些示例。对此我很抱歉，我知道这不好，但我是 jscript 和网络编程的新手。

但它适用于图形显示。

CSV 文件：

REPORT
StartDate, 2020/02/05 12:26:53
EndDateDate, 2020/02/06 12:26:53
Status, Finished
AverageTemperature, 123.45
AveragePressure, 0.0567

图时间、温度、压力2020/02/05
12:26:53,54.53312,0.5453312
2020/02/05 12:26:55,40.7445,0.1613245 2020/02/05
12:26:56,7.167816,0.035201
02/05 12:26:57,78.76286,0.03732681
2020/02/05 12:26:58,22.20001,0.06941796
2020/02/05 12:27:00,34.79605,0.7027158

<div id="graph"></div>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<table id="outputTable">    
</table>

<script>

  var table = document.getElementById('outputTable');

  function parseCSV(text, lineTerminator, cellTerminator) {

g = new Dygraph(
document.getElementById("graph"),
text,
{
        series: {
          'temperature': {
            axis: 'y'
          },
          'pressure': {
            axis: 'y2'
          },
        },
        axes: {
          y: {
            labelsKMB: true,
            independentTicks: true
          },
          y2: {
            // set axis-related properties here
            labelsKMB: true,
            independentTicks: true
          }
        },
        ylabel: 'Primary y-axis',
        y2label: 'Secondary y-axis',

});


    //break the lines apart
    var lines = text.split(lineTerminator);

    for(var j = 0; j<lines.length; j++){

        if(lines[j] != ""){

            //create a table row 
            var tableRow = table.appendChild(document.createElement('tr'));

            //split the rows at the cellTerminator character
            var information = lines[j].split(cellTerminator);

            for(var k = 0; k < information.length; k++){
                //append the cell to the row
                var cell = tableRow.appendChild(document.createElement('td'));
                cell.appendChild(document.createTextNode(information[k]));

            }

        }

    }

  }

  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and populate the 'outputTable' with the data
    for (var i = 0, f; f = files[i]; i++) {

      var reader = new FileReader();



      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {

          //call the parse function with the proper line terminator and cell terminator
          parseCSV(e.target.result, '\n', ';');

        };
      })(f);

      // Read the file as text
      reader.readAsText(f);

    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

标签： filereaderjscript