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 ...
随机推荐
- iOS-UITableviewcell分割线位置
这几天又遇到要调节列表分割线位置,就想起很久以前刚做时的做法:把自带的分割线隐藏,然后自己加一条UIView,哈哈,不过这一两年不那么干了,把这个方法贴出来: 在 Tableview 的代理方法中,实 ...
- A 洛谷 P3601 签到题 [欧拉函数 质因子分解]
题目背景 这是一道签到题! 建议做题之前仔细阅读数据范围! 题目描述 我们定义一个函数:qiandao(x)为小于等于x的数中与x不互质的数的个数. 这题作为签到题,给出l和r,要求求. 输入输出格式 ...
- 用js脚本一键下载网页所有图片
年前这两天稍微闲一点了,琢磨了一点js脚本,功能是把当前网页页面上的所有图片一次性保存到本地,免得每次都要对图片右键保存. 测试环境:Chrome开发者模式下(启动Chrome,按F12即可) 测试网 ...
- Java线程池ThreadPoolExector的源码分析
前言:线程是我们在学习java过程中非常重要的也是绕不开的一个知识点,它的重要程度可以说是java的核心之一,线程具有不可轻视的作用,对于我们提高程序的运行效率.压榨CPU处理能力.多条线路同时运行等 ...
- JQuery 验证框架
设计完美,可扩展性好,以后就用他了. http://docs.jquery.com/Plugins/Validation /**//** * @author ming */ $(document) ...
- 一个客户端一键安装环境和服务的shell脚本
#!/bin/bash basepath=$(cd `dirname $0`; pwd)SHELL_DIR="${basepath}/shell"PACKAGE_DIR=" ...
- apache服务器绑定泛解析域名
<VirtualHost *:80> DocumentRoot "E:\web\bubuchu" ServerName bubuchu.com ServerAlias ...
- 网页版仿Excel效果组件--handsontable拓展运用
引言(祝看官们新年万事大吉) 前段时间项目需要实现网页版的excel表格功能,瞬间就想到了handsontable,为什么呢?理由如下:该UI组件功能齐全多样,展示效果也更贴近bootstrap风格, ...
- Android App 压力测试方法(Monkey)
一.为什么要开展压力测试 a.提高产品的稳定性:b.提高产品的留存率 二.什么时候开展压力测试 a.首轮功能测试通过后:b.下班后的夜间进行 三.7个基础知识(理论部分) 3.1 手动测试场景与自动测 ...
- MySQL数据库基础(三)(操作数据表中的记录)
1.插入记录INSERT 命令:,expr:表达式 注意:如果给主键(自动编号的字段)赋值的话,可以赋值'NULL'或'DEFAULT',主键的值仍会遵守默认的规则:如果省略列名的话,所有的字段必须一 ...