使用Google Sheet的Google可视化折线图代码示例 [英] Google Visualization Line Chart using Google Sheet Code Example
本文介绍了使用Google Sheet的Google可视化折线图代码示例的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在寻找使用Google工作表作为源数据并使用Google Visualization制作相当简单的折线图的示例代码。
我注意到新的Google Sheet没有在"共享图表"功能中包含脚本,它们提供了一个IFRAME,并且宽度/高度不起作用。因此,我希望通过谷歌可视化来做到这一点。
感谢您的帮助。
已编辑.
这是我的HTML文件。
<html>
<head>
<script type="text/javascript">
function drawChart() {
var query = new google.visualization.Query('http://docs.google.com/spreadsheet/tq?key=14MXilv-uhEAUxDzVB7qVCCmQYqkmWvqqaBOXeBsS04k&gid=0');
query.setQuery('SELECT A, B, C, D, E');
query.send(function (response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.LineChart(document.querySelector('linechart'));
chart.draw(data, {
height: 400,
width: 600
});
});
}
google.load('visualization', '1', {
packages: ['corechart'],
callback: drawChart
});
</script>
<title>Data from a Spreadsheet</title>
</head>
<body>
<span id="linechart"></span>
</body>
</html>
它画不出来。我已经尝试了电子表格中的各种选择,比如避开A栏,不行。我做错了什么?
推荐答案
以下是一些示例代码,可帮助您入门:
function drawChart() {
var query = new google.visualization.Query('http://docs.google.com/spreadsheet/tq?key={spreadsheet key}&gid=0');
query.setQuery('SELECT A, B, C');
query.send(function (response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600
});
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
您需要将URL中的{spreadsheet key}
替换为您自己的电子表格键(例如:'http://docs.google.com/spreadsheet/tq?key=1234567890&gid=0'
),并更改查询以从您的电子表格中选择适当的列。
在页面的HTML中,您需要有一个与创建图表时使用的ID匹配的容器div(在本例中为'chart_div'
):
<div id="chart_div"></div>
这篇关于使用Google Sheet的Google可视化折线图代码示例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文