我有一个 csv 文件:
网站、Janvier、Février、火星、艾薇儿、Mai、Juin、Juillet、八月、九月、十月、十一月、十二月 雪铁龙自由城卡罗斯系列,0,0,14,0,18,21,0,0,0,0,0,0 雪铁龙自由城,240,237,230,264,219,285,219,130,4,0,0,0 日产自由城,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 文件?
最佳答案
您可以使用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>
关于javascript - 如何通过 Google Chart API 使用 csv 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59313622/