Flex101: 创建一个业绩比较图

本文来自：http://www.insideria.com/2010/01/flex-101-creating-a-performanc.html

又一次，我从网络上别人的创意中获得了灵感。在这个帖子里，我们会一步步探讨如何使用mx:DataGrid在FLEX里创建一个与Google Finance类似的定制库存对比表。

在前面一个帖子里，我讨论了你可以用来重新创建一个互动曲线表（与Google Finance网站使用的类似）的简单技巧。我不是要在这个帖子再次强调这个图表(chart)。当我在阅读库存信息时，我发现了一个不同的图表(chart)。下面，你会看到引起我注意力的内容的截屏。

有趣的是，这个图表(chart)是真正地基于表格(table), 阅读起来非常简单易懂。水平条显示的是交易日的相对表现指数（红色为消极表现指数，绿色为积极表现指数），而黑线表示零值（无变化）。

当我浏览这个图表时，我想，采用我之前讨论的DataGrid数据可视化技术，就可以在FLEX里轻松创建该图表。下面，你会看到我的思路：

( 注：所有的数据值随即生成 )

现在，我们来看一下让这一切运行的代码。一旦你深入其中，你就会发现其实非常简单。你会看到下面的main.mxml文件。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:qg="quoteGrid.*" layout="absolute" backgroundColor="#FFFFFF" backgroundGradientColors="[#FFFFFF,#FFFFFF]" viewSourceURL="srcview/index.html"> <mx:Style source="styles.css" /> <mx:Script> <!--[CDATA[ import mx.controls.dataGridClasses.DataGridColumn; import model.Quote; import model.DataUtil; import mx.collections.ArrayCollection; [Bindable] private var quotes : ArrayCollection = DataUtil.generateData(); private function priceFormat( item : Quote, col : DataGridColumn ) : String { return priceFormatter.format( item.price );; } private function percentFormat( item : Quote, col : DataGridColumn ) : String { return percentFormatter.format( item.percentChange ) + "%"; } ]]--> </mx:Script> <mx:CurrencyFormatter id="priceFormatter" /> <mx:NumberFormatter id="percentFormatter" precision="2" /> <qg:QuoteGrid id="dataGrid" top="0" left="0" bottom="30" right="0" dataProvider="{ quotes }" showHeaders="false" selectable="false" > <qg:columns> <mx:DataGridColumn width="10" headerText="Symbol" dataField="symbol"/> <mx:DataGridColumn width="10" headerText="Price" dataField="price" textAlign="right" labelFunction="priceFormat"/> <mx:DataGridColumn width="10" headerText="% Change" dataField="percentChange" textAlign="right" labelFunction="percentFormat"/> <mx:DataGridColumn width="20" headerText="Chart" dataField="percentChange" itemRenderer="quoteGrid.ChartItemRenderer"/> </qg:columns> </qg:QuoteGrid> <mx:Button left="0" bottom="0" label="Generate New Data" click="quotes = DataUtil.generateData()"/> </mx:Application>

你可以看到，这其实很简单。有一个data grid，选项被禁用，并隐藏了标题栏，一个mx:Button，还有一些用于生成数据的javascript和一些标签功能。不，再等下，这可不是一个普通的mx:DataGrid。我们待会将就此进行讨论，不过首先，我们来检查下正在可视化的数据。

下面，你会看到Quote.as file, 它是代表stock quote的值对象。它包含一个符号，价格和百分比变化。百分比变化就是我们将要在data grid实例的第四栏中可视化的内容。

package model { public class Quote { public var symbol : String; public var price : Number; public var percentChange : Number; public function Quote( symbol : String, price : Number, percentChange : Number ) { this.symbol = symbol; this.price = price; this.percentChange = percentChange; } } }

现在，回到data grid。它不是一个mx:DataGrid，而是一个“QuoteGrid”，是我创建的自定义类，拓展mx:DataGrid。我添加了功能，这样当调用commitProperties时，它将在dataprovider内循环数据（循环所有的Quote实例），并计算最小和最大百分比变化。我们将在稍后可视化这些数据时，使用这些值。在下面，你可以看到QuoteGrid源。

