使用 CSV 文件预处理 Highchart 数据

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>

这里：

您需要在页面中创建按钮 select CSV。
给这个按钮添加事件函数并传递"event"作为参数（示例中的loadFile(event)）
将此事件作为参数传递给加载函数（示例中为 FILE() 或 CSV() 或 XLSX()）。
处理结果数据并为 Highcharts 做好准备。

您可以运行使用下面的 Highcharts 工作片段。在准备图表之前，从代码段的末尾创建文件 demo.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>

Answer 2

据我了解，你可以使用这个场景

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

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

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

4) 初始化图表

使用 CSV 文件预处理 Highchart 数据

Preprocess Highchart data using CSV file

javascript

highcharts