谷歌可视化折线图使用谷歌表格代码示例

我正在寻找使用Google Sheet作为源数据的示例代码，并使用Google Visualization制作相当简单的折线图。

我注意到，新的谷歌表格不包括一个脚本在"分享图表"功能，他们提供了一个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，你需要有一个容器div匹配创建图表时使用的ID ('chart_div'在这种情况下):

<div id="chart_div"></div>

相关内容

最新更新

热门标签：