谷歌图表工具在一个页面上添加多个图表

Google chart tools add more than one chart on a page

本文关键字：添加 一个 工具 谷歌      更新时间：2023-09-26

<html>
<head>
  <script type="text/javascript" src="https://www.google.com/jsapi">
  </script>
  <script type="text/javascript">
    google.load("visualization", "1", {
      packages: ["corechart"]
    });
    google.setOnLoadCallback(drawAll);
    function drawAll() {
      drawChart();
      drawChart2();
    }
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);
      var options = {
        title: 'My Daily Activities',
        pieHole: 0.4,
      };
      var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
      chart.draw(data, options);
    }
    function drawChart2() {
      var data2 = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);
      var options2 = {
        title: 'My Daily Activities',
        pieHole: 0.4,
      };
      var chart2 = new google.visualization.PieChart(document.getElementById('donutchart'));
      chart2.draw(data2, options2);
    }
  </script>
</head>
<body>
  <div id="donutchart" style="width: 900px; height: 500px;"></div>
</body>
</html>

我想能够在同一页面上使用多个图表，我也想使用谷歌图表工具中的不同图表，链接如下：https://google-developers.appspot.com/chart/interactive/docs/gallery

您只需添加另一个div；）

<html>
<head>
  <script type="text/javascript" src="https://www.google.com/jsapi">
  </script>
  <script type="text/javascript">
    google.load("visualization", "1", {
      packages: ["corechart"]
    });
    google.setOnLoadCallback(drawAll);
    function drawAll() {
      drawChart();
      drawChart2();
    }
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);
      var options = {
        title: 'My Daily Activities',
        pieHole: 0.4,
      };
      var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
      chart.draw(data, options);
    }
    function drawChart2() {
      var data2 = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);
      var options2 = {
        title: 'My Daily Activities',
        pieHole: 0.4,
      };
      var chart2 = new google.visualization.PieChart(document.getElementById('donutchart2'));
      chart2.draw(data2, options2);
    }
  </script>
</head>
<body>
  <div id="donutchart" style="width: 900px; height: 500px;"></div>
  <div id="donutchart2" style="width: 900px; height: 500px;"></div>
</body>
</html>

只需添加另一个div

<html>
<head>
  <script type="text/javascript" src="https://www.google.com/jsapi">
  </script>
  <script type="text/javascript">
    google.load("visualization", "1", {
      packages: ["corechart"]
    });
    google.setOnLoadCallback(drawAll);
    function drawAll() {
      drawChart();
      drawChart2();
    }
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);
      var options = {
        title: 'My Daily Activities',
        pieHole: 0.4,
      };
      var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
      chart.draw(data, options);
    }
    function drawChart2() {
      var data2 = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);
      var options2 = {
        title: 'My Daily Activities',
        pieHole: 0.4,
      };
      var chart2 = new google.visualization.PieChart(document.getElementById('donutchart1'));
      chart2.draw(data2, options2);
    }
  </script>
</head>
<body>
  <div id="donutchart" style="width: 900px; height: 500px;"></div>
<div id="donutchart1" style="width: 900px; height: 500px;"></div>
</body>
</html>

相关文章：