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实现双轴条状图的更多相关文章

  1. HighCharts之2D堆条状图

    HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...

  2. HighCharts之2D条状图

    HighCharts之2D条状图 1.HighCharts之2D条状图源码 bar.html: <!DOCTYPE html> <html> <head> < ...

  3. Excel 2010高级应用-条状图(五)

    Excel 2010高级应用-条状图(五) 基本操作如下: 1.新建一个Excel空白文档,并命名条状图 2.单击"插入",找到条状图的样图 3.选择其中一种类型的条状图样图,在空 ...

  4. python中matplotlib绘图封装类之折线图、条状图、圆饼图

    DrawHelper.py封装类源码: import matplotlib import matplotlib.pyplot as plt import numpy as np class DrawH ...

  5. 利用js来画图形(例如:条状图,圆饼图等)

    背景:java开发的过程中,需要对数据进行可视化,这样方便客户理解此时的数据状态 语言:java,js,window7,echarts包文件 sample的例子下面的参照 https://www.ec ...

  6. MS Chart 条状图【转】

    private void Form1_Load(object sender, EventArgs e) {            string sql1 = "select  类别,coun ...

  7. maplotlib python 玩具绘图 横向纵向条状图

    from matplotlib import font_manager#解决zh-han图形汉字乱码 my_font = font_manager.FontProperties(fname=" ...

  8. Wpf/Wp/Silverlight-Chart图表控件:柱状图、饼状图等使用汇总

    链接:http://www.cnblogs.com/jimson/archive/2010/06/21/Wpfchat.html http://www.cnblogs.com/mgen/p/32361 ...

  9. JupyterLab绘制:柱状图,饼状图,直方图,散点图,折线图

    JupyterLab绘图 喜欢python的同学,可以到 https://v3u.cn/(刘悦的技术博客) 里面去看看,爬虫,数据库,flask,Django,机器学习,前端知识点,JavaScrip ...

随机推荐

  1. Java多线程基础(二)

    信号量Semaphore,类似于锁的功能,用于多线程中对一组资源的控制. acquire方法用于尝试获取一个资源,未获取前将一直等待.release用于释放一个资源,release的前提是已经获得了一 ...

  2. 洛谷 [P2024] 食物链

    并查集 这是一道比较特殊的并查集,开一个三倍的数组, 1-n保存同类,n-n×2保存猎物,n2~n3保存天敌: #include <iostream> #include <cstdi ...

  3. HDU 2296 Ring [AC自动机 DP 打印方案]

    Ring Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submissio ...

  4. RTLabel 的简单使用

    RTLabel 基于富文本的格式,适用于iOS,类似HTML的标记. RTLabel 基于UILabel类的拓展,能够支持Html标记的富文本显示,它是基于Core Text,因此也支持Core Te ...

  5. js收藏代码

    js收藏代码~ 1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border oncon ...

  6. Java中InputStream装饰器模式的大家族

    本文写在po主初学JAVA时,在学习inputStream摸不着头脑,受Java IO-InputStream家族 -装饰者模式一文启发,所以在理清思路时写下本文.因为初学,如有错误,望指正. 因为和 ...

  7. 使用单元素的枚举类型实现Singleton

    从java1.5版本开始,实现singleton出现了第三种方式: public enum SingleTon { INSTANCE; public void speak() { System.out ...

  8. 【Unity3D技术文档翻译】第1.5篇 本地使用 AssetBundles

    上一章:[Unity3D技术文档翻译]第1.4篇 AssetBundle 依赖关系 本章原文所在章节:[Unity Manual]→[Working in Unity]→[Advanced Devel ...

  9. zip-gzip-bzip2_压缩文件

    问:为什么要压缩文件? 答:方便传输,因为压缩的文件容量会比较小        存储所使用的空间也会比较小 ---> 备份   Windows里的压缩软件:WinRAR.Zip.好压.2345 ...

  10. [记录]CentOS搭建SVN服务器(主从同步)

    CentOS搭建SVN服务器(主从同步)1.安装步骤如下: 1)安装: #yum install subversion 2)查看安装位置: #rpm -ql subversion 3)查看版本: #/ ...