Question

所以我想在我的网站上嵌入以下代码，其目的是以表格形式显示每日和每月网站指标。

我正试图模仿该页面，但我遇到了障碍：我似乎找不到使用谷歌图表API渲染两个不同谷歌图表的方法。

我确定这是一个令人难以置信的愚蠢错误，我只是没有看到，但我现在已经研究了大约一个小时了，只是无法弄清楚如何显示两张桌子。

<!DOCTYPE html>
<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawDailyTable);
      function drawDailyTable() {
        var Dailydata = new google.visualization.DataTable();
        Dailydata.addColumn('string', 'Metric');
        Dailydata.addColumn('number', 'Number');
        Dailydata.addRows([
          ['Total Daily Unique Users',  {v: 462, f: '462'}],
          ['Total Daily Visits',   {v:6702,   f: '6,702'}]
        ]);
        var Dailytable = new google.visualization.Table(document.getElementById('table_div'));
        Dailytable.draw(Dailydata, {showRowNumber: true});
      }
    </script>


    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawMonthlyTable);
      function drawMonthlyTable() {
      var Monthlydata = new google.visualization.DataTable();
        Monthlydata.addColumn('string', 'Metric');
        Monthlydata.addColumn('number', 'Number');
        Monthlydata.addRows([
          ['Total Monthly Unique Users',  {v: 12875, f: '12,875'}],
          ['Total Monthly Visits',   {v:37980,   f: '37,980'}]
        ]);
        var Monthlytable = new google.visualization.Table(document.getElementById('table_div'));
        Monthlytable.draw(Monthlydata, {showRowNumber: true});
        }
    </script>
  </head>

  <body>
    <div id='table_div'></div>
  </body>
</html>

Answer 1

我想通了，在我的drawtable函数中，它说：document.getElementById('table_div')，我只是将每个表的ID重命名为document.getElementById('dailytable_div')和document.getElementById('monthlytable_div')，然后将我的身体编辑为看起来像这样：

  <body>
    <div id='dailytable_div'></div>
    <div id='monthlytable_div'></div>
  </body>

问题解决了！

无法弄清楚如何使用谷歌图表API显示2个表格

1 个答案: