在jquery显示和隐藏时,Google图表没有占据全宽

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);

Answer 2

使用chartArea:{}设置宽度和高度

  function drawChart() {
    var items = $(".label1").text();
    var data = google.visualization.arrayToDataTable([
        <%= chartItems %>
    ]);
    var options = {
        title: 'Poll Results',
        chartArea: {
            width: 800,
            height: 500
        }
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}