Question

我创建了一个 bootstrap carousel 来展示我们公司的数据。在这个轮播中，我有引导表、图片和两个谷歌图表（饼图和堆积条形图）。

如果我不为 google 图表保留活动类，它们将无法正确加载，有时会更改图表大小或有时不显示图例。如果我使饼图处于活动状态，则它可以正常工作，但堆积图会显示图例丢失等问题，如果我使堆积图处于活动状态，则饼图会显示问题。为什么会这样？

<head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>   
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['STATES', 'MONTHLY REVENUE'],
            ['1',     557988],
            ['2',      723948],
            ['3',       1157887]
            ]);

        var options = {
            title: 'MONTHLY REVENUE',
            is3D: true,
            pieSliceText: 'value',
            fontSize: 15,
            chartArea: {
            left: "3%",
            top: "10%",
            height: "90%",
            width: "90%"
    },
        legend: {position: 'labeled'}   
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script> <!-- google pie chart ends  -->
    
<!-- google slack chart -->
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart_);
      function drawChart_() {
      var data = google.visualization.arrayToDataTable([
            ['STATES', 'MALE', 'FEMALE', { role: 'annotation' } ],
            ['1', 240680, 317308, ''],    
            ['2', 292141, 431807, ''],
            ['3', 401784, 756103, '']
      ]);
      
      var view = new google.visualization.DataView(data);
      

      var options = {
        title: "POPULATION",
        width: 1100,
        height: 650,
        legend: { position: 'top', maxLines: 5, textStyle: {fontSize: 15} },
        bar: { groupWidth: '90%' },
        isStacked: true
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
      }
    </script>
<!-- google slack chart ends  -->

        
   </head>
   <body>
   <div class="d-flex flex-lg-column mb-3">
                   <div class="p-2 bg-info">
                     <div id="carouselBigImage" class="carousel slide carousel-fade" data-ride="carousel">
                        <div class="carousel-inner">
                           
                           <div class="carousel-item">
                                <div class="table-responsive-lg table-bordered">
                                    <table class="table" style="font-weight: bold;font-size: 20px;caption-side:top;">
                                    <!-- table data  -->
                                        
                                </div>
                           </div>
                           
                           <div class="carousel-item active">
                               <div id="piechart_3d" style="width:100%; height:650px;"></div>
                           </div>
                           <div class="carousel-item ">
                               <div id="barchart_values" style="width:100%; height:650px;"></div>
                           </div>
                           <div class="carousel-item">
                              <img class="d-block w-100" src="Offc.png" >
                           </div>
                        </div>
                     </div> 
                  </div> <!-- p-2 bg-info -->
                 
               </div> <!-- d-flex flex-lg-column mb-3 closed -->
   
   
   </body>

Answer 1

一些事情...

每次页面加载只需加载一次谷歌图表，
每个图表绘制一次。
在隐藏容器中绘制时，图表无法正确计算图表元素的位置。
在这里，图表在一个隐藏的容器中，直到被轮播显示。
所以你需要等到图表显示后才能第一次绘制。
为此，您可以使用“on slid”事件 --> 'slid.bs.carousel'

看下面的片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // pie chart
  var dataPie = google.visualization.arrayToDataTable([
    ['STATES', 'MONTHLY REVENUE'],
    ['1',     557988],
    ['2',      723948],
    ['3',       1157887]
  ]);

  var optionsPie = {
    title: 'MONTHLY REVENUE',
    is3D: true,
    pieSliceText: 'value',
    fontSize: 15,
    chartArea: {
      left: '3%',
      top: '10%',
      height: '90%',
      width: '90%'
    },
    legend: {position: 'labeled'}
  };

  var chartPie = new google.visualization.PieChart(document.getElementById('piechart_3d'));

  // bar chart
  var dataBar = google.visualization.arrayToDataTable([
    ['STATES', 'MALE', 'FEMALE', { role: 'annotation' } ],
    ['1', 240680, 317308, ''],
    ['2', 292141, 431807, ''],
    ['3', 401784, 756103, '']
  ]);

  var viewBar = new google.visualization.DataView(dataBar);

  var optionsBar = {
    title: 'POPULATION',
    width: 1100,
    height: 650,
    legend: { position: 'top', maxLines: 5, textStyle: {fontSize: 15} },
    bar: { groupWidth: '90%' },
    isStacked: true
  };

  var chartBar = new google.visualization.BarChart(document.getElementById('barchart_values'));

  // carousel slid event
  $('#carouselBigImage').on('slid.bs.carousel', function (sender) {
    // draw chart that is shown
    var container = $(sender.relatedTarget).find('div');
    switch (container.prop('id')) {
      case 'barchart_values':
        chartBar.draw(viewBar, optionsBar);
        break;

      case 'piechart_3d':
        chartPie.draw(dataPie, optionsPie);
        break;
    }
  });
});

在引导程序轮播中加载多个谷歌图表

1 个答案: