我正在制作一个谷歌图表与显示和隐藏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>
发布于 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);
发布于 2018-12-05 08:38:08
我确认这是一个bug。如果div是隐藏的“可见性:隐藏;”
如果CSS显示"display:none“,则不起作用。
发布于 2013-12-31 18:01:10
有一个选项可以要求google图表api https://developers.google.com/chart/interactive/docs/customizing_charts?hl=es提供特定的宽度和高度。
https://stackoverflow.com/questions/20855366
复制相似问题