Question

我想在另一张图表下方显示其中一张图表，但现在只显示第一张图表，而我似乎无法在其底部显示另一张图表。另外，如何使图表与中间对齐？

 <section>
    <html>
    <div class="container"></div>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <div id="columnchart_values" style="width: 1200px; height: 700px;"></div>
      <script type="text/javascript">
        google.charts.load("current", {packages:['corechart']});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
          var data = google.visualization.arrayToDataTable([
            ["Week", "# of F2F=0"],
            ["Copper", 8.94],
            ["Silver", 10.49],
            ["Gold", 19.30],
            ["Platinum", 0]
          ]);

          var view = new google.visualization.DataView(data);
          var options = {
            title: "Period: ASEAN 2Q F2F = 0 Dashboard",
            'backgroundColor': 'transparent', 
            width: 600,
            height: 400,
            bar: {groupWidth: "70%"},
            legend: { position: "right" },
          };
          var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
          chart.draw(view, options);
         }
      </script>

    <div id="piechart_3d" style="width: 1200px; height: 700px;"></div>
        <script type="text/javascript">
          google.charts.load("current", {packages:["corechart"]});
          google.charts.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Number of calls made', 'Number of people'],
              ['F2F = 0', 6],
              ['1 < F2F < 5', 8],
              ['F2F > 9', 5]
            ]);

            var options = {
              title: 'Period: ASEAN2QWK3',
              titleTextStyle: {
                fontSize: 21
              },
              'backgroundColor': 'transparent',   
              is3D: true,
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
            chart.draw(data, options);
          }
        </script>

    </html>
    </section>

Answer 1

您正在调用'.load'方法两次，这是不正确的。

只需在第二张图表的下方注释，两个图表都会被加载。

google.charts.load（“current”，{packages：[“corechart”]}）;

如何放置图表的顶部和底部？

1 个答案: