响应式多个谷歌图表

【问题标题】：Responsive more than one google charts响应式多个谷歌图表
【发布时间】：2015-06-04 08:46:16
【问题描述】：

我在我的网站上使用谷歌图表，从昨天开始我一直在寻找一种让我的图表具有响应性的解决方案，我在 stackoverflow 中找到了一个：

<script>
function resize () {
    // change dimensions if necessary
    chart.draw(dataTable1, options);
    chart.draw(dataTable2, options);
    chart.draw(dataTable3, options);
}
if (window.addEventListener) {
    window.addEventListener('resize', resize);
}
else {
    window.attachEvent('onresize', resize);
}
</script>

但问题是当我使用多个图表时，只有一个会响应，示例在这里：http://jsfiddle.net/faissal_aboullait/5f92veyy/

【问题讨论】：

标签： javascript charts google-visualization

【解决方案1】：

问题在于您使用的是同一个 var 图表。

当然，再次使用它，图表变量将保留第三张图表的引用。

像这样为每个图表声明一个不同的变量：

var reservationChart; 
//............
reservationChart = new google.visualization.ColumnChart(document.getElementById('chart_reservations'));
reservationChart.draw(dataTable1, options);

然后resize函数会是这样的：

function resize () {
        // change dimensions if necessary
        reservationChart.draw(dataTable1, options);
        clientsChart.draw(dataTable2, options);
        deprecChart.draw(dataTable3, options);
    }

这里有一个更新的小提琴： http://jsfiddle.net/d8vaxuug/

【讨论】：

好的，非常感谢