使用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屋！
查看全文
