Google visualization 谷歌可视化折线图使用谷歌工作表代码示例_Google Visualization_Google Sheets

Google visualization 谷歌可视化折线图使用谷歌工作表代码示例

google-visualization google-sheets

Google visualization 谷歌可视化折线图使用谷歌工作表代码示例,google-visualization,google-sheets,Google Visualization,Google Sheets,我正在寻找使用GoogleSheet作为源数据的示例代码，并使用GoogleVisualization制作一个相当简单的折线图我注意到新的谷歌表单在“共享图表”功能中没有包含脚本，它们提供了一个IFRAME，宽度/高度不起作用。所以，我想用谷歌的可视化技术来实现它谢谢你的帮助编辑这是我的HTML文件 <html> <head> <script type="text/javascript"> function drawCha

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

我注意到新的谷歌表单在“共享图表”功能中没有包含脚本，它们提供了一个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>


函数绘图图（）{
var query=new google.visualization.query（'http://docs.google.com/spreadsheet/tq?key=14MXilv-UHEAUXDZVB7QVCCMQYQKMWVQQOBEXBS04K&gid=0’；
setQuery（'selecta，B，C，D，E'）；
query.send（函数（响应）{
if（response.isError（））{
警报（'查询中的错误：'+response.getMessage（）+'+response.getDetailedMessage（））；
返回；
}
var data=response.getDataTable（）；
var chart=新的google.visualization.LineChart（document.querySelector（'LineChart'）；
图表绘制（数据、{
身高：400，
宽度：600
});
});
}
load（'visualization'，'1'，'{
软件包：['corechart']，
回调：绘图
});
来自电子表格的数据

它不吸引人。我在电子表格中尝试了各种选择，比如避开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\u div'

）：

从昨晚到今天早上，我尝试了100种不同的组合。对于新手来说，确实没有任何记录良好的例子。我找到了一些关于如何选择范围的谷歌文档，但它们实际上并没有告诉你如何准确地构建URL。我尝试过在函数中注释查询行和添加&range=A1:D4，但仍然无法绘制任何内容。我做错了什么。我试着用我的工作表在JSFIDLE上分叉您的一个示例，但它没有画出来？我已经解决了我最初的问题。我的工作表在新的谷歌工作表上，它不起作用。我在我的个人帐户上建立了一个测试表，它仍然在使用旧的测试表，并且可以绘图。我不介意在我的个人账户中建立这些图表，我相信如果你能帮我回答一些问题，我将需要更多的帮助。谢谢你的JSFIDLE顺便说一句。这是我的谷歌表。标签日期标签在我们接收和输入数据时打开。我想这一定会影响我的图表代码，因为当我回到这项技术时，它现在还没有画出来。我想让这个东西在我们获取数据时添加几个月的数据。您有几个语法错误需要清理。这是你想要的吗？

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