Как сделать Google piechart отзывчивым?

У меня есть круговая диаграмма Google , которая отлично работает, но она не реагирует, как сделать ее отзывчивой?

Вот <div>, на котором я формирую piechart.

<div id="piechart" style="width: 900px; height: 500px;"></div>

Здесь есть скрипка из моего кодекса.

2 5
html css twitter-bootstrap google-visualization

2 ответа:

Вот решение, используя throttledresize.js .

1) поместите свой div id="chart_div" в родительский div 

<div id="chart_wrap">
    <div id="chart_div"></div>
</div>

2) стиль этих дивов 

#chart_wrap {
    position: relative;
    padding-bottom: 100%;
    height: 0;
    overflow:hidden;
}

#chart_div {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
}

Примечание: адаптируйте CSS к вашим потребностям.

3) Добавьте этот код в конце вашего JS 
$(window).on("throttledresize", function (event) {
    var options = {
        width: '100%',
        height: '100%'
    };

    var data = google.visualization.arrayToDataTable([]);
    drawChart(data, options);
});

Демо на JSFiddle

10

Самый простой метод в мире: 

var options = {'width':'auto', 'height':'auto'};
0