antV G2 为柱状图添加背景颜色
工作中需要在基础柱状图的基础上添加一个自定义高度的背景颜色,
基础柱状图:
目标柱状图:
由于chart绘图可以重叠,通过该特性,我们可以在画两次图重叠在一起,第一次绘图描述背景,第二次绘图描述数据,代码如下
修改前的源代码如下:
const data = [
{ name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
{ name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
{ name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
{ name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
{ name: 'London', 月份: 'May', 月均降雨量: 47 },
{ name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
{ name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
{ name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
{ name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
{ name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
{ name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
{ name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
{ name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
{ name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
{ name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
{ name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 }
]; const chart = new G2.Chart({
container: 'container',
forceFit: true,
height: 500
});
chart.source(data);
chart.interval().position('月份*月均降雨量').color('name')
.adjust([{
type: 'dodge',
marginRatio: 1 / 32
}]);
chart.render();
修改后的源代码如下:
const data = [
{ name: 'London', 月份: 'Jan.', 月均降雨量: 18.9, max:100},
{ name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 , max:100},
{ name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 , max:100},
{ name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 , max:100},
{ name: 'London', 月份: 'May', 月均降雨量: 47 , max:100},
{ name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 , max:100},
{ name: 'London', 月份: 'Jul.', 月均降雨量: 24 , max:100},
{ name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 , max:100},
{ name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 , max:100},
{ name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 , max:100},
{ name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 , max:100},
{ name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 , max:100},
{ name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 , max:100},
{ name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 , max:100},
{ name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 , max:100},
{ name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 , max:100}
]; const chart = new G2.Chart({
container: 'container',
forceFit: true,
height: 500
});
chart.source(data);
chart.interval().position('月份*max').color('#D5D5D5').opacity(0.3); //第一次绘图,绘制背景,color设置颜色,opacity设置透明度
chart.interval().position('月份*月均降雨量').color('name') //第二次绘图,绘制数据
.adjust([{
type: 'dodge',
marginRatio: 1 / 32
}]);
chart.render();
antV G2 为柱状图添加背景颜色的更多相关文章
- 如何在Word表格中的某一栏添加背景颜色
如何在Word表格中的某一栏添加背景颜色 编写人:CC阿爸 2014-3-14 用鼠标选中某一个单元格然后右键单击 下拉菜单选择.<边框和低纹>然后点<低纹>选项卡 选中色卡 ...
- java图形用户界面添加背景颜色不成功的解决方案
总结:背景颜色不成功,那么使用这个方法试试.getContentpane(); package clientFrame; import java.awt.Color; import java.awt. ...
- VS2008给对话框添加背景颜色
第一种方法如下: 在对话框OnPaint()函数中添加代码 //改变对话框背景颜色 CRect rect; CPaintDC dc(this); GetClientRect(rect); dc.Fil ...
- Java 给 PowerPoint 文档添加背景颜色和背景图片
在制作Powerpoint文档时,背景是非常重要的,统一的背景能让Powerpoint 演示文稿看起来更加干净美观.本文将详细讲述如何在Java应用程序中使用免费的Free Spire.Present ...
- VBA在Excel中的应用(一):改变符合条件单元格的背景颜色
在使用excel处理数据的时候,为了能更清晰的标示出满足特定条件的单元格,对单元格添加背景色是不错的选择.手工处理的方式简单快捷,但是当遇到大批量数据,就会特别的费时费力,而且不讨好(容易出错).通过 ...
- PDF如何去除背景,PDF去除背景颜色
PDF文件在使用的时候大多都是单调的白色背景,但是也有小伙伴再制作PDF文件的时候会给PDF文件添加背景颜色,会有影响文字阅读的情况,这个时候就需要把背景颜色去除了,那么该怎么做呢,不会的小伙们就跟小 ...
- 怎么给button设置背景颜色?【Android】
怎么给button设置背景颜色?[Android] 怎么给button设置背景颜色?[Android] 现在我想给按钮添加背景颜色,怎么做 1.android:background="@an ...
- ios开发之--调整UISearchBar的输入框的背景颜色
遍历UISearchBar的子视图,找到输入框坐在的view,添加背景颜色即可. 代码如下: UISearchBar *searchBar = [[UISearchBar alloc] initWit ...
- excel 创建数据有效性及背景颜色
需求:用excel做数据或者表格时经常需要在一列中给出固定的几个进行悬着,这是如果每次键盘输入降低工作效率.如果做成鼠标双击进行选择,则提高很多效率,比如需要给一列填写Pass或Failure时,具体 ...
随机推荐
- Java,该学什么?
本人大学学的是生物技术专业,毕业后入坑Java. 最近有人问我是如何转行的,需要学一些什么.我在网上看到一篇帖子,觉得写得很全.如果是我来写,可能还写不了这么全的.在此分享给网友. 2019秋招几个月 ...
- Element-ui 下拉列表 选项过多时通过自定义搜索来解决卡顿问题
当使用Select选择器时,如果下拉列表的数据量太多,会有一个明显的卡顿体验,例如: <!DOCTYPE html> <html lang="en"> &l ...
- python __getattr__和 __getattribute__
__getattr__ 这个魔法函数会在类中查找不到属性时调用 class User: def __init__(self): self.info = 1 def __getattr__(self, ...
- Business Model Design 业务模型设计
Note This section is split into two parts, which describe the use of two different Object-relational ...
- 清新简约风格毕业论文答辩PPT模板推荐
不管是学生还是老师,应该经常会需要学生答辩的PPT模板,今天给大家推荐织梦58的学生答辩ppt模板. 模版来源:http://ppt.dede58.com/gongzuohuibao/26494.ht ...
- springcloud Springboot vue.js Activiti6 前后分离 跨域 工作流 集成代码生成器 shiro权限
1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...
- 机器学习pipeline总结
# -*- coding: utf-8 -*- """scikit-learn introduction Automatically generated by Colab ...
- 松软科技web课堂:SQLServer之MIN() 函数
MIN() 函数 MIN 函数返回一列中的最小值.NULL 值不包括在计算中. SQL MIN() 语法 SELECT MIN(column_name) FROM table_name 注释:MIN ...
- Python 函數 Function
函數最初被設計出來,是用來減輕重複 coding 一段相同的代碼,這之間只有代碼 (方法,Method) 的重用,但還沒有物件導向OO整個Object 的屬性與方法被封裝重用的概念. 函數的定義很簡單 ...
- OC-AVAudioSession的知识小记
参考文章:https://www.cnblogs.com/junhuawang/p/7920989.html 音频输出作为硬件资源,对于iOS系统来说是唯一的,那么要如何协调和各个App之间对这个稀缺 ...