Диаграмма Google не принимает полную ширину, а jquery show и скрывает

Я делаю диаграмму 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>

Ответ 1

Вы можете сделать так, как предложили марионы, и задать размеры внутри этих параметров диаграммы, но это не устранит все проблемы, возникающие при рисовании диаграммы внутри скрытого 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);

Ответ 2

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

Ответ 3

Я подтверждаю, что это ошибка. Он работает, если div скрыт "видимость: скрыта";

Это не работает, если CSS показывает "display: none"

Ответ 4

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

Ответ 5

Непосредственно укажите ширину в параметре диаграммы.

Например:

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