javascript - 删除 display none 正在更改图表的高度和宽度

Question

我正在编写一个使用谷歌图表生成图表的代码。这是原始代码。

      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>

即使这样也能正常工作，但我的问题是，为什么尺寸变小了？有没有一种方法可以让我在取回饼图时也能保持大小。请让我知道我哪里出错了，我该如何解决。

谢谢!!!

Answer 1

使用 visibility:hidden 而不是 display:none，因为这仍然会呈现 div，但不会呈现内容:

What is the difference between visibility:hidden and display:none?