时间戳

首页 > 解决方案 > 与 jquery 一起使用时，Google 图表上的 Vaxis 不显示

jquery - 与 jquery 一起使用时，Google 图表上的 Vaxis 不显示

问题描述

我想将 Google Charts 与 jquery collapsible html 一起使用。然而，当工作谷歌图表代码放入 jquery 可折叠 html 时，vaxis 上的值不显示

我已经尝试了 jquery 之外的谷歌代码并且它可以工作，我也尝试了几个版本的 jquery 并在互联网上寻找类似的例子，但我完全被卡住了

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Simple Collapsible</h2>
    <p>Click on the button to toggle between showing and hiding content.</p>
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
    <div id="demo" class="collapse">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <div class="container">
    <h2>Simple Collapsible</h2>
    <p>Click on the button to toggle between showing and hiding content.</p>
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demob">Simple collapsible</button>
    <div id="demob" class="collapse">
      <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([
            ['time', 'temperature'],
            [0, 36.75],
            [1, 36.75],
            [2, 36.75],
            [3, 36.75],
            [4, 36.75],
            [5, 36.81],
            [6, 36.81],
            [7, 36.81],
            [8, 36.81],
            [9, 36.81],
            [10, 36.81]

          ]);


          var options = {
            title: 'FarSite Temperature',
            'width': 1000,
            'height': 600,
            vAxis: {
              format: 'decimal'
            },
            curveType: 'function',
            hAxis: {
              title: 'Time'
            },
            vAxis: {
              title: 'Temperature',
              viewWindow: {
                max: 40,
                min: 20
              },
              format: '0'
            },
            legend: 'none',
            bar: {
              groupWidth: '95%'
            }
          };

          var container = document.getElementById('chart_div');
          var chart = new google.visualization.LineChart(container);
          google.visualization.events.addListener(chart, 'ready', function() {
            container.className = null;
          });
          chart.draw(data, options);
        }
      </script>
      <div id="chart_div" style="width: 800px; height: 600px"></div>





      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
</body>

</html>

谷歌图表代码单独工作，但在 jquery 内部时不显示 vaxis 上的值

标签： jquerychartsgoogle-visualization

解决方案

这是在隐藏容器中绘制图表的结果。
图表无法正确计算所有元素的位置。

相反，等到图表显示出来，然后再第一次绘制...... 

      $('#demob').on('shown.bs.collapse', function (e) {
        chart.draw(data, options);
      });

请参阅以下工作片段... 

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Simple Collapsible</h2>
    <p>Click on the button to toggle between showing and hiding content.</p>
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
    <div id="demo" class="collapse">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <div class="container">
    <h2>Simple Collapsible</h2>
    <p>Click on the button to toggle between showing and hiding content.</p>
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demob">Simple collapsible</button>
    <div id="demob" class="collapse">
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script type="text/javascript">
        google.charts.load('current', {
          packages: ['corechart']
        }).then(function () {
          var data = google.visualization.arrayToDataTable([
            ['time', 'temperature'],
            [0, 36.75],
            [1, 36.75],
            [2, 36.75],
            [3, 36.75],
            [4, 36.75],
            [5, 36.81],
            [6, 36.81],
            [7, 36.81],
            [8, 36.81],
            [9, 36.81],
            [10, 36.81]
          ]);

          var options = {
            title: 'FarSite Temperature',
            width: 1000,
            height: 600,
            vAxis: {
              format: 'decimal'
            },
            curveType: 'function',
            hAxis: {
              title: 'Time'
            },
            vAxis: {
              title: 'Temperature',
              viewWindow: {
                max: 40,
                min: 20
              },
              format: '0'
            },
            legend: 'none',
            bar: {
              groupWidth: '95%'
            }
          };

          var container = document.getElementById('chart_div');
          var chart = new google.visualization.LineChart(container);
          google.visualization.events.addListener(chart, 'ready', function() {
            container.className = null;
          });

          $('#demob').on('shown.bs.collapse', function (e) {
            chart.draw(data, options);
          });
        });
      </script>
      <div id="chart_div" style="width: 800px; height: 600px"></div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
</body>

</html>

推荐阅读