Question

我想使用CSV文件预处理数据。 加载页面后，请求浏览CSV文件，然后将其预处理到页面。 I'm using this chart。如果你能帮我解决这个问题，我将不胜感激。我只知道HTML + CSS基础知识，并且不知道如何将它们放在一起。

Answer 1

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

<强> 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>

下面：

您需要在页面中创建按钮以选择CSV。
将事件功能添加到此按钮并传递＆＃34; event＆＃34;作为参数（示例中为loadFile（event））
将此事件作为参数传递给加载函数（示例中的FILE（）或CSV（）或XLSX（））。
处理结果数据并为Highcharts做好准备。

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

（免责声明：我是Alasql图书馆的作者）

＆＃13;

         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
            });

             
             
             
             
             
             });
         }

＆＃13;

<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>

＆＃13;

Answer 2

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

1）运行网站并调用上传功能

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

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

4）初始化图表

使用CSV文件预处理Highchart数据

2 个答案: