Javascript 如何将 Google Chart 与来自 csv 的数据一起使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14211636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Google Chart with data from a csv
提问by cpa
I have a csv file that looks like that:
我有一个看起来像这样的 csv 文件：
week,value1,value2
1,2,3
2,7,9
I would like to plot a stacked graph of it using google chart (week being my x (horizontal) values and values1 and values2 being the two set of y's). Unfortunately, I didn't find any easy way to do so. That probably relates to me being a complete noob in js.
我想使用谷歌图表绘制它的堆叠图（周是我的 x（水平）值，values1 和 values2 是两组 y 值）。不幸的是，我没有找到任何简单的方法来做到这一点。这可能与我是一个完整的 js 菜鸟有关。
Is there any simple way to do that?
有没有简单的方法可以做到这一点？
回答by Jon Page
The jquery-csv libraryprovides the ability to translate a string of csv into an array to be used by google.visualization.arrayToDataTable()(their example here). To make this work, add jquery.csv.js to your server (in the example below I assume it is in the same folder as your HTML) and link to it in your <head>. The following is a simple script you can add to your <head>to get started. I assume a scatter chart, but this process works for any of the charts here. You will also need a <div>with id="chart"for this to work.
所述的jquery-CSV库提供了CSV的字符串翻译成一个阵列，以通过所使用的能力google.visualization.arrayToDataTable()（例如它们的在这里）。要完成这项工作，请将 jquery.csv.js 添加到您的服务器（在下面的示例中，我假设它与您的 HTML 位于同一文件夹中）并在您的 .csv 文件中链接到它<head>。以下是一个简单的脚本，您可以添加到您的<head>开始使用。我假设一个散点图，但这个过程适用于这里的任何图表。您还需要一个<div>withid="chart"才能工作。
// load the visualization library from Google and set a listener
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
// this has to be a global function
function drawChart() {
// grab the CSV
$.get("example.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
// this view can select a subset of the data at a time
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);
// set chart options
var options = {
title: "A Chart from a CSV!",
hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
legend: 'none'
};
// create the chart object and draw it
var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
chart.draw(view, options);
});
}
回答by gurpreet bajwa
I have been searching for a while, and found the solution on a Google group discussion. https://groups.google.com/forum/#!topic/google-visualization-api/cnXYDr411tQ
我已经搜索了一段时间，并在 Google 小组讨论中找到了解决方案。 https://groups.google.com/forum/#!topic/google-visualization-api/cnXYDr411tQ
I have tried it, and it works!
我试过了，它有效！
In this case, we have to specify the header types of our csv file.
在这种情况下，我们必须指定 csv 文件的标题类型。
var queryOptions = {
csvColumns: ['number', 'number', 'number' /* Or whatever the columns in the CSV file are */],
csvHasHeader: true /* This should be false if your CSV file doesn't have a header */
}
/* csvUrl is the path to your csv */
var query = new google.visualization.Query(csvUrl, queryOptions);
query.send(handleQueryResponse);
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('your div'));
// Draw your chart with the data table here.
// chart.draw(view, queryOptions);
}
回答by Ross Anthony
What server side scripting language are you working in (php, asp)?
您使用的是哪种服务器端脚本语言（php、asp）？
One option could be to import the data from a spreadsheet saved in Google Drive, see herefor a PHP based example of saving and extracting data from Google Docs. This would then enable you to update the spreadsheet and the chart would automatically plot the new data.
一种选择是从保存在 Google 云端硬盘中的电子表格导入数据，请参阅此处了解从 Google Docs 保存和提取数据的基于 PHP 的示例。这将使您能够更新电子表格，并且图表将自动绘制新数据。
