javascript - 使用 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>

这里:

1. 您需要在页面中创建按钮来选择 CSV。
2. 向此按钮添加事件函数，并将“event”作为参数传递(示例中为 loadFile(event))
3. 将此事件作为参数传递给加载函数(示例中为 FILE() 或 CSV() 或 XLSX())。
4. 处理结果数据并为 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>