javascript - 为什么将显示从无更改为阻止时 Google 图表的宽度不起作用？

Question

我创建了一个宽度为 100% 的 Google 图表:

<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([
    ["test", "val", { role: "style" } ],
    ["test", 21.45, "color: red"]
  ]);
  var options = {
          height: '300px',
          width: '100%'
          };
  var view = new google.visualization.DataView(data);
  var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
  chart.draw(view,options);
  }
</script>
<div id="columnchart_values"></div>

然后，我以 display=none 开头创建相同的图表。和表演 点击后的图表:

<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([
  ["test", "val", { role: "style" } ],
  ["test", 21.45, "color: red"]
    ]);
    var options = {
          width: '100%'
          };
    var view = new google.visualization.DataView(data);
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
    chart.draw(view,options);
    }
  function test() {
  document.getElementById("columnchart").style.display = "block";
  }
</script>
<div onclick="javascript:test()"> click me </div>
<div id="columnchart" style="width: 100%; height: 300px; display:none;"></div>

但在第二种方法中，Google 图表的宽度样式似乎不起作用，只显示默认宽度。任何人都可以帮助我吗？非常感谢!

Answer 1

将display改为block后用选项重新绘制图表；

如果您愿意，可以在 window 的 resize 事件上执行相同的操作。

"use strict";
console.clear();

{
  let data, options, view, chart;
  
  google.charts.load("current", {
    packages: ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    data = google.visualization.arrayToDataTable([
      ["test", "val", {
        role: "style"
      }],
      ["test", 21.45, "color: red"]
    ]);
    options = {
      width: '100%'
    };
    view = new google.visualization.DataView(data);
    chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
    chart.draw(view, options);
  }

  function test() {
    document.getElementById("columnchart").style.display = "block";
    chart.draw(view, options);
  }
  
  document.getElementById('open-chart').addEventListener('click', test);
  window.addEventListener('resize', test)
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="open-chart" onclick="test()"> click me </div>
<div id="columnchart" style="width: 100%; height: 300px; display:none;"></div>