如何将 csv 文件与谷歌图表 API 一起使用？答案

【问题标题】：How to use a csv file with the google chart API?如何将 csv 文件与谷歌图表 API 一起使用？
【发布时间】：2017-07-03 15:06:49
【问题描述】：

我有一个 csv 文件：

Site,Janvier,Février,Mars,Avril,Mai,Juin,Juillet,Août,Septembre,Octobre,Novembre,Décembre 雪铁龙 VILLEFRANCHE CARROSSERIE,0,0,14,0,18,21,0,0,0,0,0,0 雪铁龙 VILLEFRANCHE ,240,237,230,264,219,285,219,130,4,0,0,0 日产 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 文件？

【问题讨论】：

标签： javascript html csv charts google-visualization

【解决方案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']
});

查看以下使用静态数据的工作 sn-p

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>

【讨论】：

【解决方案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);
}

【讨论】：