jquery - 在加载时设置 Google 图表宽度

Question

我有这个google chart on a my website 。目前这是一个散点图，但我想要所有类型图表的解决方案。例如，如果您使用 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 内的图表不适应其大小...它保持不变锁定与看图片:

Answer 1

由于可视化 API 图表根本不响应，因此您必须自己处理所有事情。通常，这意味着监听窗口“调整大小”事件并重新绘制图表(根据需要设置任何尺寸):

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