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：{} 设置宽度＆amp;高度

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

Answer 3

我确认这是一个错误。如果div隐藏为“ visibility：hidden;”，则可以正常工作。

如果CSS显示“ display：none”，则不起作用

Answer 4

可以选择询问Google图表API https://developers.google.com/chart/interactive/docs/customizing_charts?hl=es的特定宽度和高度。

Answer 5

直接在图表选项中提供宽度。

例如：

options='{
 "width": "800"
}'

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

5 个答案: