谷歌圖表：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 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')
  })
})

我正在使用選項卡來隱藏和顯示此圖。 我現在的問題是，如果我嘗試取消隱藏圖形，y 軸的數字就會消失。 如果我沒有使用所有隱藏和顯示的東西，一切都很好。 如果您只是刪除 css-part，您可以嘗試一下。

所以我的問題是：如何在不丟棄隱藏和顯示機制的情況下使 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>