echarts - 条形图grid设置距离绘图区域的距离
在一些数据量过大的情况下,在一个固定的区域绘图往往需要对图表绘制区域的大小进行动态改变。这时候设置条形图距离绘图区域上下左右的距离可使用如下方式:表示条形图的柱子距离绘图区左边30%,距离右边40%,而距离顶部和底部分别为10px和15px。
但在实际操作中发现,如果上下边距也使用百分比,那么在数据切换的时候,不同数据量时第一条柱子距离绘图区域顶部和底部的高度并不一致!数据量大时,距离绘图区域顶部的距离就大,数据量变小,距离绘图区域顶部的距离就变小。
grid: {
x: '30%',
top: '10px',
bottom: '15px',
right: '40%'
}
对比后发现,grid中的百分比,其实指的是在当前数据量下,占绘图区域大小的比例。因此,在条形图高度确定的情况下,数据量大的,距离就会变大,数据量小的,距离就会变小。
如:指定每个条形图的高度为30px,grid设置的top值为1%。
则:在同一绘图范围内,如果其中一组数据含有30条记录,那么切换到该数据时距离顶部的距离为30*30*1% = 9px;另外一组为100条记录,那么第一条条形图距离绘图区顶部的距离就为100*30*1% = 30px;可以看出,这两组数据之间的切换,各自距离绘图区顶部的距离会各不相同。
而绘图区宽度由于是固定的,所以可以使用百分比进行设置,距离左右绘图区的距离不会因为设置百分比而不同。
同理。如果绘制的为柱状图,则在数据量过大时要能够使得绘图区域左右滑动而不至于使得柱状图过于贴近绘图区域边界,对left和right的设置就需要使用具体数值而不能使用百分比,而对上下边距的设置可以使用百分比。
echarts在一个指定大小的面板中展示条形图且需要对条形图的位置进行设置,不能使得图表过于贴紧绘图区边缘,且需要不同量级的数据切换的展示问题,完美解决。
echarts - 条形图grid设置距离绘图区域的距离的更多相关文章
- QT 设置有效绘图区域
void QPainter::setClipRect(int x, int y, int width, int height, Qt::ClipOperation operation = Qt::Re ...
- 【转】如何调整visio绘图区域尺寸大小
原文网址:http://jingyan.baidu.com/article/948f5924033870d80ff5f9f1.html 在使用microsoft visio软件绘图时,为了绘图的质量和 ...
- pyplot绘图区域
pyplot绘图区域 Matplotlib图像组成 matplotlib中,整个图像为一个Figure对象,与用户交互的整个窗口 Figure对象中包含一个或多个Axes(ax)子对象,每个ax子对象 ...
- echarts圆饼图设置默认选中项并在中间显示文字
效果: 代码: var myChart = echarts.init(document.getElementById('quanshi-echarts-two')); option = { grid: ...
- 小程序Echarts 构建中国地图并锚定区域点击事件
小程序Echarts 构建中国地图并锚定区域点击事件 Step1 效果展示 使用的绘图框架为 Echarts for Wexin 具体API文档地址请点击 ----> Step2 条件准备 1. ...
- matplotlib学习日记(十)-共享绘图区域的坐标轴
(1)共享单一绘图区域的坐标轴 ''' 上一讲介绍了画布的划分,有时候想将多张图放在同一个绘图区域, 不想在每个绘图区域只绘制一幅图形,这时候借助共享坐标轴的方法实现在一个绘图区 绘制多幅图形的目的. ...
- style在进行图形绘制前,要设置好绘图的样式
是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与css3权威指南>下面对其中最好玩的 ...
- 问题-[Delphi]在对GRID设置单击为编辑时,其他GRID可以,但有一个GRID不行?
问题现象:在对GRID设置单击为编辑时,其他GRID可以,但有一个GRID不行?问题原因:在这个GRID中的单击事件可能不存在,可以测试一下有没有单击事件.解决方法:需要在GRID的上一个类中,放开单 ...
- 怎样使用CSS设置文字与文字间距距离?
[文字与文字间距距离,字与字距离间距CSS如何设置?]如果你也遇到W3Cschool用户唐婷大小姐类似的问题不妨也到W3Cschool编程问答进行提问. 对于使用CSS解决字间距的方法W3Cschoo ...
随机推荐
- mysql双机热备的实现
转:http://blog.csdn.net/qq394829044/article/details/53203645 Mysql数据库没有增量备份的机制,当数据量太大的时候备份是一个很大的问题.还好 ...
- Angular:在应用初始化时运行代码
想象一下,您的应用需要一些动态配置信息,这些信息在应用启动之前需要动态获取,并在应用运行中使用. 显然不能直接写道静态配置文件中,但是从客户端发出的请求又是一个异步请求,如何协调这个问题呢? 这里,我 ...
- 图片转成base64位 页面中图片展示
<img src="data:image/gif;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABG ...
- Oracle中文排序问题
默认感觉中文是按拼音排序,如果没实现效果,请加上其它排序,例如日期 表名为 dept ,其中name字段是中文,下面分别实现按照单位名称的笔划.部首和拼音排序.1: //按照笔划排序2: select ...
- java面向对象的思想(java三大特性)
用通俗易懂的语言来理解java面向对象的思想 大家都知道,java是面向对象的编程,掌握面向对象的编程思想是掌握java编程语言的核心,但是很多人在面向对象方面都存在或多或少的误区,有的是刚学完C语言 ...
- springboot学习二:配置文件配置
springboot默认读取application*.properties #######spring配置####### spring.profiles.active=dev //引入开发配置文件 a ...
- POJ_1321
题目 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子的所有可行的摆 ...
- 7. mybatis:mapper-locations: 路径放在java路径下报错:org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)
解决方案:在pom.xml文件中的<build>标签内加上以下的<resources>内容即可 <build> <resources> <reso ...
- sql 条件汇总
select * from a pivot(sum([总业绩]) for 周期 in ([1月],[2月],[3月],[4月])) as b
- MSSQL 表修复语句
一早发现C盘爆满了,查询了下发现是mssql下面占用了几十G的log以及mdmp文件 一般发现这种文件就是代表着数据库出问题了. 检查数据库,发现某个数据库有问题,(回想起来前天做了一个操作,可能有问 ...