调整谷歌图表以填充div的宽度和高度-SizingGooglechartstofilldivwidthandheight

作者：沉醉在温柔箱 | 来源：互联网 | 2023-05-17 15:54

JustgettingstartedinGooglechartsandImtryingtocreatealinegraphthatfillstheavailable

Just getting started in Google charts and I'm trying to create a line graph that fills the available space. Seems like the charts are locked in a certain aspect ratio though as no matter what I change the height and width properties to for the chart and chart div element, the result doesn't match my dimensions.

刚开始使用谷歌图表，我想创建一个填满可用空间的线形图。似乎图表被锁定在一个特定的长宽比中，尽管无论我如何为图表和图表div元素更改高度和宽度属性，结果都与我的尺寸不匹配。

Are Google charts fixed that way or is there an override or aspect ratio option that I am missing?

谷歌图表是按照这种方式修复的吗?还是我没有覆盖或纵横比选项?

You can find an example here:

你可以在这里找到一个例子:

http://www.walkingcarpet.net/graphs/unemployment-rate/

Thanks!

谢谢!

2 个解决方案

#1

in addition to setting the width option,

除了设置宽度选项外，

set chartArea.width to ensure the chart utilizes the available space

设置chartArea。宽度确保图表利用了可用的空间

also, when the window is resized, the chart needs to be redrawn

此外，当窗口大小调整时，图表需要重新绘制。

see following working snippet...

看到以下工作片段…

google.charts.load('current', {
  callback: function () {
    drawChart();
    $(window).resize(drawChart);
  },
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [0, 0],
    [1, 1],
    [2, 3],
    [3, 7],
    [4, 15],
    [5, 31]
  ]);

  var optiOns= {
    chartArea: {
      // leave room for y-axis labels
      width: '94%'
    },
    legend: {
      position: 'top'
    },
    width: '100%'
  };

  var cOntainer= document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  chart.draw(data, options);
}

EDIT

编辑

among others, chartArea also has a property for left

除此之外，chartArea还有一个“左”属性

instead of using chartArea.width: '94%'

而不是使用chartArea。宽度:94%

try setting an absolute left

试着设置一个绝对左边。

see following working snippet...

看到以下工作片段…

google.charts.load('current', {
  callback: function () {
    drawChart();
    $(window).resize(drawChart);
  },
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [0, 0],
    [1, 1],
    [2, 3],
    [3, 7],
    [4, 15],
    [5, 31]
  ]);

  var optiOns= {
    chartArea: {
      left: 40,
      width: '100%'
    },
    legend: {
      position: 'top'
    },
    width: '100%'
  };

  var cOntainer= document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  chart.draw(data, options);
}

#2

This CodePen shows an example of making Google Charts responsive. Specifically, the charts are redrawn on resize:

这个代码页显示了一个使谷歌图表响应的示例。具体地说，图表是在调整大小时重新绘制的:

$(window).resize(function(){
  drawChart1();
  drawChart2();
});

推荐阅读

io
Java太阳系小游戏分析和源码详解

本文介绍了一个基于Java的太阳系小游戏的分析和源码详解。通过对面向对象的知识的学习和实践，作者实现了太阳系各行星绕太阳转的效果。文章详细介绍了游戏的设计思路和源码结构，包括工具类、常量、图片加载、面板等。通过这个小游戏的制作，读者可以巩固和应用所学的知识，如类的继承、方法的重载与重写、多态和封装等。 ... [详细]

蜡笔小新 2023-12-14 19:53:34
io
JS进修笔记——闭包的运转机制和作用域

本文介绍了闭包的定义和运转机制，重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则，闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]

蜡笔小新 2023-12-14 18:45:00
less
在类中定义数组时出错 - Error on defining arrays in class

Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]

蜡笔小新 2023-12-14 17:38:12
bit
Android开发笔记：使用Picasso加载网络图片等比例缩放

在Android开发中，使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法，并提供了具体的代码实现。通过获取图片的宽高，计算目标宽度和高度，并创建新图实现等比例缩放。 ... [详细]

