如何在谷歌圖表API中使用csv文件？

Question

我有一個CSV文件：

網站，讓維耶，FEVRIER，火星，艾薇兒，麥，朱安，JUILLET，AOUT，Septembre，OCTOBRE，十一月四日，Décembre CITROEN VILLEFRANCHE CARROSSERIE，0,0,14， 0,18,21,0,0,0,0,0,0 CITROEN VILLEFRANCHE，240,237,230,264,219,285,219,130​​,4,0,0,0 NISSAN VILLEFRANCHE，174,202,215,181,196,244,203,107,10,1,0,0

我想在列圖中查看其數據。

但我不知道如何用API讀取csv的數據。 這裏是與API的柱圖的一個例子：

google.charts.load("current", {packages:['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 
function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
    ["Element", "Density", { role: "style" } ], 
    ["Copper", 8.94, "#b87333"], 
    ["Silver", 10.49, "silver"], 
    ["Gold", 19.30, "gold"], 
    ["Platinum", 21.45, "color: #e5e4e2"] 
    ]); 

    var view = new google.visualization.DataView(data); 
    view.setColumns([0, 1, 
        { calc: "stringify", 
        sourceColumn: 1, 
        type: "string", 
        role: "annotation" }, 
        2]); 

    var options = { 
    title: "Density of Precious Metals, in g/cm^3", 
    width: 600, 
    height: 400, 
    bar: {groupWidth: "95%"}, 
    legend: { position: "none" }, 
    }; 
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); 
    chart.draw(view, options); 

如何改變使用CSV文件的數據負載？

Answer 1

可以使用jquery.csv解析CSV

google.charts.load('current', { 
    callback: function() { 
    $.get("file_name.csv", function(csvString) { 
     var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}); 

     var data = new google.visualization.arrayToDataTable(arrayData); 

     var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
     chart.draw(data); 
    }); 
    }, 
    packages: ['corechart'] 
}); 

---

看到下面的工作片段與靜態數據

google.charts.load('current', { 
 
    callback: function() { 
 
    csvString = 'Site,Janvier,Février,Mars,Avril,Mai,Juin,Juillet,Août,Septembre,Octobre,Novembre,Décembre\nCITROEN VILLEFRANCHE CARROSSERIE,0,0,14,0,18,21,0,0,0,0,0,0\nCITROEN VILLEFRANCHE ,240,237,230,264,219,285,219,130,4,0,0,0\nNISSAN VILLEFRANCHE ,174,202,215,181,196,244,203,107,10,1,0,0'; 
 

 
    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}); 
 

 
    var data = new google.visualization.arrayToDataTable(arrayData); 
 
    
 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    chart.draw(data); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script> 
 
<div id="chart_div"></div>

Answer 2

webpack爲模塊管理提供了很好的功能。 包含資產管理，您可以使用csv-loader來導入您的csv和解析。

webpack.config.js

var path = require('path'); 

module.exports = { 
    entry: './src/yourscript.js', 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: '[name].bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.css$/, 
     use: ['style-loader', 'css-loader'] 
     }, 
     { 
     test: /\.(csv|tsv)$/, 
     use: [ 
      'csv-loader' 
     ] 
     }, 
     ] 
    } 
}; 

如果你在webpack第一次。

• $ sudo npm install -g webpack
• $ npm install webpack --save-dev
• $ cat>webpack.config.js
• $ npm install style-loader css-loader csv-loader --save-dev
• 將代碼複製並粘貼到webpack.config.js
• $ webpack

/src/yourscript.js

import data form "./asset/yourcsv.csv"; 

component =()=>{ 
    console.log(data); 
}