使用js / jquery从csv创建谷歌图表 [英] creating google chart from csv using js/jquery
本文介绍了使用js / jquery从csv创建谷歌图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这里是我从csv数据创建谷歌图表的代码。代码看起来不错，但仍然有一些错误。
代码看起来不错，但错误可能是由于一些jquery syntext。我很感激有人能帮助我
< html>
< head>
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.jstype =text / javascript>< / script>
< script src =http://jquery-csv.googlecode.com/files/jquery.csv-0.71.js>< / script>
< script type =text / javascript>
google.load（visualization，1，{packages：[corechart]}）;
google.setOnLoadCallback（drawChart）;
函数drawChart（）{
//获取CSV
$ .get（Chart1-data.csv，function（csvString）{
// transform将CSV字符串转换为二维数组
var arrayData = $ .csv.toArrays（csvString，{onParseValue：$ .csv.hooks.castToScalar}）;
alert（arrayData）;
//这个新的DataTable对象包含所有数据
var data = new google.visualization.arrayToDataTable（arrayData）;
//这个视图可以一次选择数据的一个子集
var view = new google.visualization.DataView（data）;
view.setColumns（[0,1]）;
//设置图表选项
var options = {
title：来自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.g etColumnRange（1）.max}，
legend：'none'
};
var chart = new google.visualization.PieChart（document.getElementById（'piechart'））;
chart.draw（data，options）;
}）;
}
< / script>
< / head>
< body>
< div id =piechartstyle =width：900px; height：500px;>< / div>
< / body>
< / html>
Chart1-data.csv
<$ p $类别，
A，34
B，23
C，14
D，57
E，18
其他，5
错误：
SyntaxError：missing）在参数列表
即脚本结束的行
更新：有
解决方案
}）; 不只是} ;
$。get（{
// code
}）;
而且您还缺少一个结束花括号来关闭您的函数。
Here is my code to create google chart from csv data. code look fine but still there is some error.
Code looks fine but error is may be due to some jquery syntext. I appreciate if someone can help me
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://jquery-csv.googlecode.com/files/jquery.csv-0.71.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// grab the CSV
$.get("Chart1-data.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
alert(arrayData);
// 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'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
});
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
Chart1-data.csv
Category,
A,34
B,23
C,14
D,57
E,18
Other,5
Error:
SyntaxError: missing ) after argument list
i.e. line where script ends
UPDATE: there was }); missing. Now no error but chart does not appear
解决方案
Your closing brackets for $.get( should be }); not just };
$.get({
// code
});
And you're also missing a closing curly bracket to close your function.
这篇关于使用js / jquery从csv创建谷歌图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
