刪除顯示無改變圖表的高度和寬度

Question

我正在編寫代碼，使用Google圖表生成圖表。 這是原始代碼。

  google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } 

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="piechart" style="width: 900px; height: 500px;"></div> 

這是我的修改。 最初，我不希望餅圖顯示。 當我單擊按鈕時，它應該出現。

 google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', pieSliceText: 'value', }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } function showPie() { document.getElementById("piechart").style.display = ''; } 

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="piechart" style="width: 900px; height: 500px; display:none"></div> <button type="button" onclick="showPie()">Click Me!</button> 

即使這樣工作正常，但我的問題是，為什么尺寸減小了？ 有沒有辦法即使我收回pieChart時也可以保留尺寸。 請讓我知道我要去哪里哪里以及如何解決它。

謝謝！！！

Answer 1

而不是display:none ，而是使用visibility:hidden ，因為它仍然會渲染div，而不是內容：

visible：hidden和display：none有什么區別？

Answer 2

殺死div上的大小尺寸，然后將它們放置在options變量中，如下面的示例所示，您應該一切順利。

這是我以前遇到過的可視化庫的怪癖之一。

 google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', pieSliceText: 'value', width: 900, height: 500, }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } function showPie() { document.getElementById("piechart").style.display = ""; } 

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <button type="button" onclick="showPie()">Click Me!</button> <div id="piechart" style=" display:none;"></div>