我正在尝试让google图表对所有设备的大小都有响应
要让Google图表对所有设备的大小都有响应，你可以使用CSS媒体查询和JavaScript来动态调整图表的大小。以下是一个基本的示例，展示了如何实现这一点：
HTML
首先，创建一个包含图表的容器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Google Chart</title>
<style>
/* 基本的容器样式 */
#chart_div {
width: 100%;
height: 400px; /* 默认高度 */
}
/* 媒体查询，根据屏幕宽度调整高度 */
@media (max-width: 600px) {
#chart_div {
height: 300px;
}
}
@media (max-width: 400px) {
#chart_div {
height: 200px;
}
}
</style>
</head>
<body>
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// 监听窗口大小变化，重新绘制图表
window.addEventListener('resize', function() {
chart.draw(data, options);
});
chart.draw(data, options);
}
</script>
</body>
</html>解释
- CSS媒体查询：
- 默认情况下，图表容器的高度设置为400px。
- 使用媒体查询根据屏幕宽度调整高度。例如，当屏幕宽度小于600px时，高度调整为300px；当屏幕宽度小于400px时，高度调整为200px。
- JavaScript：
- 加载Google Charts库并设置回调函数
drawChart。 - 在
drawChart函数中，创建数据表并设置图表选项。 - 使用
window.addEventListener('resize', ...)监听窗口大小变化，并在每次变化时重新绘制图表。
- 加载Google Charts库并设置回调函数
通过这种方式，图表会根据屏幕大小动态调整其尺寸，从而实现响应式设计。
进一步优化
- 你可以根据需要添加更多的媒体查询，以更精细地控制不同屏幕尺寸下的图表大小。
- 如果你有更复杂的需求，可以考虑使用CSS Flexbox或Grid布局来更好地管理容器和图表的大小。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
