Question

我正在寻求有关此功能的帮助，以便在html页面上绘制表格。

加载后，页面应显示两个图表（一个柱形图（已经在工作）和一个表）。这是我的代码，我打算在同一页面上添加更多表和图表。

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

    // Load Charts and the corechart and barchart packages. You can load as many p`enter code here`ackage as you want for your charts
       google.charts.load('current', {'packages':['corechart','table']});

    // Draw the Cells tables with this function.
       google.charts.setOnLoadCallback(drawCell1chart);

    // Draw the Cell table for men function.
       google.charts.setOnLoadCallback(drawMaleTable);

   // Callback that draws the chart.

    function drawCell1chart() {

        var queryString = encodeURIComponent('SELECT B, C LIMIT 12 OFFSET 3');

        var query = new google.visualization.Query(
            'https://docs.google.com/spreadsheets------0s/gviz/tq?sheet=Data&headers=1&tq=SELECT%20B%2C%20C%20LIMIT%2011%20OFFSET%202');

        query.send(handleSampleDataQueryResponse);
    }


    function handleSampleDataQueryResponse(response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }

        //Set options.
        var options = {title:'Cell 1 Data',
                       width:600,
                       height:300};

        var data = response.getDataTable();
        var chart = new google.visualization.ColumnChart(document.getElementById('main'));
        chart.draw(data, options);
    }

     //******** Bar: This is the one that is not diplaying....even though the code is the same as above.

     function drawMaleTable() {
         // Copy from SELECT and encode it using google encoding tool. The result will be added to the end
         // of the link below.

         var queryString = encodeURIComponent('SELECT C, D LIMIT 4 OFFSET 59');
         var query = new google.visualization.Query(
               'https://docs.google.com/spreadsheets/d/-------0s/gviz/tq?sheet=Data&headers=1&tq=SELECT%20C%2C%20D%20LIMIT%204%20OFFSET%2059');

         query.send(handleQueryResponse);
    }


    function handleQueryResponse(response) {
        if(response.isError()) {
            alert('Error in query: ' + response.getMessage() +   response.getDetailedMessage());
            return;
        }

        var dataM = response.getDataTable();
        // var formatter = new google.visualization.BarFormat({width: 120});
        // formatter.format(data, 1); // Apply formatter to second column

        var table = new  google.visualization.Table(document.getElementById('barformat_div'));
        table.draw(dataM, {allowHtml: true, showRowNumber: false, width: '100%', height: '100%'});
      }

</script>
</head>

<body>
<!--Table and divs that hold the pie charts-->
    <table class="columns">
      <tr>
        <td><div id="main" style="border: 1px solid #ccc"></div></td>

    <!-- This "barformat_div" is the one that is not displaying -->

        <td><div id="barformat_div" style="border: 1px solid #ccc"></div></td>
      </tr>
    </table>

</body>
</html>

我不确定代码在哪里，因为我正确地遵循了查询功能。

Answer 1

尝试在同一个回调中调用这两个函数，
像这样...

google.charts.load('current', {
  callback: function () {
    drawCell1chart();
    drawMaleTable();
  },
  packages:['corechart','table']
});

并删除其他语句-> google.charts.setOnLoadCallback

Google图表（表格）未显示{从其他工作表查询}

1 个答案: