Google Chart：Y 轴数字不可见

Question

我有一个简单的 Google Graph，它将天气数据显示为组合图。 https://jsfiddle.net/Typwithname/ubkn92m5/49/ 代码： HTML： <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>    <ul class="citytabs">      <li data-foreswf-target="#hourly" class="active5 citytab">Pls Click</li>      <li data-foreswf-target="#Diagrammtab" class="citytab">Pls Click Me 2</li>    </ul>           <div data-foreswf-content id="hourly" class="acitve5">       <p>hello1</p>    </div>    <div data-foreswf-content id="Diagrammtab" class="Chart">    <p>    hello2    </p>      <div id="Diagramm"></div>    </div>CSS：[data-foreswf-content] {  display: none;}.active5[data-foreswf-content] {  display: block;}JavaScript：  google.charts.load('current', {    packages: ['corechart']  });  google.charts.setOnLoadCallback(drawVisualization);});function drawVisualization() {  var data = google.visualization.arrayToDataTable([      ['Time', 'Temperature', 'PrecipProbability'],      ['1', 2, 6],      ['2', 5, 8]    ]  );  var options = {    title: 'Weather Hourly',    'width': 550,    'height': 230,    seriesType: 'bars',    colors: ['#f7fa3c', '#3366CC'],    vAxis: {title: 'Stuff'},    hAxis: {title: 'Day'},  };  var chart = new google.visualization.ComboChart(document.getElementById('Diagramm'));  chart.draw(data, options);}//Code for Forecast-tab swfconst foreswf = document.querySelectorAll('[data-foreswf-target]')const foreswfcontent = document.querySelectorAll('[data-foreswf-content]')foreswf.forEach(city => {  city.addEventListener('click', () => {    const target = document.querySelector(city.dataset.foreswfTarget)    foreswfcontent.forEach(swfContent => {      swfContent.classList.remove('active5')    })    foreswf.forEach(swf => {      swf.classList.remove('active5')    })    city.classList.add('active5')    target.classList.add('active5')  })})我正在使用选项卡来隐藏和显示该图。我现在的问题是，如果我尝试取消隐藏图表，y 轴的数字就会消失。如果我没有使用所有隐藏和显示的东西，一切都会正常工作。如果你只删除 css 部分，你可以尝试一下。所以我的问题是：如何使 y 轴数字可见，而不放弃隐藏和显示机制？先谢谢您的帮助！

Answer 1

当图表绘制在隐藏容器中时，

它无法正确计算所有图表元素的位置。

相反，请等到容器显示后再绘制图表。

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

window.addEventListener("load", () => {

  google.charts.load('current', {

    packages: ['corechart']

  });

  google.charts.setOnLoadCallback(drawVisualization);

});

function drawVisualization() {

  var data = google.visualization.arrayToDataTable([

      ['Time', 'Temperature', 'PrecipProbability'],

      ['1', 2, 6],

      ['2', 5, 8]

    ]

  );

  var options = {

    title: 'Weather Hourly',

    'width': 550,

    'height': 230,

    seriesType: 'bars',

    colors: ['#f7fa3c', '#3366CC'],

    vAxis: {title: 'Stuff'},

    hAxis: {title: 'Day'},

  };

  var chart = new google.visualization.ComboChart(document.getElementById('Diagramm'));

  //Code for Forecast-tab swf

  const foreswf = document.querySelectorAll('[data-foreswf-target]')

  const foreswfcontent = document.querySelectorAll('[data-foreswf-content]')

  foreswf.forEach(city => {

    city.addEventListener('click', () => {

      const target = document.querySelector(city.dataset.foreswfTarget);

      foreswfcontent.forEach(swfContent => {

        swfContent.classList.remove('active5');

      })

      foreswf.forEach(swf => {

        swf.classList.remove('active5');

      })

      city.classList.add('active5');

      target.classList.add('active5');

      

      switch (target.id) {

        case 'Diagrammtab':

          chart.draw(data, options);

            break;

      }

    });

  });

}

[data-foreswf-content] {

  display: none;

}

.active5[data-foreswf-content] {

  display: block;

}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <ul class="citytabs">

      <li data-foreswf-target="#hourly" class="active5 citytab">Pls Click</li>

      <li data-foreswf-target="#Diagrammtab" class="citytab">Pls Click Me 2</li>

    </ul>       

    <div data-foreswf-content id="hourly" class="acitve5">

       <p>hello1</p>

    </div>

    <div data-foreswf-content id="Diagrammtab" class="Chart">

    <p>

    hello2

    </p>

      <div id="Diagramm"></div>

    </div>