Javascript 谷歌图表：Y轴数字不可见

我有一个简单的谷歌图，它以组合图的形式显示天气数据。 代码： HTML:

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轴编号可见

---

提前感谢您的帮助

在隐藏容器中绘制图表时，
它无法正确计算所有图表元素的位置

相反，在绘制图表之前，请等待容器显示

请参阅以下工作片段

window.addEventListener（“加载”，（）=>{
google.charts.load（'current'{
软件包：['corechart']
});
google.charts.setOnLoadCallback（drawVisualization）；
});
函数drawVisualization（）{
var data=google.visualization.arrayToDataTable([
[‘时间’、‘温度’、‘精确度’]，
['1', 2, 6],
['2', 5, 8]
]
);
变量选项={
标题:"每小时天气",，
“宽度”：550，
‘高度’：230，
序列类型：“条”，
颜色：['#f7fa3c'，'#3366CC']，
vAxis:{title:'Stuff'}，
哈克斯：{title:'Day'}，
};
var chart=new google.visualization.ComboChart（document.getElementById（'diagram'）；
//预测选项卡swf的代码
const foreswf=document.queryselectoral（“[data foreswf target]”）
const foreswfcontent=document.queryselectoral（“[data foreswf content]”）
foreswf.forEach（城市=>{
city.addEventListener（'click'，（）=>{
const target=document.querySelector（city.dataset.forewftarget）；
foreswfcontent.forEach（swfContent=>{
swfContent.classList.remove（'active5'）；
})
foreswf.forEach（swf=>{
swf.classList.remove（'active5'）；
})
city.classList.add（'active5'）；
target.classList.add（'active5'）；
开关（target.id）{
案例“图表选项卡”：
图表绘制（数据、选项）；
打破
}
});
});
}

[数据内容]{
显示：无；
}
.active5[数据内容]{
显示：块；
}

请点击
请单击我2

你好


你好

在隐藏容器中绘制图表时，
它无法正确计算所有图表元素的位置

相反，在绘制图表之前，请等待容器显示

请参阅以下工作片段

window.addEventListener（“加载”，（）=>{
google.charts.load（'current'{
软件包：['corechart']
});
google.charts.setOnLoadCallback（drawVisualization）；
});
函数drawVisualization（）{
var data=google.visualization.arrayToDataTable([
[‘时间’、‘温度’、‘精确度’]，
['1', 2, 6],
['2', 5, 8]
]
);
变量选项={
标题:"每小时天气",，
“宽度”：550，
‘高度’：230，
序列类型：“条”，
颜色：['#f7fa3c'，'#3366CC']，
vAxis:{title:'Stuff'}，
哈克斯：{title:'Day'}，
};
var chart=new google.visualization.ComboChart（document.getElementById（'diagram'）；
//预测选项卡swf的代码
const foreswf=document.queryselectoral（“[data foreswf target]”）
const foreswfcontent=document.queryselectoral（“[data foreswf content]”）
foreswf.forEach（城市=>{
city.addEventListener（'click'，（）=>{
const target=document.querySelector（city.dataset.forewftarget）；
foreswfcontent.forEach（swfContent=>{
swfContent.classList.remove（'active5'）；
})
foreswf.forEach（swf=>{
swf.classList.remove（'active5'）；
})
city.classList.add（'active5'）；
target.classList.add（'active5'）；
开关（target.id）{
案例“图表选项卡”：
图表绘制（数据、选项）；
打破
}
});
});
}

[数据内容]{
显示：无；
}
.active5[数据内容]{
显示：块；
}

请点击
请单击我2

你好


你好

谢谢！这很有帮助！谢谢这很有帮助！

[data-foreswf-content] {
  display: none;
}

.active5[data-foreswf-content] {
  display: block;
}

  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')
  })
})