使用 jQuery 读取 CSV 以传递给 Google Visualization API答案

【问题标题】：Using jQuery to read a CSV to pass to the Google Visualization API使用 jQuery 读取 CSV 以传递给 Google Visualization API
【发布时间】：2015-02-13 17:39:31
【问题描述】：

我正在尝试使用 Google Visualization API (https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart) 的 geochart 包从 CSV 中的数据创建地图。工作流程如下：

使用 jQuery 将 CSV 转换为数组
将数组转换为数据表
从数据表生成图表

当我将数据直接编码为数组时，我能够生成地图；但是我无法从 CSV 文件生成这个数组。

我的代码：

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>

<script type="text/javascript">

google.load('visualization', '1', {packages: ['geochart']});
google.setOnLoadCallback(drawVisualizations);

function drawVisualizations() {
$.get("map_2003.csv", function(csv_in) {
var map_2003_in = $.csv.toArrays(csv_in, {onParseValue: $.csv.hooks.castToScalar});
var map_2003_data = new google.visualization.arrayToDataTable(map_2003_in);
var map_2003_chart = new google.visualization.GeoChart(document.getElementById('map_2003_chart'));
map_2003_chart.draw(map_2003_data, {'width': '640px','height': '480px'});
});

}
</script>
</head>

<body>
<div id="map_2003_chart" style="width: 640px; height: 480px;"></div>

</body>
</html>

我的 CSV 文件如下所示：国家，生产，美国，7362，加拿大，3003，墨西哥，3795，阿根廷，900，巴西，1548

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery csv google-visualization jquery-csv

【解决方案1】：

假设您的 CSV 看起来像这样：

Country,Production
US,7362
Canada,3003
Mexico,3795
Argentina,900
Brazil,1548

我尝试了 jQuery-csv，它工作正常。因此，请确保 CSV 中的数据位于多行而不是仅一行。

【讨论】：

阿德里安，谢谢您的回复。是的，正如您所建议的，我的 CSV 位于多行，但仍然没有运气。我假设 CSV 和 HTML 文档应该在同一个目录中。可能与 CSV 文件的路径有关吗？
嗯，你可以在你做 GET 请求时检查服务器返回的内容。使用开发人员工具来帮助您。如果返回的是CSV就可以了，否则应该返回404。如果你使用浏览器的开发者工具或者Firebug也可以在JS代码中设置断点
看来问题在于我是直接从浏览器打开我的 html 文档，而不是在网络服务器上提供该文档。一旦我将文件上传到服务器，GET 请求就起作用了。再次感谢您帮助解决此问题。