響應多個Google圖表

Question

我在網站上使用Google圖表，從昨天開始，我一直在尋找一種使圖表具有響應能力的解決方案，所以我在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/

Answer 1

問題是您使用的是相同的無功圖。

當然，要再次使用它，chart變量將保留第三個圖表的引用。

為每個圖表聲明一個不同的變量，如下所示：

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

然后，調整大小函數將如下所示：

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

更新的小提琴在這里： http : //jsfiddle.net/d8vaxuug/