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. Does Java pass by reference or pass by value?(Java是值传递还是引用传递) - 总结

    这个话题一直是Java程序员的一个热议话题,争论不断,但是不论是你百度搜也好还是去看官方的文档中所标明的也好,得到的都只有一个结论:Java只有值传递. 在这里就不贴代码细致解释了,让我们来看看一些论 ...

  2. 运行所选代码生成器时出错:“预期具有协定名称 "NuGet.VisualStudio.IVsPackageInstallerServices" 的1导出 ——VS2015错误记录

    在编写ASP.NET MVC控制器后,右键添加视图时,VS2015报出错误: 运行所选代码生成器时出错:“预期具有协定名称 "NuGet.VisualStudio.IVsPackageIns ...

  3. uboot之位置无关代码解析

    在之前的话 新年过去了,那么久没有好好学习,感觉好颓废,现在就uboot的一些基础问题做一些笔记,顺便分享给大家,不过由于见识有限,如果有不足之处请多多指教. 位置无关?什么意思?我们先了解一些基础知 ...

  4. word在页眉中插入页码

    编辑页眉时,插入-页码-当前位置-普通数字

  5. easyui datagrid 右边框被隐藏

    问题前: 如下图: 解决思路: 待文档加载完成后再执行dategrid函数 $(function () { $("#tt").datagrid({ //....... }); }) ...

  6. Maven中模块的聚合以及对jar包的继承

    我需要将之前的A B C三个模块聚合到一个一个工程中ABC项目中 pom.xml文件中应该这样配置 1.修改packaging里面的配置 <!-- 用于聚合这个项目的时候应该将packaging ...

  7. C#将制定文件夹下的PDF文件合并成一个并输出至指定路径

    /// <summary> /// 将源路径下的PDF合并至目标路径下 /// </summary> /// <param name="SourcePath&q ...

  8. 用Open SSH生成公钥和私钥(Win)

    也可以使用 dsa 加密算法进行加密,命令如下: ssh-keygen -t dsa

  9. Yii小部件

    小部件 Yii提供了一套数据小部件widgets,这些小部件可以用于显示数据. DetailView小部件用于显示一条记录数据. ListView和GridView小部件能够用于显示一个拥有分页.排序 ...

  10. alter 和 update的区别?

    alter用来增加或者减少列,alter stuednt add name vachar2(30): update用来更改表中的数据:update student set sutudent.name ...