使用 Google Sheet 代码示例的 Google 可视化折线图答案

【问题标题】：Google Visualization Line Chart using Google Sheet Code Example使用 Google Sheet 代码示例的 Google 可视化折线图
【发布时间】：2014-03-18 21:18:36
【问题描述】：

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

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

Here is my sample chart.

感谢您的帮助。

已编辑...

Here is my spreadsheet.

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

【问题讨论】：

标签： google-visualization google-sheets

【解决方案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});

您需要将 URL 中的 {spreadsheet key} 替换为您自己的电子表格密钥（例如：'http://docs.google.com/spreadsheet/tq?key=1234567890&gid=0'）并更改查询以从电子表格中选择适当的列。

在您页面的 HTML 中，您需要有一个与创建图表时使用的 ID 匹配的容器 div（本例中为 'chart_div'）：

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

【讨论】：

从昨晚到今天早上，我尝试了 100 种不同的组合。对于新手来说，确实没有任何有据可查的例子。我找到了一些关于如何选择范围的 Google 文档，但它们实际上并没有向您展示如何准确地构建 URL。我已经尝试过诸如注释掉函数中的查询行并添加 &range=A1:D4 但我仍然无法绘制任何东西。
我做错了什么。我尝试用我的工作表在 JSFiddle 上分叉你的一个示例，但它没有绘制？ jsfiddle.net/davelalande/DQQcS/2
我已经解决了我最初的问题。我的工作表在新的 Google 工作表上，但它不起作用。我在我的个人帐户上建立了一张测试表，它仍在使用旧表并绘制。我不介意在我的个人帐户中构建这些图表，如果您愿意为我解答一些问题，我相信我需要更多帮助。感谢 JSFiddle 顺便说一句。
这是我的 Google 表格。 docs.google.com/a/davelalande.com/spreadsheet/… 标签日期标签在我们接收和输入数据时打开。我认为这必须影响我的图表代码，因为当我回到这种技术时它现在没有绘制。我想让这个东西在我们得到它们时添加几个月的数据。
您有几个语法错误需要清理。这是你想要的吗？ jsfiddle.net/asgallant/DQQcS/14