使用 CSV 文件预处理高图表数据

Preprocess Highchart data using CSV file

本文关键字：高图表 数据 预处理 文件 CSV 使用      更新时间：2023-09-26

我想使用CSV文件预处理数据。加载页面后，要求浏览 CSV 文件，然后将其预处理到页面。我正在使用这个图表。如果您帮助我度过难关，我将不胜感激。我只知道HTML + CSS基础知识，不知道如何把它放在一起。

如果桌面上有数据，则可以尝试以下解决方案作为基础：

1. 使用 jQuery-csv 的解决方案.js

您可以使用不同的 CSV 解析库来执行此操作。为此，请向页面添加控件并添加 loadFile（） 函数，如下例所示：

<input id="readfile" type="file" onchange="loadFile(event)"/>
<script>
function loadFile(event) {
        var files = event.target.files;
        var reader = new FileReader();
        var name = files[0].name;
        reader.onload = function(e) {
            var data = e.target.result;
            processCSV(data);
        };
        reader.readAsText(files[0]);    
};
function processCSV(data) {
     // 1. Convert CSV text from "data" parameter to JSON
      var arr = $.csv.toArray(data);
     // 2. Prepare chart from "arr" array
};
</script>

2. 使用 Alasql 的解决方案.js

使用Alasql.js库的替代解决方案（它包括文件上传和CSV解析功能）：

<input id="readfile" type="file" onchange="loadFile(event)"/>
<script>
function loadFile(event) {
    alasql('SELECT * FROM FILE(?,{headers:true})', [event],function(data){
         // Process your data
    });
);
</script>

这里：

  1. 您需要在页面中创建按钮以选择 CSV。
  2. 向此按钮添加事件函数并将"事件"作为参数传递（示例中的loadFile（event）
  3. 将此事件作为参数传递给加载函数（示例中的 FILE（） 或 CSV（） 或 XLSX（）。
  4. 处理结果数据并为高图表做好准备。

您可以使用下面的Highcharts运行工作片段。在准备图表之前.csv从代码段的末尾（手动）创建文件演示并将其保存到桌面。

（免责声明：我是 Alasql 库的作者）

         function loadFile(event) {
             alasql('SELECT * FROM FILE(?,{headers:true})',[event],function(data){
               // Process your data here
               var myseries = [];
                Object.keys(data[0]).forEach(function(key){
                    var ds = data.map(function(d){ return +d[key];});
                   myseries.push({name:key,data:ds});
                });
               // Prepare data for Hightcharts.js
                $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: myseries
            });
             
             
             
             
             
             });
         }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://alasql.org/console/alasql.min.js"></script>
     <script src="http://code.highcharts.com/highcharts.js"></script>     
     <p>Select CSV file to read</p>
     <input id="readfile" type="file" onchange="loadFile(event)"/>
     <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<h3>Sample file demo.csv</h3>
<pre>
Paris, London
111,211
321,411
512,611
710,811
1121,222
300,422
500,622
700,822
100,222
300,422
511,622
711,811
</pre>

据我了解，您可以使用此方案

1）运行网站和呼叫上传功能

2） 将文件保存在您的服务器上

3） 通过 $.get（） 加载 CSV 并解析值以创建系列对象

4） 初始化图表

相关文章：