热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

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/

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

Thanks!

谢谢!

2 个解决方案

#1


5  

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


0  

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

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

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

推荐阅读
  • Coursera ML 机器学习
    2019独角兽企业重金招聘Python工程师标准线性回归算法计算过程CostFunction梯度下降算法多变量回归![选择特征](https:static.oschina.n ... [详细]
  • Ubuntu GamePack:专为游戏爱好者打造的Linux发行版
    随着Linux系统在游戏领域的应用越来越广泛,许多Linux用户开始寻求在自己的系统上畅玩游戏的方法。UALinux,一家致力于推广GNU/Linux使用的乌克兰公司,推出了基于Ubuntu 16.04的Ubuntu GamePack,旨在为Linux用户提供一个游戏友好型的操作环境。 ... [详细]
  • 本文介绍了如何在MATLAB中实现单变量线性回归,这是基于Coursera上Andrew Ng教授的机器学习课程中的一个实践项目。文章详细讲解了从数据可视化到模型训练的每一个步骤。 ... [详细]
  • 本文深入探讨了Linux MMC框架中的Host对象,详细介绍了其核心数据结构和API,旨在为理解和开发MMC设备驱动提供指导。 ... [详细]
  • 本文探讨了在WinForms环境中实现离线地图显示的方法。通过使用.NET框架,我们开发了一个简单的Windows表单应用程序,用于展示特定省份的地图,并实现了地图的可视化功能。此外,还介绍了如何优化地图数据的加载和渲染,以提高应用性能和用户体验。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 在 Windows 10 中,F1 至 F12 键默认设置为快捷功能键。本文将介绍几种有效方法来禁用这些快捷键,并恢复其标准功能键的作用。请注意,部分笔记本电脑的快捷键可能无法完全关闭。 ... [详细]
  • 资源推荐 | TensorFlow官方中文教程助力英语非母语者学习
    来源:机器之心。本文详细介绍了TensorFlow官方提供的中文版教程和指南,帮助开发者更好地理解和应用这一强大的开源机器学习平台。 ... [详细]
  • Explore a common issue encountered when implementing an OAuth 1.0a API, specifically the inability to encode null objects and how to resolve it. ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • MySQL索引详解与优化
    本文深入探讨了MySQL中的索引机制,包括索引的基本概念、优势与劣势、分类及其实现原理,并详细介绍了索引的使用场景和优化技巧。通过具体示例,帮助读者更好地理解和应用索引以提升数据库性能。 ... [详细]
  • 本文介绍如何在Linux Mint系统上搭建Rust开发环境,包括安装IntelliJ IDEA、Rust工具链及必要的插件。通过详细步骤,帮助开发者快速上手。 ... [详细]
  • 本文详细介绍了如何在 Windows 环境下使用 node-gyp 工具进行 Node.js 本地扩展的编译和配置,涵盖从环境搭建到代码实现的全过程。 ... [详细]
  • DAO(Data Access Object)模式是一种用于抽象和封装所有对数据库或其他持久化机制访问的方法,它通过提供一个统一的接口来隐藏底层数据访问的复杂性。 ... [详细]
  • 利用PaddleSharp模块在C#中实现图像文字识别功能测试
    PaddleSharp 是 PaddleInferenceCAPI 的 C# 封装库,适用于 Windows (x64)、NVIDIA GPU 和 Linux (Ubuntu 20.04) 等平台。本文详细介绍了如何使用 PaddleSharp 在 C# 环境中实现图像文字识别功能,并进行了全面的功能测试,验证了其在多种硬件配置下的稳定性和准确性。 ... [详细]
author-avatar
沉醉在温柔箱
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有