Google TableChart 不能很好地与页面上的其他图表配合使用答案

【问题标题】：Google TableChart does not play well with other charts on pageGoogle TableChart 不能很好地与页面上的其他图表配合使用
【发布时间】：2016-07-15 21:27:53
【问题描述】：

我需要一个谷歌表格图表与同一页面上的另一个谷歌图表共存，但可惜这没有发生。我只使用演示代码位，我可以让任何其他谷歌图表在同一页面上共存，但不是表格图表。对于其他图表类型，但不是表格图表，已经提出和回答了几个问题。这似乎是这个图表的一个错误。我使用“当前”版本来搜索我认为截至 2016 年 7 月 15 日的 43 个图表。

该错误将发生在该行代码块末尾的行上； "var table = new google.visualization.Table(document.getElementById('table_div'));"

异常在哪里； “http://localhost:62064/test.html 中第 51 行第 13 列未处理的异常 0x800a01bd - JavaScript 运行时错误：对象不支持此操作”

---代码开始，这是问题的完整示例网页---

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>My Test Google Charts Page</title>
    <!--Include for chart support-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">
        google.charts.load("current", { packages: ["corechart"] });
        google.charts.setOnLoadCallback(drawChart);
        google.charts.setOnLoadCallback(drawTable);

        function drawChart() {
                        var data = google.visualization.arrayToDataTable([
                        ['ID', 'X', 'Y', 'Temperature'],
                        ['', 80, 167, 120],
                        ['', 79, 136, 130],
                        ['', 78, 184, 50],
                        ['', 72, 278, 230],
                        ['', 81, 200, 210],
                        ['', 72, 170, 100],
                        ['', 68, 477, 80]
                    ]);

                    var options = {
                        colorAxis: { colors: ['yellow', 'red'] }
                    };

                    var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
                    chart.draw(data, options);
                }

                function drawTable() {
                    var data = new google.visualization.DataTable();
                    //debugger;
                    data.addColumn('string', 'Name');
                    data.addColumn('number', 'Salary');
                    data.addColumn('boolean', 'Full Time Employee');
                    data.addRows([
                      ['Mike', { v: 10000, f: '$10,000' }, true],
                      ['Jim', { v: 8000, f: '$8,000' }, false],
                      ['Alice', { v: 12500, f: '$12,500' }, true],
                      ['Bob', { v: 7000, f: '$7,000' }, true]
                    ]);

                    var table = new google.visualization.Table(document.getElementById('table_div'));
                    table.draw(data, { showRowNumber: true, width: '100%' });
                }
        </script>

    </head>

    <body>
        <!--Table and divs that hold the pie charts-->
        <table class="columns">
            <tr>
                <td><div id="chart_div" style="width: 900px; height: 500px;"></div></td>

            </tr>
            <tr>
                    <td><div id="table_div" style="width: 900px; height: 500px;"></div></td>
            </tr>
        </table>

    </body>
    </html>

---代码结束--

【问题讨论】：

标签： javascript charts google-visualization

【解决方案1】：

每个图表都不需要setOnLoadCallback，
无论如何，这应该只在每页调用一次......

在这里，我将callback 包含在load 语句中，
它绘制了两个图表...

请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['ID', 'X', 'Y', 'Temperature'],
      ['', 80, 167, 120],
      ['', 79, 136, 130],
      ['', 78, 184, 50],
      ['', 72, 278, 230],
      ['', 81, 200, 210],
      ['', 72, 170, 100],
      ['', 68, 477, 80]
    ]);

    var options = {
      colorAxis: { colors: ['yellow', 'red'] }
    };

    var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
    chart.draw(data, options);

    var data = new google.visualization.DataTable();
    //debugger;
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
      ['Mike', { v: 10000, f: '$10,000' }, true],
      ['Jim', { v: 8000, f: '$8,000' }, false],
      ['Alice', { v: 12500, f: '$12,500' }, true],
      ['Bob', { v: 7000, f: '$7,000' }, true]
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(data, { showRowNumber: true, width: '100%' });
  },
  packages: ['corechart', 'table']
});

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<table class="columns">
  <tr>
    <td><div id="chart_div" style="width: 900px; height: 500px;"></div></td>
  </tr>
  <tr>
    <td><div id="table_div" style="width: 900px; height: 500px;"></div></td>
  </tr>
</table>

【讨论】：