問題描述
與 jquery 一起使用時，Google 圖表上的 Vaxis 不顯示 (Vaxis on Google chart not showing when used with jquery)
我想將 Google Charts 與 jquery 可折疊 html 一起使用。但是，當將工作的谷歌圖表代碼放入 jquery 可折疊 html 時，vaxis 上的值不顯示
我已經嘗試了 jquery 之外的谷歌代碼並且它可以工作，我也嘗試了幾個版本的 jquery並在互聯網上尋找類似的例子，但我完全陷入困境
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device‑width, initial‑scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn‑info" data‑toggle="collapse" data‑target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn‑info" data‑toggle="collapse" data‑target="#demob">Simple collapsible</button>
<div id="demob" class="collapse">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['time', 'temperature'],
[0, 36.75],
[1, 36.75],
[2, 36.75],
[3, 36.75],
[4, 36.75],
[5, 36.81],
[6, 36.81],
[7, 36.81],
[8, 36.81],
[9, 36.81],
[10, 36.81]
]);
var options = {
title: 'FarSite Temperature',
'width': 1000,
'height': 600,
vAxis: {
format: 'decimal'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Temperature',
viewWindow: {
max: 40,
min: 20
},
format: '0'
},
legend: 'none',
bar: {
groupWidth: '95%'
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
google.visualization.events.addListener(chart, 'ready', function() {
container.className = null;
});
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width: 800px; height: 600px"></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>
谷歌圖表代碼單獨工作，但在 jquery 內部時不顯示 vaxis 上的值
參考解法
方法 1:
this is a result of drawing the chart in a hidden container.
the chart cannot properly calculate the placement of all the elements. </p>
instead, wait until the chart is shown, before drawing for the first time...
$('#demob').on('shown.bs.collapse', function (e) {
chart.draw(data, options);
});
see following working snippet...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device‑width, initial‑scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn‑info" data‑toggle="collapse" data‑target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn‑info" data‑toggle="collapse" data‑target="#demob">Simple collapsible</button>
<div id="demob" class="collapse">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['time', 'temperature'],
[0, 36.75],
[1, 36.75],
[2, 36.75],
[3, 36.75],
[4, 36.75],
[5, 36.81],
[6, 36.81],
[7, 36.81],
[8, 36.81],
[9, 36.81],
[10, 36.81]
]);
var options = {
title: 'FarSite Temperature',
width: 1000,
height: 600,
vAxis: {
format: 'decimal'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Temperature',
viewWindow: {
max: 40,
min: 20
},
format: '0'
},
legend: 'none',
bar: {
groupWidth: '95%'
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
google.visualization.events.addListener(chart, 'ready', function() {
container.className = null;
});
$('#demob').on('shown.bs.collapse', function (e) {
chart.draw(data, options);
});
});
</script>
<div id="chart_div" style="width: 800px; height: 600px"></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>