如何使 Google 饼图响应？

Question

我有一个 Google 饼图，它工作正常但没有响应，如何让它响应？

---

这是我正在制作饼图的 <div>。

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

这是我的代码 fiddle。

Answer 1

这是一个解决方案，使用 throttledresize.js。

1) 将您的 div id="chart_div" 放入父级 div

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

---

2) 设置这些 div 的样式

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

Demo on JSFiddle

Answer 2

世界上最简单的方法：

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