Question

我需要在同一页面上将谷歌桌面图表与另一张谷歌图表共存，但唉，这不会发生。我只使用演示代码位，我可以让任何其他谷歌图表在同一页面上共存但不是表格图表。有几个问题已经问及其他图表类型，但没有表格图表。它似乎是此图表的错误。我使用谷歌排行榜的“当前”版本，截至2016年7月15日我认为是43岁。

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

例外情况; “http://localhost:62064/test.html第31行第51行未处理的例外情况 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>

---代码结束 -

Answer 1

每张图表都不需要setOnLoadCallback，
这应该只在每页调用一次......

在这里，我在callback声明中加入了load 它绘制了两个图表......

请参阅以下工作代码段...

＆＃13;

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']
});

＆＃13;

<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>

＆＃13;

Google TableChart与页面

1 个答案: