Flex实现双轴条状图
1、问题背景
一般的,柱状图可以实现双轴图,但是如何实现双轴条状图?
2、实现实例
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" creationComplete="initHandler(event)"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.events.FlexEvent; [Bindable] private var chartArray:ArrayCollection = new ArrayCollection([ {week:"星期一",snake:"5459",cow:"7845"}, {week:"星期二",snake:"8956",cow:"7845"}, {week:"星期三",snake:"3562",cow:"7845"}, {week:"星期四",snake:"7856",cow:"7845"}, {week:"星期五",snake:"1245",cow:"7845"}, {week:"星期六",snake:"9656",cow:"7845"}, {week:"星期日",snake:"6784",cow:"7845"} ]); protected function initHandler(event:FlexEvent):void { cate.ticksBetweenLabels = false; } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <mx:VBox width="100%" height="100%" horizontalAlign="center" paddingBottom="10" paddingLeft="10" paddingRight="20" paddingTop="10"> <mx:BarChart id="barchart" width="100%" height="90%" showDataTips="true" dataProvider="{chartArray}"> <mx:verticalAxis> <mx:CategoryAxis id="cate" categoryField="week" displayName="星期" /> </mx:verticalAxis> <mx:series> <mx:BarSeries displayName="蛇数量" xField="snake" yField="week"/> </mx:series> <mx:secondVerticalAxis> <mx:CategoryAxis categoryField="week" displayName="星期"/> </mx:secondVerticalAxis> <mx:secondSeries> <mx:LineSeries displayName="牛" xField="cow" yField="week"/> </mx:secondSeries> </mx:BarChart> <mx:Legend dataProvider="{barchart}"/> </mx:VBox> </s:Application>
3、实现结果
Flex实现双轴条状图的更多相关文章
- HighCharts之2D堆条状图
HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...
- HighCharts之2D条状图
HighCharts之2D条状图 1.HighCharts之2D条状图源码 bar.html: <!DOCTYPE html> <html> <head> < ...
- Excel 2010高级应用-条状图(五)
Excel 2010高级应用-条状图(五) 基本操作如下: 1.新建一个Excel空白文档,并命名条状图 2.单击"插入",找到条状图的样图 3.选择其中一种类型的条状图样图,在空 ...
- python中matplotlib绘图封装类之折线图、条状图、圆饼图
DrawHelper.py封装类源码: import matplotlib import matplotlib.pyplot as plt import numpy as np class DrawH ...
- 利用js来画图形(例如:条状图,圆饼图等)
背景:java开发的过程中,需要对数据进行可视化,这样方便客户理解此时的数据状态 语言:java,js,window7,echarts包文件 sample的例子下面的参照 https://www.ec ...
- MS Chart 条状图【转】
private void Form1_Load(object sender, EventArgs e) { string sql1 = "select 类别,coun ...
- maplotlib python 玩具绘图 横向纵向条状图
from matplotlib import font_manager#解决zh-han图形汉字乱码 my_font = font_manager.FontProperties(fname=" ...
- Wpf/Wp/Silverlight-Chart图表控件:柱状图、饼状图等使用汇总
链接:http://www.cnblogs.com/jimson/archive/2010/06/21/Wpfchat.html http://www.cnblogs.com/mgen/p/32361 ...
- JupyterLab绘制:柱状图,饼状图,直方图,散点图,折线图
JupyterLab绘图 喜欢python的同学,可以到 https://v3u.cn/(刘悦的技术博客) 里面去看看,爬虫,数据库,flask,Django,机器学习,前端知识点,JavaScrip ...
随机推荐
- Yii AR中处理多表关联的relations配置
关系型 Active Record官方文档中指出: 两张表之间的关联是根据外键来的,但是这种外键关联虽然在数据容错方面有益处,但是在性能上是个损伤,所以,一般是不定义外键的. 这种情况下,他们之间的关 ...
- HTML5中的Web Notification桌面通知
大家在做一些浏览器端的聊天功能的时候,或者在一些网站跟在线客服咨询的时候,会看到一些消息通知的提示,常见的有浏览器标签页的闪烁和屏幕右侧的消息通知.本篇博客就在这里简单的介绍一下如何实现这样的功能. ...
- iOS-时间戳(或date)转字符串
1.时间戳转字符串 ///时间戳转化为字符转0000-00-00 00:00 + (NSString *)time_timestampToString:(NSInteger)timestamp{ NS ...
- Android图像处理 - 高斯模糊的原理及实现
欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 由 天天P图攻城狮 发布在云+社区 作者简介:damonxia(夏正冬),天天P图Android工程师 前言 高斯模糊是图像处理中几乎每个程序员 ...
- ES6字符串
1.unicode表示法: alert("\u0061"); alert("\uD842\uDFB7"); alert("\u20BB7") ...
- Redis进阶实践之十一 Redis的Cluster集群搭建
一.引言 本文档只对Redis的Cluster集群做简单的介绍,并没有对分布式系统的详细概念做深入的探讨.本文只是提供了有关如何设置集群.测试和操作集群的说明,而不涉及Redis集群规范中涵 ...
- 通过四个例子理解JavaScript拓展运算符
原文地址:JavaScript & The spread operator 拓展运算符看起来像什么? 三个点,... 它能做什么? 拓展运算符允许一个表达式在某个地方展开成为多个元素.变量或参 ...
- 常见HTTP状态码出现原因
302:重定向.访问当前地址,后端重新指定一个URL,浏览器跳转到新的地址. 303:对于POST请求,它表示请求已被处理,客户端可以接着使用GET方法请求Location里的URL. 304:客户端 ...
- PHPUnit-附录 C. XML 配置文件
[http://www.phpunit.cn/manual/5.7/zh_cn/appendixes.configuration.html] PHPUnit <phpunit> 元素的属性 ...
- Redis的两种持久化方式-快照持久化和AOF持久化
Redis为了内部数据的安全考虑,会把本身的数据以文件形式保存到硬盘中一份,在服务器重启之后会自动把硬盘的数据恢复到内存(redis)的里边,数据保存到硬盘的过程就称为"持久化"效 ...