我有一個簡單的 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 軸數字可見，而不放棄隱藏和顯示機制？先謝謝您的幫助！
1 回答
瀟湘沐
TA貢獻1816條經驗 獲得超6個贊
當圖表繪制在隱藏容器中時，
它無法正確計算所有圖表元素的位置。
相反，請等到容器顯示后再繪制圖表。
請參閱以下工作片段...
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>
- 1 回答
- 0 關注
- 103 瀏覽
添加回答
舉報
0/150
提交
取消