程序员经验分享-hwhale

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

2023-12-19

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

如果我没有为谷歌图表保留活动类，它们将无法正确加载，有时图表大小会发生变化，有时图例不会显示。如果我使饼图处于活动状态，则它可以正常工作，但堆积图会显示诸如图例缺失之类的问题，如果我使堆积图处于活动状态，则饼图会显示问题。为什么会这样呢？

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

几件事...

  1. 谷歌图表每次页面加载只需要加载一次，
    每个绘制的图表不是一次。

  2. 在隐藏容器中绘制时，图表无法正确计算图表​​元素的位置。
    在这里，图表位于隐藏容器中，直到通过轮播显示为止。
    因此您需要等到图表显示后才能第一次绘制。
    为此，您可以使用“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;
    }
  });
});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

Bootstrap4

googlevisualization

bootstrapcarousel

在引导程序轮播中加载多个谷歌图表 的相关文章

随机推荐

  • 如何在chrome扩展中使用exportFunction？

    exportFunction function var document oldContentDocumentGetter call this if document interceptWindow document defaultView

  • 如何将库添加到 testImplementation 和 androidTestImplementation

    两者的 kotlin 库test and android tests 单元测试和 UI 测试 如果我将以下两行写为 build gradle 的一部分 它就可以正常工作 我的问题是 这是添加在测试和 Android 测试中使用的库的正确方法

  • Fisher 测试错误：LDSTP 太小

    input NN lt c 359 32 JJ lt c 108 13 NNS lt c 103 15 VBN lt c 95 9 RB lt c 63 11 NNP lt c 56 0 VBG lt c 55 10 IN lt c 38

  • 跳过 reStructuredText 中的标题级别

    是否可以通过某种方式跳过 RestructedText 中的标题级别 例如 给定 PART Chapter Section Subsection Subsubsection Paragraph Another section Another

  • SSN 的正则表达式 [重复]

    这个问题在这里已经有答案了 我在 C 中有一个方法 它表示 FormatSSN 接受字符串格式的 SSN 并替换破折号 我的意思是我希望 SSN 的格式为 XXX XX XXXX 我想编写一个正则表达式来确保 SSN 采用我提到的格式 谁能

  • 如何获取http.Request中的URL

    我建立了一个 HTTP 服务器 我使用下面的代码来获取请求 URL 但它没有获取完整的 URL func Handler w http ResponseWriter r http Request fmt Printf Req s s r U

  • 图像在 PictureBox 中旋转

    正如问题所暗示的 当我将图像加载到图片框 使用对话框 中时 它不会以其原始外观显示 在此屏幕截图中 左侧的图像是我加载到图片框 右侧 中的图像 Trying to know what causes this I draw an image

  • 我*必须*在 Silverlight WCF 客户端中使用 ObservableCollection 吗？

    当在 WCF 中访问 Silverlight 时 您会得到生成的代理可观察集合 http sweux com blogs psampaio index php 2009 04 28 an introduction to observable

  • 将 JSON 字符串转换为 HashMap

    我正在使用 Java 并且我有一个 JSON 字符串 name abc email id email protected cdn cgi l email protection email protected cdn cgi l email

  • 谷歌地图中的标记掉落事件？

    当用户在地图上放置标记时 我需要触发一个事件 我有代码可以让他们删除标记 但我不知道如何触发该事件 有小费吗 通过标记事件拖拽 您可以获得标记放置位置的纬度 这是你需要的吗 google maps event addListener Mar

  • 如何将 Access 数据库中的所有表导出到 Excel - 每个表一个工作表

    我有一个包含约 30 个表的 Access 数据库 如何将所有 30 个表格导出到 Excel 工作簿中的单独工作表中 我希望找到一些可以从 Access 中运行的 VBA VBS 代码来完成此任务 有任何想法吗 你应该能够做这样的事情 D

  • 删除两个方向的 n 行以及 sed 中的匹配项？

    在运行之前删除匹配项和两行 sed i bak e match 2d someCommonName txt 运行后删除匹配项和两行 sed i bak e match 2d someCommonName txt 但是删除匹配项 其后两行和其

  • WriteAsync 超时

    我尝试编写一个带有超时的简单异步写入代码 如下所示 并期望该函数在给定非常大的缓冲区和较小的 waitTime 的情况下抛出 TaskCanceledException 然而 这并没有发生 WriteAsync 将阻塞很多秒 直到写入完成

  • 哪个队列与 requestAnimationFrame 关联？

    今天我在接受采访时被问到这个问题 我无法回答这个问题 面试官说有一个特殊的队列用于 requestAnimationFrame 回调 但我找不到任何这方面的信息 如果 rAF 有它自己的队列 那么为什么这个队列从未在任何地方被提及 当我们谈

  • Swift：呈现主要和替代（登录/入门）流程时出现视觉故障？ [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我有一个应用程序需要用户登录或创建帐户第一次启动应用程序时 虽然一般不建议这样做 但这是一个非常具体的用例 此外 如果他们已经登录 当

  • 有人能够在 python 中使用 poppler new_from_data 吗？

    使用Python3和Poppler 我可以毫无问题地使用new from file加载文件 但是new from data有问题 这是显然是一个简单测试的代码 因为从文件读取然后使用 new from data 没有意义 因为 new fr

  • 在分组依据查询中包含缺失的月份

    我想我这里有一个艰难的人 我试图按月获取订单数 即使为零 这是问题查询 SELECT datename month OrderDate as Month COUNT OrderNumber AS Orders FROM OrderTable

  • 方法引用与 lambda 表达式

    我想用下面示例中的方法引用替换 lambda 表达式 public class Example public static void main String args List

  • 使用 JavaScript 的逻辑运算符压缩 if/else if 语句

    我正在学习 AngularJS 试图制作一个简单的计算器 并且我正在尝试压缩它if else if 陈述使用 Javascript 逻辑运算符 鉴于这个例子 我怎样才能减少它呢 如果你不明白 scope 忽略它 它基本上是一个视图 因此 当

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

    我创建了一个引导程序轮播来说明我们公司的数据 在这个轮播中 我有引导表 图片和两个谷歌图表 饼图和堆积条形图 如果我没有为谷歌图表保留活动类 它们将无法正确加载 有时图表大小会发生变化 有时图例不会显示 如果我使饼图处于活动状态 则它可以正

热门标签