蜡笔小新 2023-12-14 17:34:00
bit
Linux重启网络命令实例及关机和重启示例教程

本文介绍了Linux系统中重启网络命令的实例，以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法，以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]

蜡笔小新 2023-12-14 15:52:52
bit
android listview OnItemClickListener失效原因

最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 14:25:50
bit
Android 7自学笔记总结、移动架构视频、安卓面试真题、项目实战源码讲义

本文介绍了Android 7的学习笔记总结，包括最新的移动架构视频、大厂安卓面试真题和项目实战源码讲义。同时还分享了开源的完整内容，并提醒读者在使用FileProvider适配时要注意不同模块的AndroidManfiest.xml中配置的xml文件名必须不同，否则会出现问题。 ... [详细]

蜡笔小新 2023-12-13 10:06:58
bit
Express App如何提供不需要的静态文件？

本文介绍了如何使用Express App提供静态文件，同时提到了一些不需要使用的文件，如package.json和/.ssh/known_hosts，并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]

蜡笔小新 2023-12-12 14:38:07
usb
CEPH LIO iSCSI Gateway及其使用参考文档

本文介绍了CEPH LIO iSCSI Gateway以及使用该网关的参考文档，包括Ceph Block Device、CEPH ISCSI GATEWAY、USING AN ISCSI GATEWAY等。同时提供了多个参考链接，详细介绍了CEPH LIO iSCSI Gateway的配置和使用方法。 ... [详细]

蜡笔小新 2023-12-12 10:10:14
input
【Vue】表单 input 绑定

网址：https:vue.docschina.orgv2guideforms.html表单input绑定基础用法可以通过使用v-model指令，在 ... [详细]

蜡笔小新 2023-12-11 18:07:28
go
Android系统源码分析Zygote和SystemServer启动过程详解

本文详细解析了Android系统源码中Zygote和SystemServer的启动过程。首先介绍了系统framework层启动的内容，帮助理解四大组件的启动和管理过程。接着介绍了AMS、PMS等系统服务的作用和调用方式。然后详细分析了Zygote的启动过程，解释了Zygote在Android启动过程中的决定作用。最后通过时序图展示了整个过程。 ... [详细]

蜡笔小新 2023-12-11 17:46:46
instance
利用RxJava实现的事件总线（Event Bus）及其使用方法介绍

本文介绍了RxJava在Android开发中的广泛应用以及其在事件总线（Event Bus）实现中的使用方法。RxJava是一种基于观察者模式的异步java库，可以提高开发效率、降低维护成本。通过RxJava，开发者可以实现事件的异步处理和链式操作。对于已经具备RxJava基础的开发者来说，本文将详细介绍如何利用RxJava实现事件总线，并提供了使用建议。 ... [详细]

蜡笔小新 2023-12-11 12:16:40
instance
Okhttp3爬取验证码及获取Cookie

目前正在做毕业设计，一个关于校园服务的app，我会抽取已完成的相关代码写到文章里。一是为了造福这个曾经帮助过我的社区，二是写文章的同时更能巩固相关知识的记忆。一、前言在爬取教务系统 ... [详细]

蜡笔小新 2023-10-16 12:59:18
php
Guava6:ConcurrencyGuava1:概览Guava3:集合CollectionsGuava6:ConcurrencyGuava12:GuavaEventBus源码剖析

系列目录Guava1:概览Guava2:Basicutilities基本工具Guava3:集合CollectionsGuava4:GuavacacheGuava6:Concurre ... [详细]

蜡笔小新 2023-10-15 16:29:30
search
jQuery Datatables表头和表格内容不对齐、表头坍塌、js/jQuery处自定义Datatable表格各列表格内容的位置、css设置Datatable表格内容居中

Datatables是一款基于jQuery的表格插件，在日常使用中我们多多少少会遇到一些疑难杂症的问题，例如表头和表体对不齐，表头坍塌&# ... [详细]

蜡笔小新 2023-10-15 12:46:42

沉醉在温柔箱

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章