javascript 当 jquery 显示和隐藏时，谷歌图表没有全宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20855366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google chart is not taking full width while jquery show and hide
提问by None
I am making a google chart whith show and hide functionality.Means chart will be hidden on the page load and when user clicks a button chart will be made visible. My code
我正在制作一个带有显示和隐藏功能的谷歌图表。意味着图表将在页面加载时隐藏，当用户点击按钮时，图表将可见。我的代码
<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>
My problem is that when user clicks on the button and chart is visible its not taking the full width and height(800x500).rather its taking an unknown dimension(400x200). Note: when the chart is made visible in the page load itself, It works correctly. Code is same change in HTML like this
我的问题是，当用户单击按钮并且图表可见时，它没有采用完整的宽度和高度（800x500）。而是采用未知尺寸（400x200）。注意：当图表在页面加载本身中可见时，它可以正常工作。代码与 HTML 中的更改相同
<div id="chart_div" style=" width:800px;height:500px;"></div>
回答by asgallant
You can do as marios suggested and set dimensions inside that chart's options, but that won't fix all of the problems that come along with drawing a chart inside a hidden div. The Visualization APIs dimensional measurements don't work well inside hidden divs, so elements get positioned in the wrong place and have the wrong size in some browsers. You need to unhide the div immediately prior to drawing the chart, and you can hide it again when the chart is done drawing. Here's example code that does this:
您可以按照 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);
回答by Manish
Use chartArea:{}to set width & height
使用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);
}
回答by Dario Vanin
I confirm that this is a bug. It work if the div is hidden "visibility:hidden;"
我确认这是一个错误。如果 div 被隐藏“visibility:hidden;”，它就会工作。
It does not work if the CSS shows "display:none"
如果 CSS 显示“display:none”则不起作用
回答by Marios Fakiolas
There is an option to ask for specific width and height the google chart api https://developers.google.com/chart/interactive/docs/customizing_charts?hl=es.
有一个选项可以要求谷歌图表 api https://developers.google.com/chart/interactive/docs/customizing_charts?hl=es 的特定宽度和高度。
回答by Anees Hameed
Directly give width in chart option.
直接在图表选项中给出宽度。
For eg:
例如：
options='{
"width": "800"
}'