package quoteGrid { import model.Quote; import mx.collections.ICollectionView; import mx.controls.DataGrid; public class QuoteGrid extends DataGrid { private var _minChange : Number = 0; private var _maxChange : Number = 0; public function QuoteGrid() { super(); } public function get minChange() : Number { return _minChange; } public function get maxChange() : Number { return _maxChange; } override protected function commitProperties():void { super.commitProperties(); _maxChange = 0; _minChange = 0; for each ( var q : Quote in ICollectionView( dataProvider ) ) { _minChange = Math.min( _minChange, q.percentChange ); _maxChange = Math.max( _maxChange, q.percentChange ); } } } }

那么，我们怎么才能让最后一栏可视化呢？

当然，要使用自定义的条目渲染器。这是一个非常基本的条目渲染器。我们本可让它变得非常复杂，但是这个渲染器可以帮助我们轻松快捷地完成任务。ChartItemRenderer使用数据提供者里的最小和最大percentChange值，以计算零的X位置，及现在数据条目的percentChange值的X位置。使用这些计算得出的百分比，我们可以画一个长方形，说明相对于零的现值，及代表零的线。我们完成了！ 检查下面的代码，特别是updateDisplayList函数。

ChartItemRenderer.as

package quoteGrid { import model.Quote; import mx.controls.DataGrid; import mx.controls.listClasses.IListItemRenderer; import mx.core.UIComponent; public class ChartItemRenderer extends UIComponent implements IListItemRenderer { private var _data : Quote = null; public function ChartItemRenderer() { super(); } public function get data():Object { return _data; } public function set data(value:Object):void { _data = value as Quote; invalidateDisplayList(); } override protected function updateDisplayList( w:Number, h:Number ):void { super.updateDisplayList(w,h); if ( this.owner is QuoteGrid ) { //spacing above and below rendered content var verticalBuffer : int = 3; //spacing to the left and right of the rendered content var horizontalBuffer : int = 3; var qg : QuoteGrid = this.owner as QuoteGrid; var range : Number = (qg.maxChange - qg.minChange); //width to use for calculations var _width : int = w-(2*horizontalBuffer); //position of zero (0) in the data range var zeroX : int = ((- qg.minChange/range)*_width)+horizontalBuffer; //X position of the data point var dataX : int = (((_data.percentChange- qg.minChange)/range)*_width)+horizontalBuffer //calculate the area to draw the bars var _x : int = Math.min( dataX, zeroX ); var _w : int; if ( zeroX >= dataX ) _w = Math.abs(zeroX - dataX) else _w = dataX - zeroX; //draw it with ( graphics ) { clear(); var color : uint = (_data.percentChange > 0) ? 0x00FF00 : 0xFF0000; lineStyle(1,color); beginFill( color, .25 ); drawRect( _x, verticalBuffer, _w, h-(2*verticalBuffer) ); endFill(); lineStyle(1,0); moveTo( zeroX, -2 ); lineTo( zeroX, h+2 ); } } } } }

最后，但是也很重要的是，我们不能忘记风格！让这一切变得简单易行的就是：风格的使用（或是缺少风格）。基本上，每项内容都是白色，没有其它颜色可供选择，没有坐标线，没有边界……没有会让你分心的。

/* CSS file */ DataGrid { alternatingItemColors: #ffffff, #ffffff; horizontalGridLines: false; verticalGridLines: false; rollOverColor: #dddddd; selectionColor: #cccccc; dropShadowEnabled: false; border-style: none } Button { cornerRadius: 0; themeColor: #ff0000; }

正如你看到的，使用FLEX创建自定义数据可视化并不难。你可以在

http://tricedesigns.com/portfolio/stockComparisonChart/srcview/index.html

下载完整的应用程序源代码。