html 加载多个谷歌图表内引导轮播

k2fxgqgv 于 2023-03-27 发布在其他

关注(0)|答案(2)|浏览(118)

我创建了一个引导数据库来展示我们公司的数据。在这个数据库中，我有引导表，图片和两个谷歌图表（饼图和堆叠条形图）。
如果我不保持谷歌图表的活动类，他们没有正确加载，有时图表大小被更改或有时图例不显示。如果我使饼图活跃，那么它工作正常，但然后堆叠图显示问题，如图例丢失，如果我使堆叠图活跃，那么饼图显示问题。为什么会这样？

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

Html

来源：https://stackoverflow.com/questions/66868972/loading-multiple-google-chart-inside-bootstrap-carousel

2条答案

按热度按时间

hgb9j2n61#

几件事

GoogleCharts只需要在每次页面加载时加载一次，
而不是每次绘制图表。
1.当在隐藏容器中绘制时，图表不能正确地计算图表元素的放置。
在这里，图表在被轮播显示之前处于隐藏容器中。
所以你需要等到图表显示出来才能第一次绘图。
为此，您可以使用“on slide”事件--〉'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;
    }
  });
});

赞(0）回复(0）举报 2023-03-27

wooyq4lh2#

一些图表库在Bootstrap carousel中显示多个图表时会出现问题。为了让接下来的幻灯片渲染图表，我只是将控制bs滑块的css更改为notuse“display：none;"。请改用“visibility：hidden;”，这将允许图表在不可见时呈现。visibility属性允许元素在隐藏时占用空间。

.myclass .carousel-item {
  display: block; /* allow charts to render offscreen */
  visibility: hidden;
}
.myclass .carousel-item.active {
  visibility: initial;
}

赞(0）回复(0）举报 2023-03-27

我来回答

html 加载多个谷歌图表内引导轮播

2条答案

相关问题

热门标签

最新问答