[Ext JS 4] 实战之Chart, Column Chart 定制颜色
前言
在Ext js 中,可以绘制柱状图和条状图。
柱状图 -- Column chart, 柱子是竖直方向的。
条状图 -- Bar Chart, 柱子是水平方向的。
上面的例子一个条状图的例子。
默认状况下, Ext Js 会使用 绿色,蓝色,深红,淡红这样的顺序来配色。
如果查看Ext js 源代码, 在 chart.theme目录下的 Base.js 文件中,有以下的代码,
colors: [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"],
其实不难理解, Ext js 默认使用Base 这种主题来配置图形的颜色。
而实际开发过程中, 我们有给图形定制自己的颜色的需求, 如何实现?
总体来说,实现的方法有两种:
1. 定义新的theme ,并给出自己需要的颜色序列。(在图绘制之前)
2. 配置 chart 的series
[Ext JS 4] 实战之Chart, Column Chart 定制颜色相关推荐
- [Ext JS 4] 实战之多选下拉单 (带checkbox) 续 - 带ALL 选项
前言 在 [Ext JS 4] 实战之多选下拉单 (带checkbox) 这一篇中有介绍如何开发带有checkbox 的多选菜单. 但是实际项目开发过程中, 用户的需求也是不断精进的. 使用淘宝或是其 ...
- [Ext JS 4] 实战之Load Mask - 在Grid Reconfigure的使用状况
前言 关于 Extjs 的 load mask 的使用,可以参考: [Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏 一般而言,在如下情况下可能要使用grid 的 reconfi ...
- [Ext JS 4] 实战之Grid, Tree Gird 动态添加列续(性能考虑)
前言 延续: [Ext JS 4] 实战之Grid, Tree Gird 动态添加列 这一篇. 在上一篇中有提到在grid 中如何进行带隐藏栏位的动态添加方式.归纳一下思路就是: 先显示,后隐藏. 当 ...
- [Ext JS 4] 实战之Grid, Tree Gird 动态添加行
前言 在 [Ext JS 4] 实战之Grid, Tree Gird 动态添加列 这一篇中,有介绍到如何动态添加一列 -- 设置新columns 后调用reconfigure 方法. 这里来承接这一篇 ...
- [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)
前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件 ==> "2. 每年的周数从(1-52), 如果超 ...
- [Ext JS 4] 实战之 带week(星期)的日期选择控件(二)
前言 JavaScript 中的日期和时间 [Ext JS 4] 实战之 带week(星期)的日期选择控件(一) 如对本篇的一些预备知识需详尽了解,可参考以上两篇. Javascript 有提供Dat ...
- [Ext JS 4] 实战Chart 协调控制(单一的坐标,两个坐标)
前言 在Extjs 中. 单一的 Column Chart 的展示效果如上. 定义的过程例如以下: 1. 创建一个 Ext.chart.Chart 2. 创建两个坐标轴. axes 一个 Categ ...
- [Ext JS 4] 实战之Chart 坐标控制(单坐标,双坐标)
前言 在Extjs 中, 单一的 Column Chart 的展示效果如上. 定义的步骤如下: 1. 创建一个 Ext.chart.Chart 2. 创建两个坐标轴, axes 一个 Categor ...
- [Ext JS 4] 实战之Grid, Tree Gird 添加按钮列
引言 贴一个grid 的例子先: 有这样一个需求: 1. 给 Grid(or Tree Grid)添加一列, 这一列显示是Button. 点击之后可以对这一行进行一些操作 2. 这一列每一行对应的按钮 ...
最新文章
- 在python3环境安装builtwith模块
- 区块链80%项目靠同一个故事拿钱,但标准链说最坏的时机就是好的开始
- Java高版本编译低版本运行_Java高版本编译低版本运行错误(ConcurrentHashMap.keySet)...
- 解决log4j2漏洞遭到挖矿、僵尸进程病毒攻击
- Redis(2)---数据持久化
- 网站图片多服务器选多大,网站上的图片一般多大合适
- Ionic3 环境搭建以及基础配置实现(更新中)
- 信息与数据科学国际会议征文通知
- 完整的Flex多文件上传实例
- 用VB实现带图片的XP风格的按钮控件
- opencv之解决Module opencv_ovis disabled because OGRE3D was not found
- 苹果逼停微信赞赏功能,最大赢家是...
- matlab 使用,MATLAB使用方法
- WebRTC自适应控制算法
- 基于Tensorflow深度学习的ECG身份识别方法(二)
- Faster R-CNN 源码解读 (傻瓜版) - Pytorch
- 阿里和唯品会java开发手册通读链接
- 漫步数学分析二十八——狄利克雷与阿贝尔测试
- 软件自动化测试订飞机票,用 Selenium 搞定自动化测试项目,途牛搜机票。
- c语言设置制表符参数,printf()函数的参数和制表符
热门文章
- Problem C: 爬楼梯
- ASP.NET MVC RedirectToRoute类[转]
- ZZ MMSEG 中文分词算法
- python读取us7ascii字符集Oracle数据库中文乱码问题的解决方案
- vs2015professional过期后登录微软账户仍然不能使用的解决方法
- Java路径问题终于解决方式—可定位全部资源的相对路径寻址
- SQLSERVER 创建ODBC 报错的解决办法 SQLState:‘01000‘的解决方案
- 【报告分享】数据大治理-毕马威阿里研究院.pdf(附下载链接)
- github push代码出错fatal: Authentication failed for ‘https:/
- ubuntu服务器python3.6报错ModuleNotFoundError: No module named '_bz2'