flex stacked column graph
Flex: Stacked column chart – programmatically in actionscript
By bishopondevelopment
I was looking for ages for an example of a dynamically generated stacked column chart in Flex, but most of the examples were incorporating some MXML, or contained hard-coded series objects.
The example below is based on Adobe Livedocs, but I show how to generate the series arrays programatically in as3, with no use of mxml code, and apply these series to a column chart (added topanelActionscript as seen in the code below). Also, this could be easily adapted to a barchart.
If youve got any suggestions, let me know.
Flex Stacked Chart
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp()" width="622" height="660">
<mx:Script>
import mx.charts.ColumnChart;
import mx.charts.series.ColumnSet;
import mx.charts.Legend;
import mx.charts.BarChart;
import mx.charts.series.BarSet;
import mx.charts.series.BarSeries;
import mx.collections.ArrayCollection;
[Bindable]
private var yearlyData:ArrayCollection = new ArrayCollection([
{month:"January", revenue:120, costs:45, overhead:102, oneTime:23},
{month:"February", revenue:108, costs:42, overhead:87, oneTime:47},
{month:"March", revenue:150, costs:82, overhead:32, oneTime:21},
{month:"April", revenue:170, costs:44, overhead:68},
{month:"May", revenue:250, costs:57, overhead:77, oneTime:17},
{month:"June", revenue:200, costs:33, overhead:51, oneTime:30},
{month:"July", revenue:145, costs:80, overhead:62, oneTime:18},
{month:"August", revenue:166, costs:87, overhead:48},
{month:"September", revenue:103, costs:56, overhead:42},
{month:"October", revenue:140, costs:91, overhead:45, oneTime:60},
{month:"November", revenue:100, costs:42, overhead:33, oneTime:67},
{month:"December", revenue:182, costs:56, overhead:25, oneTime:48},
{month:"May", revenue:120, costs:57, overhead:30}
]);
private function initApp():void {
// Create a column chart object
stackedColumnChart.dataProvider = yearlyData;
stackedColumnChart.showDataTips = true;
stackedColumnChart.width = 460;
// Set the horizontal axix category
xAxis.categoryField = "month";
stackedColumnChart.horizontalAxis = xAxis;
// ColumnSet.series is an array which contains
// an array of ColumnSeries objects.
columnSet.type = "stacked";
// Each item in seriesDetails becomes a different segment of
// a column in the stacked chart i.e. each item represents a series.
var seriesDetails:ArrayCollection = new ArrayCollection([
{YField:"costs", DisplayName:"Recurring Costs"},
{YField:"overhead", DisplayName:"Overhead Costs"},
{YField:"oneTime", DisplayName:"One-Time Costs"}
]);
// Create a ColumnSeries, and an array to be
// populated with dynamically generated columnSeries objects
var columnSeries:ColumnSeries;
var seriesArray:Array = new Array();
// Generate an array of ColumnSeries objects
// which are then be applied to the ColumnSet series.
for(var i:int = 0; i < seriesDetails.length; i++){
columnSeries = new ColumnSeries();
columnSeries.yField = seriesDetails[i].YField;
columnSeries.displayName = seriesDetails[i].DisplayName;
seriesArray.push(columnSeries);
}
columnSet.series = seriesArray;
// c.series could take an array of column sets
// for displaying mixed charts i.e. c.series = [columnSet1, columnSet2];stackedColumnChart.series = [columnSet];
var legend:Legend = new Legend();
legend.direction = "horizontal";
legend.dataProvider = stackedColumnChart;
panelActionscript.addChild(stackedColumnChart);
panelActionscript.addChild(legend);
}
<mx:Panel title="Stacked chart (dynamically created in ActionScript)"
id="panelActionscript" width="490">
</mx:Panel>
</mx:VBox>
<mx:Panel title="Same chart created solely in MXML" id="panelMxml" width="490">
<mx:ColumnChart id="mxmlColumnChart" dataProvider="{yearlyData}"
showDataTips="true" width="470">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSet type="stacked">
<mx:ColumnSeries
yField="costs"
displayName="Recurring Costs"/>
<mx:ColumnSeries
yField="overhead"
displayName="Overhead Costs"/>
<mx:ColumnSeries
yField="oneTime"
displayName="One-Time Costs"/>
</mx:ColumnSet>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{mxmlColumnChart}" direction="horizontal"/>
</mx:Panel>
</mx:Application>
flex stacked column graph的更多相关文章
- Hello Stacked Column Chart
<navigation:Page xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/to ...
- [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...
- FCC---CSS Flexbox: Apply the flex-direction Property to Create a Column in the Tweet Embed
The tweet embed header and footer used the flex-direction property earlier with a row value. Similar ...
- Flex 布局教程:实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
- CSS布局之div交叉排布与底部对齐--flex实现
最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
- flex实验总结
1.父元素 .box{ display:flex; flex-direction: column;//铺满垂直排列 flex-direction: column-reverse;//铺满垂直反向排列 ...
- 解决UC浏览器或微信浏览器上flex兼容问题
在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...
- flex引起height:100%失效
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- zabbix监控服务器时间问题
zabbix中有自带对linux服务器时间进行监控的模板,用的key是system.localtime返回当前的系统时间,而配置tigger报警时是用的fuzzytime(N)方法,该方法是将返回的系 ...
- January 03 2017 Week 1st Tuesday
It is always morning somewhere in the world. 世界上总是有一个地方可以看到阳光. There may be always someone who can e ...
- 把所有的小图标一起做成雪碧图吧 请用gulp-css-spriter.
用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键 第二步: npm install gulp-css-spriter https://www.npmjs.com ...
- 021.1 IO流——File类
########################################IO流: IO:用于处理设备上的数据的技术.设备:内存,硬盘,光盘 流:系统资源,Windows系统本身就可 ...
- C语言基础笔试题一
1.下面的代码输出什么?为什么? void foo(void) { unsigned int a = 6; int b = -20; (a+b > 6)?puts(">6&quo ...
- GPU性能:光栅化、图层混合、离屏渲染
So, shouldRasterize will not affect the green/red you see using Instruments. In order to have everyt ...
- 一款不错的网站压力测试工具webbench
webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好,安装使用也特别方便. 1.适用系统:Linux 2.编译安装: 引用 wget htt ...
- windows7系统PC机耳机没有声音
排除耳机故障和主机耳机孔等硬件问题之后 可能情况: 1.进行音量设置 2.更新声卡驱动 (使用驱动程序进行检测并进行更新) 360驱动大师 驱动精灵 3.windwows相关设置存在问题 (1)打开控 ...
- 博客存档TensorFlow入门一 1.4编程练习
import tensorflow as tf import numpy import matplotlib.pyplot as plt #from sklearn.model_selecti ...
- JDK代码中的优化 之 “avoid getfield opcode”
在查看String类源码时,常看到注释 /* avoid getfield opcode */ 如 trim()方法 public String trim() { int len = value.le ...