本文来自: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文件。
你可以看到,这其实很简单。有一个data grid,选项被禁用,并隐藏了标题栏,一个mx:Button,还有一些用于生成数据的javascript和一些标签功能。不,再等下,这可不是一个普通的mx:DataGrid。我们待会将就此进行讨论,不过首先,我们来检查下正在可视化的数据。
下面,你会看到Quote.as file, 它是代表stock quote的值对象。它包含一个符号,价格和百分比变化。百分比变化就是我们将要在data grid实例的第四栏中可视化的内容。
现在,回到data grid。它不是一个mx:DataGrid,而是一个“QuoteGrid”,是我创建的自定义类,拓展mx:DataGrid。我添加了功能,这样当调用commitProperties时,它将在dataprovider内循环数据(循环所有的Quote实例),并计算最小和最大百分比变化。我们将在稍后可视化这些数据时,使用这些值。在下面,你可以看到QuoteGrid源。
那么,我们怎么才能让最后一栏可视化呢?
当然,要使用自定义的条目渲染器。这是一个非常基本的条目渲染器。我们本可让它变得非常复杂,但是这个渲染器可以帮助我们轻松快捷地完成任务。ChartItemRenderer使用数据提供者里的最小和最大percentChange值,以计算零的X位置,及现在数据条目的percentChange值的X位置。使用这些计算得出的百分比,我们可以画一个长方形,说明相对于零的现值,及代表零的线。我们完成了! 检查下面的代码,特别是updateDisplayList函数。
ChartItemRenderer.as
最后,但是也很重要的是,我们不能忘记风格!让这一切变得简单易行的就是:风格的使用(或是缺少风格)。基本上,每项内容都是白色,没有其它颜色可供选择,没有坐标线,没有边界……没有会让你分心的。
正如你看到的,使用FLEX创建自定义数据可视化并不难。你可以在
http://tricedesigns.com/portfolio/stockComparisonChart/srcview/index.html
下载完整的应用程序源代码。