Question

我已经创建了一组Google测量仪，可以从Google表格中提取数据。工作表有两页，第一页包含最初加载到仪表中的值，第二页包含提供每个仪表更改值的数据。底部的按钮允许仪表在两个值之间来回切换。

我只能使用chartWrapper类和.setDataSourceUrl方法以这种方式从Google表格中制作量表。

我想在仪表下面添加一个数据表，但无法同时绘制两个chartWrappers。我可以画出一个或另一个，但不是我看过并且找到了其他类似问题的人，并尝试了所描述的修复，但无济于事。我有独特的ID。每个图表都有一个div。我调用一个函数，然后调用OnLoad分别绘制每个图表的各个函数。我不知道还有什么可以尝试的，感觉就像猜测这一点。任何帮助将不胜感激。非常感谢你的关注！

我现在还不关心按钮，我只想让两个图表在初始负载上绘制这是html：

<html>
  <head>
    <title>
      Animated Gauge fed by Sheet
    </title>
    <!-- One script tag loads all the required libraries! Do not specify any chart types in the autoload statement. -->
    <script type="text/javascript"
        src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1"}]}'>
    </script>
    <script type="text/javascript">
        google.setOnLoadCallback(drawVisualization);
      //google.setOnLoadCallback(drawVisualization); 
      //google.setOnLoadCallback(drawTable);

      //global variable manipulatedby the following 3 functions.
      var wrap = new google.visualization.ChartWrapper();
      var myTable = new google.visualization.ChartWrapper();      

      function drawGauge() {
        // Define the chart using setters:
        //var wrap = new google.visualization.ChartWrapper();
        wrap.setChartType('Gauge');
        wrap.setDataSourceUrl('https://docs.google.com/a/csd99.org/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=drive_web\n\&gid=0');
        wrap.setContainerId('gauge_div');
        wrap.setOptions({
                    'min': 0,
                    'max': 35,
                    //greenFrom:0,
                    //greenTo:10,
                    'yellowFrom': 15,
                    'yellowTo': 20,
                    'redFrom': 20,
                    'redTo': 30,
                    'greenColor': 999900,
                    'yellowColor': '#FFFF99',
                    'redColor': 660066,
                    'minorTicks': 10,
                    'animation':{
                       'duration': 800,
                       'easing': 'out'
                    }
                    //width of container determines whether gauges show up on same row or multiple rows
                    //'width':700
                  });
        //alert('hello');
        var elem = document.getElementById('gauge_div');
        elem.style.opacity = 0.6;
        wrap.draw();
      }  

      function drawTable(){
        myTable.setChartType('Table');        
        myTable.setContainerId('table_div');
        myTable.setDataSourceUrl('https://docs.google.com/a/csd99.org/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=drive_web\n\#gid=0&headers=1');
        myTable.setOptions({'width':200});
        //alert('hello');
        myTable.draw();
    }

      function changeValues()  {
        // Define the chart using setters:
        //var wrap = new google.visualization.ChartWrapper();
        wrap.setChartType('Gauge');
        wrap.setDataSourceUrl('https://docs.google.com/a/csd99.org/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=drive_web\n\\n\&gid=2');
        wrap.setContainerId('gauge_div');
        wrap.setOptions({
                    'min': 0,
                    'max': 35,
                    //greenFrom:0,
                    //greenTo:10,
                    'yellowFrom': 15,
                    'yellowTo': 20,
                    'redFrom': 20,
                    'redTo': 30,
                    'greenColor': 999900,
                    'yellowColor': '#FFFF99',
                    'redColor': 660066,
                    'minorTicks': 10,
                    'animation':{
                       'duration': 800,
                       'easing': 'out'
                    }

                    //width of container determines whether gauges show up on same row or multiple rows
                    //'width':700
                  });
        //alert('hello');
        var elem = document.getElementById('gauge_div');
        elem.style.opacity = 1.0;
        wrap.draw();  
      }

      function changeValuesBack()  {
        // Define the chart using setters:
        //var wrap = new google.visualization.ChartWrapper();
        wrap.setChartType('Gauge');
        wrap.setDataSourceUrl('https://docs.google.com/a/csd99.org/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=drive_web\n\\n\&gid=0');
        wrap.setContainerId('gauge_div');
        wrap.setOptions({
                    'min': 0,
                    'max': 35,
                    //greenFrom:0,
                    //greenTo:10,
                    'yellowFrom': 15,
                    'yellowTo': 20,
                    'redFrom': 20,
                    'redTo': 30,
                    'greenColor': 999900,
                    'yellowColor': '#FFFF99',
                    'redColor': 660066,
                    'minorTicks': 10,
                    'animation':{
                       'duration': 800,
                       'easing': 'out'
                    }

                    //width of container determines whether gauges show up on same row or multiple rows
                    //'width':700
                  });
        //alert('hello');
        var elem = document.getElementById('gauge_div');
        elem.style.opacity = 0.6;
        wrap.draw();  
      }

      function drawVisualization(){
          drawGauge();
          drawTable();
      }

    </script>
  </head>
  <body>
    <h3>Data for gauges located in this sheet on worksheets 1 and 2</h3>
    <h3><a href = 'https://docs.google.com/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=sharing'> here.</a></h3>
    <div id='gauge_div' style='height: 150px; width: 500px;'></div>
    <div id='table_div'></div>
    <input type="button" style="opacity:0.6" value="Last Month" onclick="changeValuesBack()"/>
    <input type="button" value="This Month" onclick="changeValues()"/>    
  </body>
 </html>

