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 ...
随机推荐
- Java多线程基础(二)
信号量Semaphore,类似于锁的功能,用于多线程中对一组资源的控制. acquire方法用于尝试获取一个资源,未获取前将一直等待.release用于释放一个资源,release的前提是已经获得了一 ...
- 洛谷 [P2024] 食物链
并查集 这是一道比较特殊的并查集,开一个三倍的数组, 1-n保存同类,n-n×2保存猎物,n2~n3保存天敌: #include <iostream> #include <cstdi ...
- HDU 2296 Ring [AC自动机 DP 打印方案]
Ring Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submissio ...
- RTLabel 的简单使用
RTLabel 基于富文本的格式,适用于iOS,类似HTML的标记. RTLabel 基于UILabel类的拓展,能够支持Html标记的富文本显示,它是基于Core Text,因此也支持Core Te ...
- js收藏代码
js收藏代码~ 1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border oncon ...
- Java中InputStream装饰器模式的大家族
本文写在po主初学JAVA时,在学习inputStream摸不着头脑,受Java IO-InputStream家族 -装饰者模式一文启发,所以在理清思路时写下本文.因为初学,如有错误,望指正. 因为和 ...
- 使用单元素的枚举类型实现Singleton
从java1.5版本开始,实现singleton出现了第三种方式: public enum SingleTon { INSTANCE; public void speak() { System.out ...
- 【Unity3D技术文档翻译】第1.5篇 本地使用 AssetBundles
上一章:[Unity3D技术文档翻译]第1.4篇 AssetBundle 依赖关系 本章原文所在章节:[Unity Manual]→[Working in Unity]→[Advanced Devel ...
- zip-gzip-bzip2_压缩文件
问:为什么要压缩文件? 答:方便传输,因为压缩的文件容量会比较小 存储所使用的空间也会比较小 ---> 备份 Windows里的压缩软件:WinRAR.Zip.好压.2345 ...
- [记录]CentOS搭建SVN服务器(主从同步)
CentOS搭建SVN服务器(主从同步)1.安装步骤如下: 1)安装: #yum install subversion 2)查看安装位置: #rpm -ql subversion 3)查看版本: #/ ...