jquery – 响应式Google图表的最佳实践

我有这个 google chart on a my website.它现在是一个Scatter图表,但我想要所有类型的图表的解决方案.
例如,如果您使用700像素宽的窗口加载网站,则图表尺寸不响应：图表太宽.
以下是我正在使用的代码.

你能帮助我吗 ？

谢谢

HTML：

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

CSS：

#chart_div {
    width:100%;
    height:20%;
}

JS：

var options = {
        title: 'Weight of pro surfer vs. Volume of his pro model',hAxis: {title: 'Weight (kg)',minValue: 53,maxValue: 100},//55
        vAxis: {title: 'Volume (l)'},//,minValue: 20,maxValue: 40},//20
        legend: 'none',width: '100%',height: '100%',colors: ['#000000'],series: {
                  1: { color: '#06b4c8' },},legend: {position: 'top right',textStyle: {fontSize: 8}},chartArea: {width: '60%'},trendlines: { 0: {//type: 'exponential',visibleInLegend: true,color: 'grey',linewidth: 2,opacity: 0.2,labelInLegend: 'Linear trendline\n(Performance)'
                    } 
                }    // Draw a trendline for data series 0.
    };
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));        
    chart.draw(data,options);
    google.visualization.events.addListener(chart,'ready',myReadyHandler());

    function myReadyHandler() {
        chartDrawn.resolve();       }

编辑：似乎div #chart_div具有正确的大小(我用css设置的那个),但是这个div中的图表不适应它的大小……它保持锁定状态
看图像：

解决方法

由于Visualization API图表根本没有响应,因此您必须自己处理所有内容.通常,这意味着要监听窗口“调整大小”事件并重新绘制图表(根据需要设置任何尺寸)：

function resize () {
    // change dimensions if necessary
    chart.draw(data,options);
}
if (window.addEventListener) {
    window.addEventListener('resize',resize);
}
else {
    window.attachEvent('onresize',resize);
}