如何通过 Google Chart API 使用 csv 文件？

Question

我有一个 csv 文件：

\n\n

站点,Janvier,F\xc3\xa9vrier,火星,艾薇儿,麦,Juin,Juillet,Ao\xc3\xbbt,9 月,10 月,11 月,D\xc3\xa9cembre\nCITROEN VILLEFRANCHE CARROSSERIE,0,0,14,0, 18,21,0,0,0,0,0,0\n雪铁龙自由城 ,240,237,230,264,219,285,219,130​​,4,0,0,0\n日产自由城 ,174,202,215,181,196,244,203,107,10,1,0,0

\n\n

我想在柱形图中查看其数据。

\n\n

但我不知道如何使用 API 读取 csv 的数据。\n以下是使用 API 的柱形图示例：

\n\n

google.charts.load("current", {packages:[\'corechart\']});\ngoogle.charts.setOnLoadCallback(drawChart);\nfunction drawChart() {\n  var data = google.visualization.arrayToDataTable([\n    ["Element", "Density", { role: "style" } ],\n    ["Copper", 8.94, "#b87333"],\n    ["Silver", 10.49, "silver"],\n    ["Gold", 19.30, "gold"],\n    ["Platinum", 21.45, "color: #e5e4e2"]\n  ]);\n\n  var view = new google.visualization.DataView(data);\n  view.setColumns([0, 1,\n                   { calc: "stringify",\n                     sourceColumn: 1,\n                     type: "string",\n                     role: "annotation" },\n                   2]);\n\n  var options = {\n    title: "Density of Precious Metals, in g/cm^3",\n    width: 600,\n    height: 400,\n    bar: {groupWidth: "95%"},\n    legend: { position: "none" },\n  };\n  var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));\n  chart.draw(view, options);\n

\n\n

如何更改数据加载以使用 csv 文件？

\n

Answer 1

你可以用它jquery.csv来解析csv

\n\n

google.charts.load(\'current\', {\n  callback: function () {\n    $.get("file_name.csv", function(csvString) {\n      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});\n\n      var data = new google.visualization.arrayToDataTable(arrayData);\n\n      var chart = new google.visualization.ColumnChart(document.getElementById(\'chart_div\'));\n      chart.draw(data);\n    });\n  },\n  packages: [\'corechart\']\n});\n

\n\n\n\n

请参阅以下包含静态数据的工作片段

\n\n

\r\n

\r\n

google.charts.load(\'current\', {\n  callback: function () {\n    $.get("file_name.csv", function(csvString) {\n      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});\n\n      var data = new google.visualization.arrayToDataTable(arrayData);\n\n      var chart = new google.visualization.ColumnChart(document.getElementById(\'chart_div\'));\n      chart.draw(data);\n    });\n  },\n  packages: [\'corechart\']\n});\n

\r\n

google.charts.load(\'current\', {\r\n  callback: function () {\r\n    csvString = \'Site,Janvier,F\xc3\xa9vrier,Mars,Avril,Mai,Juin,Juillet,Ao\xc3\xbbt,Septembre,Octobre,Novembre,D\xc3\xa9cembre\\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\';\r\n\r\n    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});\r\n\r\n    var data = new google.visualization.arrayToDataTable(arrayData);\r\n    \r\n    var chart = new google.visualization.ColumnChart(document.getElementById(\'chart_div\'));\r\n    chart.draw(data);\r\n  },\r\n  packages: [\'corechart\']\r\n});

\r\n

\r\n

\r\n

\n