Charts 谷歌柱形图，让它响应
早上好，我有一个谷歌柱形图，工作得很好，但当我重新调整浏览器的大小时，柱形图溢出，无法重新调整大小。我的网站是响应，我不想把我的条形图这样。如何让我的柱状图响应 我从developers.google.com/chart/interactive/docs/gallery/columnchart获得了这个柱状图 这是密码Charts 谷歌柱形图，让它响应,charts,column-chart,Charts,Column Chart,早上好，我有一个谷歌柱形图，工作得很好，但当我重新调整浏览器的大小时，柱形图溢出，无法重新调整大小。我的网站是响应，我不想把我的条形图这样。如何让我的柱状图响应 我从developers.google.com/chart/interactive/docs/gallery/columnchart获得了这个柱状图 这是密码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title><?php echo $title;?></title>
<!-- Load Google chart api -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical',
vAxis: {format: 'decimal'},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var btns = document.getElementById('btn-group');
btns.onclick = function (e) {
if (e.target.tagName === 'BUTTON') {
options.vAxis.format = e.target.id === 'none' ? '' : e.target.id;
chart.draw(data, google.charts.Bar.convertOptions(options));
}
}
}
</script>
</head>
<body>
<div id="chart_div" style="width:100%;"></div>
<br/>
<div id="btn-group">
<button class="button button-blue" id="none">No Format</button>
<button class="button button-blue" id="scientific">Scientific Notation</button>
<button class="button button-blue" id="decimal">Decimal</button>
<button class="button button-blue" id="short">Short</button>
</div>
</body>
</html>
load（'current'，{'packages'：['bar']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”、“利润”]，
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
变量选项={
图表：{
标题：“公司业绩”，
字幕：“销售、费用和利润：2014-2017”，
},
酒吧：“垂直”，
变量：{format:'decimal'}，
身高：400，
颜色：['1b9e77'、'd95f02'、'7570b3']
};
var chart=new google.charts.Bar（document.getElementById（'chart_div'）；
绘制（数据，google.charts.Bar.convertOptions（选项））；
var btns=document.getElementById（'btn-group'）；
btns.onclick=函数（e）{
如果（e.target.tagName===‘按钮’）{
options.vAxis.format=e.target.id=='none'？''：e.target.id；
绘制（数据，google.charts.Bar.convertOptions（选项））；
}
}
}
无格式
科学符号
十进制的
短
我还试图从div中添加width=“100%”，但它根本不起作用。目前，谷歌图表的问题是它没有响应功能 根据之前在web上的探索，我找到并实施的最佳解决方案是：
$(window).resize(function () {
drawChart();
});
drawChart（）.resize（）