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