[英]Re-sizing Google chart in window
请帮助我如何在窗口调整大小时自动调整 Google 图表的大小。
这是一些代码:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Day', 'Open ticket', 'Closed ticket'],
['Day 1', 10, 400],
['Day 2', 170, 460],
['Day 3', 60, 1120],
['Day 4', 30, 540],
]);
var options = {
title: 'DAILY GRAPH',
hAxis: {title: 'NOVEMBER', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
这是一种方法:
添加此事件处理程序:
window.onresize = drawChart;
然后将图表宽度和高度基于窗口宽度和高度的百分比:
var width = .4 * window.innerHeight;
var height = .4 * window.innerWidth;
var options = {
title: 'DAILY GRAPH',
width: width,
height: height,
hAxis: { title: 'NOVEMBER', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 }
};
您可以在head
部分以百分比定义width
和height
,例如:
<style>
#chart_div {
width: 80%;
height: 100%;
}
</style>
并将用于调整窗口大小的事件侦听器添加到drawChart()
方法的末尾:
...
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
window.addEventListener('resize', function() {
chart.draw(data, options);
}, false);
}
请参阅jsbin 中的示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.