当jquery显示和隐藏时，Google图表不是全宽的
当jquery显示和隐藏时，Google图表不是全宽的
提问于 2013-12-31 17:54:02
我正在制作一个谷歌图表与显示和隐藏functionality.Means图表将隐藏在页面加载，当用户点击一个按钮图表将是可见的。我的代码
<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).rather它采取一个未知的尺寸(400x200)。注意:当图表在页面加载本身中可见时，它可以正常工作。代码在HTML中的变化相同，如下所示
<div id="chart_div" style=" width:800px;height:500px;"></div>回答 4
Stack Overflow用户
回答已采纳
发布于 2013-12-31 23:53:23
您可以按照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);Stack Overflow用户
发布于 2018-12-05 08:38:08
我确认这是一个bug。如果div是隐藏的“可见性:隐藏；”
如果CSS显示"display:none“，则不起作用。
Stack Overflow用户
发布于 2013-12-31 18:01:10
有一个选项可以要求google图表api https://developers.google.com/chart/interactive/docs/customizing_charts?hl=es提供特定的宽度和高度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20855366
复制相关文章
相似问题