Question

＆＃13;

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

＆＃13;

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

Answer 1

只需添加另一个div

＆＃13;

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

＆＃13;

Answer 2

你可以添加另一个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>

Google图表工具会在页面上添加多个图表

2 个答案: