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 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 部分，你可以尝试一下。

所以我的问题是：如何使 y 轴数字可见，而不放弃隐藏和显示机制？

先谢谢您的帮助！

Answer 1

当图表绘制在隐藏容器中时，它无法正确计算所有图表元素的位置。相反，请等到容器显示后再绘制图表。请参阅以下工作片段...window.addEventListener("load", () => {&nbsp; google.charts.load('current', {&nbsp; &nbsp; packages: ['corechart']&nbsp; });&nbsp; google.charts.setOnLoadCallback(drawVisualization);});function drawVisualization() {&nbsp; var data = google.visualization.arrayToDataTable([&nbsp; &nbsp; &nbsp; ['Time', 'Temperature', 'PrecipProbability'],&nbsp; &nbsp; &nbsp; ['1', 2, 6],&nbsp; &nbsp; &nbsp; ['2', 5, 8]&nbsp; &nbsp; ]&nbsp; );&nbsp; var options = {&nbsp; &nbsp; title: 'Weather Hourly',&nbsp; &nbsp; 'width': 550,&nbsp; &nbsp; 'height': 230,&nbsp; &nbsp; seriesType: 'bars',&nbsp; &nbsp; colors: ['#f7fa3c', '#3366CC'],&nbsp; &nbsp; vAxis: {title: 'Stuff'},&nbsp; &nbsp; hAxis: {title: 'Day'},&nbsp; };&nbsp; var chart = new google.visualization.ComboChart(document.getElementById('Diagramm'));&nbsp; //Code for Forecast-tab swf&nbsp; const foreswf = document.querySelectorAll('[data-foreswf-target]')&nbsp; const foreswfcontent = document.querySelectorAll('[data-foreswf-content]')&nbsp; foreswf.forEach(city => {&nbsp; &nbsp; city.addEventListener('click', () => {&nbsp; &nbsp; &nbsp; const target = document.querySelector(city.dataset.foreswfTarget);&nbsp; &nbsp; &nbsp; foreswfcontent.forEach(swfContent => {&nbsp; &nbsp; &nbsp; &nbsp; swfContent.classList.remove('active5');&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; foreswf.forEach(swf => {&nbsp; &nbsp; &nbsp; &nbsp; swf.classList.remove('active5');&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; city.classList.add('active5');&nbsp; &nbsp; &nbsp; target.classList.add('active5');&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; switch (target.id) {&nbsp; &nbsp; &nbsp; &nbsp; case 'Diagrammtab':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chart.draw(data, options);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; });}[data-foreswf-content] {&nbsp; display: none;}.active5[data-foreswf-content] {&nbsp; display: block;}<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>&nbsp; &nbsp; <ul class="citytabs">&nbsp; &nbsp; &nbsp; <li data-foreswf-target="#hourly" class="active5 citytab">Pls Click</li>&nbsp; &nbsp; &nbsp; <li data-foreswf-target="#Diagrammtab" class="citytab">Pls Click Me 2</li>&nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; <div data-foreswf-content id="hourly" class="acitve5">&nbsp; &nbsp; &nbsp; &nbsp;<p>hello1</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div data-foreswf-content id="Diagrammtab" class="Chart">&nbsp; &nbsp; <p>&nbsp; &nbsp; hello2&nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; <div id="Diagramm"></div>&nbsp; &nbsp; </div>