Google 图表上的 Vaxis 在与 jquery 一起使用时未显示

Question

我想使用具有 jquery 可折叠 html 的 Google 图表。但是，当工作 google 图表代码放入 jquery 可折叠 html 时，vaxis 上的值不显示

我尝试了 jquery 之外的 google 代码并且它有效，我也尝试了 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>

google 图表代码可单独使用，但在 jquery

内时不会在 vaxis 上显示值

Answer 1

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

相反，请等待图表显示，然后再进行第一次绘制...

      $('#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>

Google 图表上的 Vaxis 在与 jquery 一起使用时未显示

Vaxis on Google chart not showing when used with jquery

jquery

charts

google-visualization