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

Google TableChart does not play well with other charts on page

本文关键字：其他 很好 不能 TableChart Google      更新时间：2023-09-26

我需要在同一页面上有一个谷歌表格图表与另一个谷歌图表共存，但唉，这并没有发生。 我只使用演示代码位，我可以让任何其他谷歌图表在同一页面上共存，但不能使用表格图表。 有几个问题被问到和回答了其他图表类型，但不是表格图表。 这似乎是此图表的错误。我使用"当前"版本来谷歌图表，我相信截至 2016 年 7 月 15 日为 43 个。

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

例外情况是;"第 51 行第 13 栏未处理的异常 http://localhost:62064/test.html0x800a01bd - 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>

---代码结束——

不需要

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

在这里，我在load声明中包括callback，
绘制两个图表...

请参阅以下工作片段... 

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>

相关文章：