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 ...
随机推荐
- PHP正则匹配与文件编码关系
虽然多数高手认为正则会影响程序效率,但是做数据采集的时候,却很难避免使用正则, 强大的正则表达式用起来很舒服,但是在匹配中文的时候,会出现,明明正则表达式没问题,字符数据里包含符合正则表达式的数据,可 ...
- oracle表中字段的添加、删除
在oracle数据库中为一张表添加一个字段: alter table tableName add ClIENT_OS varchar2(20) default '0' not null ; 在orac ...
- BZOJ 3569: DZY Loves Chinese II [高斯消元XOR 神题]
http://www.lydsy.com/JudgeOnline/problem.php?id=3569 题意:多次询问一个无向连通图当图中某k条边消失时这个图是否联通 强制在线 太神啦啦啦啦啦啦啦啦 ...
- Spring学习——从入门到精通
本文章是博主原创,转载需注明出处. 第一篇先简单入个门--通过Spring创建对象 开发环境为Myeclipse2013,JDK版本为1.6,不要嫌它老,新知识都是在旧知识的基础上建立起来的,所谓基础 ...
- nf共享
实验环境是两台Centos6.8 客户端是192.168.3.218 服务端是192.168.3.219 首先配置服务端 1 安装包 用yum安装需要的服务包(两边都安装) yum install n ...
- kindeditor编辑器修改文本后保存时发现获取到的内容还是修改前的文本内容
定义kindeditor的时候要加上一下几个属性设置: KindEditor.ready(function(K) { var editor = K.create("textarea[name ...
- WinXP系统下Opencms的安装与配置
1.WinXP系统下安装opencms (1)mysql已安装5.1.40 cmd命令行:mysql -uroot -proot (2)OpenCMS在安装时要求MySQL系统变量“max_al ...
- Java经典编程题50道之十七
猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不过瘾,又多吃了一个:第二天早上又将剩下的桃子吃掉一半,而且又多吃了一个.以后每天早上都吃了前一天剩下的一半零一个.到第10天早上想再吃时,就只 ...
- java定时器schedule和scheduleAtFixedRate区别
package cn.lonecloud.test; import java.util.Date; import java.util.Timer; import java.util.TimerTask ...
- Git版本控制的基本命令
安装完了GIT首先要自报家门,否则代码不能提交 git config --global user.name "Your Name" git config --global user ...