可以'我不知道如何使用谷歌图表API显示2个表

Can't figure out how to display 2 tables using the google chart API

本文关键字：API 显示 2个表 谷歌 何使用 我不知道 可以      更新时间：2024-02-25

因此，我有以下代码要嵌入到我的网站中，其目的是以表格形式显示每日和每月的网站指标。

我试图模仿页面，但我遇到了一个障碍：我似乎找不到一种方法来渲染两个不同的谷歌图表使用谷歌图表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>

我发现了这一点，在我的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>

问题解决了！

相关文章：