Question

我想将Google Charts与jquery可折叠html一起使用。但是，当将有效的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>

与jQuery搭配使用时，Google图表上的Vaxis不显示

1 个答案: