Question

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

我注意到新的Google表格在“共享图表”功能中不包含脚本，它们提供IFRAME，宽度/高度不起作用。所以，我希望通过Google可视化实现这一目标。

感谢您的帮助。

...编辑

这是我的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，不去。我做错了什么？

Answer 1

这里有一些示例代码可以帮助您入门：

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});

您需要使用自己的电子表格键替换网址中的{spreadsheet key}（例如：'http://docs.google.com/spreadsheet/tq?key=1234567890&gid=0'），然后更改查询以从电子表格中选择相应的列。

在您网页的HTML中，您需要一个与创建图表时使用的ID匹配的容器div（在这种情况下为'chart_div'）：

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

使用Google表格代码示例的Google Visualization折线图

1 个答案: