Google chart не принимает полную ширину в то время как jquery показать и скрыть

Я делаю диаграмму google, которая показывает и скрывает функциональность.Значит диаграмма будет скрыта на странице загрузки и при нажатии пользователем кнопки диаграмма станет видимой. Мой код 

<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>
3 7
javascript html css jquery google-visualization

3 ответа:

Вы можете сделать так, как предложил Мариос, и установить размеры внутри параметров этой диаграммы, но это не решит всех проблем, возникающих при рисовании диаграммы внутри скрытого div. Размерные измерения API визуализации плохо работают внутри скрытых дивов, поэтому элементы размещаются в неправильном месте и имеют неправильный размер в некоторых браузерах. Вы должны отобразить 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);
18

Используйте 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);
}
5

Существует возможность задать для определенной ширины и высоты API-интерфейса Google диаграммы https://developers.google.com/chart/interactive/docs/customizing_charts?hl=es.

1