Css 谷歌图表大小问题

多个图表显示在一个页面上，一些用户的屏幕较大，一些用户的标准屏幕较小

有没有办法使其具有灵活的宽度，以便适合任何尺寸的显示器屏幕

我尝试过将宽度设置为100%，但没有效果

<table width="100%">
<tr>
<td>
    <div id="chart_GP" class="chart_div">
        <div class="chart_preloader">&nbsp;</div>
    </div>
</td>
<td id="td_profit">
    <div id="chart_Profit" class="chart_div">
            <div class="chart_preloader">&nbsp;</div>
    </div>
</td>

<td>
    <div id="chart_Visits" class="chart_div">
        <div class="chart_preloader">&nbsp;</div>
    </div>
</td>
</tr>
</table>

谷歌图表选项

var options = {
        title: "Last 12 Months Gross Profit per Month",
        animation: {
            duration: 1500,
            startup: true //This is the new option
        },
        pointSize: 5,
        curveType: 'function',
        backgroundColor: chart_background_Color,
        colors: [chartLine_Color],
        legend: 'none',
        width: 385,
        height: 250,
        tooltip: { isHtml: true },
        hAxis: {
            slantedText: true,
            slantedTextAngle: 90
        },
        vAxis: {
            title: 'Profit',
            titleTextStyle: { italic: false, fontName: 'Calibri', fontSize: '12', bold: 'false' }
            //format: '#\'%\''
        }
    };

---

建议将宽度设置排除在图表选项之外，并使用css布局
接下来的图表是什么

很少使用表，所以取决于您所寻找的布局，下面是一个示例

要使图表响应，请在窗口调整大小时重新绘制图表

google.charts.load（'current'{
回调：函数（）{
var data=new google.visualization.DataTable（）；
data.addColumn（“日期”、“时间”）；
data.addColumn（“编号”、“评级”）；
data.addRows([
[新日期（2015年0月1日），5]，
[新日期（2015年0月7日），3]，
[新日期（2015年0月14日）3]，
[新日期（2015年0月21日），2]，
[新日期（2015年0月28日）8]
]);
变量选项={
标题：“最近12个月每月毛利润”，
动画：{
持续时间：1500，
startup:true//这是新选项
},
点数：5，
curveType:'函数'，
背景颜色：“青色”，
颜色：[“红色”]，
图例：“无”，
身高：250，
工具提示：{isHtml:true}，
哈克斯：{
是的，
倾斜角度：90
},
言辞：{
标题:"利润",，
titleTextStyle:{italic:false，fontName:'Calibri'，fontSize:'12'，bold:'false'}
//格式：'\'%\''
}
};
var chart1=新的google.visualization.LineChart（document.getElementById（'chart_GP'）；
绘图图（图1）；
var chart2=新的google.visualization.LineChart（document.getElementById（'chart_-profice'）；
绘图图（图2）；
var chart3=新的google.visualization.LineChart（document.getElementById（'chart_visions'）；
图纸（图3）；
//使图表具有响应性
window.addEventListener（'resize'，函数（）{
绘图图（图1）；
图纸（图表2）；
图纸（图3）；
}，假）；
功能图（图表）{
图表绘制（数据、选项）；
}
},
软件包：['corechart']
});
.chart\u预加载程序{
高度：250px；
宽度：100%；
背景：url（'/images/pie.gif'）中心不重复；
背景色：#EEF；
}
.仪表板{
文本对齐：居中；
}
#图表总成{
浮动：左；
}
#利润表{
显示：内联块；
}
#图库访问{
浮动：对；
}
.图表组{
边框颜色：#006699；
边框样式：实心；
边框宽度：1px；
宽度：32%；
}

正如我在问题中提到的，宽度100%不起作用。我想你误解了我的问题，我不是在看响应面，我希望图表在第一次加载时可以在任何大小的显示器上绘制。没有看到，但是的，这是可能的——上面的答案已更改
var options = {
        title: "Last 12 Months Gross Profit per Month",
        animation: {
            duration: 1500,
            startup: true //This is the new option
        },
        pointSize: 5,
        curveType: 'function',
        backgroundColor: chart_background_Color,
        colors: [chartLine_Color],
        legend: 'none',
        width: 385,
        height: 250,
        tooltip: { isHtml: true },
        hAxis: {
            slantedText: true,
            slantedTextAngle: 90
        },
        vAxis: {
            title: 'Profit',
            titleTextStyle: { italic: false, fontName: 'Calibri', fontSize: '12', bold: 'false' }
            //format: '#\'%\''
        }
    };