使用 Google 图表从现有表格创建表格
Using google charts to create a table from an already existing table
尝试生成一个网页,该网页使用 API 获取一些数据(在本例中,一些数据来自跟踪 Twitter 上趋势主题标签的网站(并在 Google 图表中显示数据。
现在,我已经使用此 API 调用成功地通过条形图和饼图获取数据,但无法使表正常工作。
网页代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Top Tweets from Grand NCE</title>
<meta http-equiv="Content-Type" content="text/xhtml+xml; charset=UTF-8" />
<!-- Code to implement Google charts -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["table"]});
</script>
<!-- jQuery AJAX code & DrawChart code -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="PageThree.js"></script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px; margin:0 auto">Loading... </div>
</body>
</html>
JavaScript 代码:
//calls the API on page load
$(function() {
$.ajax({
type: "GET",
cache: false,
url: "http://academiamap.com/content.php?call=getTrendingTopics&startTime=2013-9-05%2000:00:00&endTime=2013-10-11%2000:00:00&seedUserList=GRAND_NCE",
success: function(data) {
data = eval(data);
chartData = new Array();
chartData[0] = ['Hashtag', 'Tweets'];
for (i=1; i<=data.length; i++) {
chartData[i] = new Array();
chartData[i] = [data[i-1]['tag'], parseInt(data[i-1]['count'])];
}
console.log(chartData);
drawChart1(chartData);
}
});
});
function drawChart1(dataArray) {
var data = google.visualization.arrayToDataTable(dataArray);
var table = new google.visualization.Table(document.getElementById('table_div')); //draw chart to "table_div"
table.draw(data, options);
}
我是使用Web API和javascript的新手,所以任何帮助都值得赞赏。
谢谢!
你几乎是对的;只有几件事你应该改变。 首先,您希望从 google 加载器的回调运行 AJAX 调用,而不是在页面加载时运行,因为不能保证可视化 API 在页面"就绪"事件触发时已完成加载。 其次,你应该将dataType
AJAX参数设置为"json" - 这将告诉jQuery将返回的数据解析为JSON而不是字符串;这避免了危险的 eval
语句,该语句将执行它在字符串中找到的任何 JavaScript。 您可以在其他地方进行一些改进,但这只是代码清理(将多行语句压缩为一行,删除冗余代码(。 以下是编写 AJAX 的一种方法:
$.ajax({
type: "GET",
cache: false,
url: "http://academiamap.com/content.php?call=getTrendingTopics&startTime=2013-9-05%2000:00:00&endTime=2013-10-11%2000:00:00&seedUserList=GRAND_NCE",
dataType: 'json',
success: function(json) {
var dataArray = [['Hashtag', 'Tweets']];
for (i = 0; i < json.length; i++) {
dataArray.push([json[i]['tag'], parseInt(json[i]['count'])]);
}
var data = google.visualization.arrayToDataTable(dataArray);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {});
}
});
下面是一个带有此代码示例的 jsfiddle,您可以使用它: http://jsfiddle.net/asgallant/3vbub/
相关文章:
- 使用外部数据创建仪表板(谷歌电子表格)-JavaScript
- 我正在创建一个聊天,但每次我发送消息时,它都不会让我再发送另一条消息,就像表格一样;不起作用
- 打印具有多页的表格时,再次创建页眉
- Magento创建自定义的职业表格,并从CMS页面调用
- 如何使用单击属性和工具提示动态创建表格单元格,该工具提示将超链接到页面
- 谷歌脚本创建了两个电子表格,而不是一个
- setHours()从电子表格导入的日期创建谷歌日历事件时出错-应用程序脚本
- 创建到电子表格创建错误中的文件的链接的脚本“;无法转换“”;
- 如何在表格中创建页面/选项卡-HTML5/angular
- Javascript根据屏幕宽度创建表格
- 如何发布从PHP创建的HTML表格数据
- 角度 ng 重复以创建表格问题
- 使用 Google 图表从现有表格创建表格
- 已检查函数 JavaScript 不起作用.当我单击任何形状时,它不会创建表格结构
- 创建具有未知标题的表格,具有角度.js
- 创建电子表格并用特定数据填充它们
- 使用控制器中对象的位置 x,y 创建一个动态网格或表格 - 引导程序,AngularJS
- 从谷歌电子表格创建表格:如何操作数据
- 如何基于HTML表格创建excel文件,并将其保存在项目目录中
- 使用谷歌脚本和电子表格创建时间触发器