javascript - 谷歌图表在 jquery 显示和隐藏时没有全宽

Question

我正在制作一个具有显示和隐藏功能的谷歌图表。意味着图表将在页面加载时隐藏，当用户单击按钮时图表将可见。 我的代码

<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    var items = $(".label1").text();
    var data = google.visualization.arrayToDataTable([
        <%= chartItems %>
    ]);
    var options = {
        title: 'Poll Results'
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
</script>
<div id="chart_div" style="display:none; width:800px;height:500px;"></div>

我的问题是，当用户单击按钮并且图表可见时，它没有采用完整的宽度和高度 (800x500)。而是采用未知尺寸 (400x200)。 注意:当图表在页面加载本身中可见时，它可以正常工作。 代码与 HTML 中的更改相同

<div id="chart_div" style=" width:800px;height:500px;"></div>

Answer 1

您可以按照 marios 的建议进行操作，并在该图表的选项中设置维度，但这并不能解决在隐藏的 div 中绘制图表所带来的所有问题。可视化 API 的尺寸测量在隐藏的 div 中不能很好地工作，因此元素被定位在错误的位置并且在某些浏览器中具有错误的大小。您需要在绘制图表之前立即取消隐藏 div，并且可以在图表绘制完成后再次隐藏它。下面是执行此操作的示例代码:

var container = document.getElementById('chart_div');
container.style.display = 'block';
var chart = new google.visualization.PieChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
    container.style.display = 'none';
});
chart.draw(data, options);