我正在尝试让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布局来更好地管理容器和图表的大小。
相关·内容
我在我的webApp图表中生成了自动保存来自谷歌分析的数据，但它并不适用于所有设备 var dataChart1 = new gapi.analytics.googleCharts.DataChart
浏览 10提问于2017-03-07得票数 1
我想用我的PhoneGap应用程序检索设备屏幕的确切大小。我正在使用Googles图表API来检索一些图表，我想为平板电脑检索较大的图表，为手机检索较小的图表。此外，无论设备是纵向的还是横向的，我都想让它们适合屏幕。
要使用Google C
浏览 0提问于2012-02-04得票数 2
回答已采纳
1回答
我不是一个在超文本标记语言，CSS，或JavaScript专家，但我有这个网站，需要在所有设备上的反应。然而，由于某种原因，它似乎不起作用，相反，当我在移动web浏览器上查看网站时，它会造成很大的空白：下面是它的代码：<html><meta charset="utf-8"
浏览 0提问于2017-05-12得票数 0
我正在寻找一个图表库，它可以满足所有的要求，也可以满足所有的要求：
有人有什么建议吗？我正在使用Cakephp和P
浏览 2提问于2014-07-02得票数 1
2回答
有没有什么方法可以让dc.js图表响应呢？我使用的是Twitter Bootstrap 3，我将div的宽度存储到一个变量中，并将其传递给图表宽度。这不会使图表具有响应性。但在第一次加载时，图表会根据屏幕的大小达到宽度。
但是现在我面
浏览 0提问于2014-03-10得票数 19
我正在用CodePen编写一个网站，我一直在我的笔记本电脑(Macbook Air 13")上工作，所以我一直在设置我的参数，使其在那个尺寸的屏幕上看起来很好，因为当我在Mac Desktop上打开相同的代码时，事情并不像我需要的那样对齐。我在两台电脑上都使用了Chrome和CodePen。我如何才能获得相同的渲染效果？
浏览 18提问于2018-03-01得票数 0
1回答
我最近对我的技能部分中的容器和专栏进行了更改。当我在我的I上查看网站时，容器和列被挤压。它最初不是这样的，但我确实做了改变，现在如果它看起来有宽度:高于375px的任何东西，它只是被挤压，不是堆叠在一起。How it looks on my phone.
浏览 8提问于2020-07-25得票数 0
我正在尝试制作一个javascript google图表，当我测试响应性时，图表不会移动，直到我刷新屏幕和重新呈现图表。在我看来，这将成为一个问题，那就是把Ipad或手机变成对窗口的描绘或调整大小，而图表就不再以中心为中心。是否有办法在屏幕大小改变的情况下重新渲染图表？
浏览 2提问于2017-03-29得票数 1
回答已采纳
我创建了一个完整的网站HTML脚本，并把它放在谷歌网站上，并发布了这个网站。不高兴的是，当我看到这个网站用我的手机，它没有加载响应设计，甚至HTML代码响应设计。看起来，当我在google站点中加载脚本时，它会加载一个不改变大小的完整静态代码块。我怎么才能修好它？我已经看过是否有人有同样的问题，我已经找到一个人有同样的问题，但没
浏览 0提问于2021-03-12得票数 0
回答已采纳
我用的是来自的一个包装的大黄咖啡。为了显示这个简单的图表，我在我的Controller中使用()方法执行以下操作： {<div id="price_history_chart"></div>
{!!：
浏览 3提问于2016-01-24得票数 0
回答已采纳
2回答
嗨，我正在学习如何编写CSS媒体查询，我几乎在一开始就迷失了！如你所知，外面有几种尺寸的显示器，比如现在我的问题是，我如何找到所有这些显示器的标准宽度，以及如何在几个媒体查询中检测它们的宽度，这些查询可以涵盖从最大到最小的所有尺寸我</em
浏览 2提问于2012-11-30得票数 0
3回答
我曾尝试自定义Gantt Google图表的工具提示，但似乎不适用 data.addColumn({type: 'string', role: 'tooltip'});tooltip下面是由Google提供并由我改编的实现，如上所述。你知道为什么它不工作吗？
浏览 3提问于2015-11-18得票数 4
我对react-native还不太熟悉。我想让我的UI对所有类型的设备都有响应，就像在web开发中使用"SCSS“时我们用来使字体响应大众一样。现在，我的设计有了"dp“字体。我在寻找响应式的解决方案。因此，他们回答说，我们可以使用PixelRatio来获
浏览 22提问于2019-08-21得票数 0
我正在为我的期末项目构建一个游戏，我有以下问题： 当我尝试在屏幕上放置ImageView时，它们会被放置在不同的位置，这取决于移动屏幕的大小。(示例如下) https://i.ibb.co/WcgvNkq/screen.png (没有发布图片的名声) 所以我的问题是，我如何才能让ImageView对所有<e
浏览 29提问于2019-06-20得票数 2
回答已采纳
1回答
我正在使用React版本的ApexCharts，并且在页面上有许多这样的图表，我希望所有的图表都有相同的大小，但是，图表的大小似乎包括了计算图表大小时的图例的大小，导致具有多个值的图表与具有较少值的<em
浏览 26提问于2020-03-31得票数 0
2回答
我一直在考虑在我的Java服务器上实现Google Play许可证检查。这有可能吗？关于这件事，我还没有找到任何线索。我知道Android LVL是用Java编写的，但我不确定它是否能在dalvik机器之外运行。是否可以针对Google Play检查Google帐户名或某种设备ID，以检查是否在Java服务器应用程序中购买了应用程序？
浏览 0提问于2013-07-02得票数 3
回答已采纳
我提供了代码，使他们能够发布图表(先前生成了包含JSON的<script>元素)，将已发布的JSON复制到他们的CMS中，最终的结果是生成响应性<iframe>。问题是，这个iframe的内部内容现在完全由Google 用固定宽度的生成，而不是与包含的iframe匹配的宽度(我正在设置其宽度)。
我无法进
浏览 2提问于2015-01-16得票数 7
回答已采纳
1回答
我正在尝试创建一个在Excel中设置图表格式的宏，以便我的所有图表都具有相同的格式，但数据不同。通常我只会粘贴格式，但这些图表是使用插件制作的，它们似乎与“粘贴格式”不兼容。每个图表与图表数据一起位于不同的工作表中。
我的图表有3个系列。每个系列都有
浏览 1提问于2012-09-14得票数 2
2回答
我在一个项目中使用谷歌图表，但我有一个艰难的时间来使他们的反应。
我在响应图上看过其他的例子，但我似乎不能让它在我的情况下工作。Iǘ我在响应图上看到了其他的例子，但我似乎无法让它在我的情况下工作。我的所有图表都会被渲染，之后它们的大
浏览 2提问于2016-12-25得票数 9
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
