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. 从UUID想到的

    1.UUID的定义 通用唯一标识符(UUID)被设计成一个在时间和空间上都独一无二的数字,常被用作唯一性标识. UUID是一个由5位十六进制数的字符串表示的128比特数字,其格式为 aaaaaaaa- ...

  2. IT连创业系列:年终回顾录!

    一年不过一转眼,一光阴的青春又逝去了! 还有不到几天,就要进入新年快乐的祝福包围圈了. 在这归家之际,留文一篇,为这忙碌的一年创业留点回忆! IT连创业这一年走来: 大大小小的深坑,小小大大的困难,一 ...

  3. 使用Scanner获取键盘输入

    使用Scanner类可以很方便地便获取用户的键盘输入,Scanner是一个基于正则表达式的文本扫描器,它可以从文件.输入流 .字符串中解析出基本类型值和字符串值.Scanner类提供了多个构造器,不同 ...

  4. String,StringBuffer,StringBuilder的区别

    数据结构: 数据结构是指相互之间存在一种或多种特定关系的数据元素的集合. 比如数据库就是对硬盘中的数据进行有规则的管理,可以进行增删改查工作,而良好的数据结构可以优化这些操作, 也许大家会想这些和St ...

  5. PHP7的新功能

    [转自:http://www.yiibai.com/php7/ ]   [PHP7标量类型声明] 在PHP7,一个新的功能,标量类型声明已被引入.标量类型声明有两种选择方式 - 强制方式- 强制性是默 ...

  6. php实现粘贴截图并完成上传功能

    <?php header("Access-Control-Allow-Origin:*"); $url = 'http://'.$_SERVER['HTTP_HOST']; ...

  7. PHP判断SQL语句是否合法:mysqli_error()

    假设现在有条update语句,有时候update语句正确,但是受影响的行数是0. 那么怎么判断这条SQL语句到底是否正确?使用 mysqli_error($Conn); create table us ...

  8. 想想我们能拿HoloLens 做点什么

    作为一个微软员工,顿时感觉好了很多. 中午吃饭同事们热烈讨论这东东: 1. 看电视 2. 办公 3. 用HoloLens 玩3d 游戏.满公园跑. 4. 看书 5. 开车的时候,实时显示地图 6. 一 ...

  9. 小技巧:selenium java中如何使用chrome默认的profile

    使用浏览器默认的profile可以在一定程度上实现免登录的效果,另外默认的profile中很多文件都被缓存了,也有利于加快测试的速度 System.setProperty("webdrive ...

  10. 让互联网更快:新一代QUIC协议在腾讯的技术实践分享

    本文来自腾讯资深研发工程师罗成在InfoQ的技术分享. 1.前言 如果:你的 App,在不需要任何修改的情况下就能提升 15% 以上的访问速度,特别是弱网络的时候能够提升 20% 以上的访问速度. 如 ...