Google 图表：Y 轴数字不可见

Question

我有一个简单的 Google 图表，它将天气数据显示为组合图表。 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')
  })
})

我正在使用 Tabs 来隐藏和显示此图。我现在的问题是，如果我尝试取消隐藏图表，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>

Google 图表：Y 轴数字不可见

Google Chart: Y-Axis numbers not visible

html

javascript

css

charts

google-visualization