使用CSV文件預處理Highchart數據

Question

我想使用CSV文件預處理數據。 頁面加載后，要求瀏覽CSV文件，然后將其預處理到頁面。 我正在使用這張圖表 。 如果您能幫助我解決這個問題，我將不勝感激。 我只知道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. 將事件函數添加到此按鈕，並將“事件”作為參數傳遞（示例中的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> 

Answer 2

據我了解，您可以使用這種情況

1）運行網站並調用上傳功能

2）將文件保存在服務器上

3）通過$ .get（）加載csv並解析值以創建系列對象

4）初始化圖