Answer 1

调用drawTable()会出现错误消息：Uncaught ReferenceError: Sw is not defined

似乎未使用自动加载加载table包。我添加了以下行来加载包：

    ...
<script type="text/javascript">
    google.load('visualization', '1.0', {'packages':['gauge', 'table']});

    google.setOnLoadCallback(drawVisualization);
    ...

并得到以下内容：

enter image description here

Answer 2

您的计量表和表格ChartWrappers与页面加载同步创建，而不是对来自Google加载程序的回调的响应，因此如果代码在API加载之前运行，您可能会遇到一些问题。您还有许多不必要的代码重复和重新查询数据源。获得数据副本后，应该对其进行缓存，以便不必再次查询数据源，但如果使用ChartWrappers的dataSourceUrl属性，则无法执行此操作。这是一个基于代码的示例，它缓存每个数据请求，因此您不必进行多个冗余查询：

[JavaScript的]

function drawCharts () {
    var query1 = new google.visualization.Query('https://docs.google.com/a/csd99.org/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=drive_web\n\#gid=0&headers=1');
    query1.send(function (response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }

        var data1 = response.getDataTable(), data2 = null;
        var chart = new google.visualization.ChartWrapper({
            chartType: 'Gauge',
            containerId: 'gauge_div',
            dataTable: data1,
            options: {
                min: 0,
                max: 35,
                yellowFrom: 15,
                yellowTo: 20,
                redFrom: 20,
                redTo: 30,
                greenColor: 999900,
                yellowColor: '#FFFF99',
                redColor: 660066,
                minorTicks: 10,
                animation: {
                    duration: 800,
                    easing: 'out'
                }
            }
        });
        var table = new google.visualization.ChartWrapper({
            chartType: 'Table',
            containerId: 'table_div',
            dataTable: data1,
            options: {
                width: 200
            }
        });

        chart.draw();
        table.draw();

        var lastMonth = document.querySelector('#lastMonth');
        var thisMonth = document.querySelector('#thisMonth');

        function drawLastMonth () {
            chart.setDataTable(data1);
            table.setDataTable(data1);
            chart.draw();
            table.draw();
            lastMonth.disabled = 'disabled';
            thisMonth.disabled = null;
        }
        function drawThisMonth () {
            if (data2 != null) {
                chart.setDataTable(data2);
                table.setDataTable(data2);
                chart.draw();
                table.draw();
                lastMonth.disabled = null;
                thisMonth.disabled = 'disabled';
            }
            else {
                var query2 = new google.visualization.Query('https://docs.google.com/a/csd99.org/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=drive_web\n\\n\&gid=2&headers=1');
                query2.send(function (response) {
                    if (response.isError()) {
                        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                        return;
                    }
                    data2 = response.getDataTable();
                    drawThisMonth();
                });
            }
        }

        if (document.addEventListener) {
            lastMonth.addEventListener('click', drawLastMonth);
            thisMonth.addEventListener('click', drawThisMonth);
        }
        else if (document.attachEvent) {
            lastMonth.attachEvent('onclick', drawLastMonth);
            thisMonth.attachEvent('onclick', drawThisMonth);
        }
        else {
            lastMonth.onclick = drawLastMonth;
            thisMonth.onclick = drawThisMonth;
        }
    });
}
google.load('visualization', '1', {packages:['controls'], callback: drawCharts});

[HTML]

<h3>Data for gauges located in this sheet on worksheets 1 and 2</h3>
<h3><a href = 'https://docs.google.com/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=sharing'> here.</a></h3>
<div id='gauge_div' style='height: 150px; width: 500px;'></div>
<div id='table_div'></div>
<input id="lastMonth" type="button" disabled="disabled" value="Last Month" />
<input id="thisMonth" type="button" value="This Month" />

请参阅此处的工作示例：http://jsfiddle.net/asgallant/n2xK9/

Google Visualization只会绘制2个图表中的1个

2 个答案: