在DataGrid中显示并绘制柱状图
DataGrid是显示数据列表的空间，在Swing里面它的对应控件是JTable。
通过DataGridColumn可以设置输出列的数据和表头。
在DataGridColumn中Flex提供了渲染器模式，可以通过自定义绘制来改变默认的显示形式。
这里面的实现方式略同于.Net。
其实我根本不擅长画UI。
?
这次要实现下面的效果
?
?
第一步需要实现一个自定义的渲染器（Renderer）。我取名为BarRenderer。基本来说，一个Renderer只需要有一个set data()方法，已便让DataGrid把数据赋给他。
但是我这里让BarRenderer继承了Canvas类，实现了IDataRenderer， IDropInListItemRenderer类。（下面虽然写着Java代码，其实是Flex代码，这里没有Flex用的代码格式）
?
?
public class BarRenderer extends Canvas implements IDataRenderer, IDropInListItemRenderer{}?IDataRenderer接口就是data的get set方法，DataGrid将会把整个一行数据放在里面
IDropInListItemRenderer接口里面是listData的get set方法，DataGrid会把一个类型为DataGridListData的数据赋给他。通过listData.owner可以取到DataGrid对象，通过listData.columnIndex方法可以取到当前是第几列。
?
然后在BarRenderer里面要重载updateDisplayList方法。在里面可以用
var g:Graphics = this.graphics;
?取到Graphics对象，然后可以通过这个对象来画图。
和Win32API一样，基点坐标是0，0
?
?
程序代码摘要如下
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number): void { var g:Graphics = this.graphics; if (this.data) { g.clear(); var df:String = this._dataField; // ... var cper:String = String(this.data[df]); var percent:Number = Number(this.data.cper); var width:Number = percent* unscaledWidth / 100; if (percent >= 70) { g.beginFill(0x78ff82); }else if(percent < 70 && percent > 30) { g.beginFill(0xF0FD82); }else { g.beginFill(0xFF2020); } g.drawRect(0, 0, width, unscaledHeight); g.endFill(); } }??
2.编写MXML
?
编写MXML有两种方法，如果不需要自定义属性的话，就只要在DataGridColumn里面设置itemRenderer的值为BarRenderer的路径。
?
<mx:DataGrid id="datagrid1" x="20" y="240" width="740" height="350" dataProvider="{members}"> <mx:columns> <mx:DataGridColumn headerText="号码" width="80" dataField="no"/> <mx:DataGridColumn headerText="姓名" width="100" dataField="name"/> <mx:DataGridColumn headerText="拼音" width= "100" dataField="pinyin"/> <mx:DataGridColumn headerText="住所" dataField="address"/> <mx:DataGridColumn headerText="电话号码" width= "115" dataField="tel"/> <mx:DataGridColumn headerText="能力比" width= "100" dataField="cper" itemRenderer="heyesh.app.flex.common.renderer.BarRenderer"> </mx:DataGridColumn> </mx:columns> </mx:DataGrid>?
如果要自定义属性的话，就稍微复杂一点，如下
<mx:DataGrid id="datagrid1" x="20" y="240" width="740" height="350" dataProvider="{members}"> <mx:columns> <mx:DataGridColumn headerText="号码" width="80" dataField="no"/> <mx:DataGridColumn headerText="姓名" width="100" dataField="name"/> <mx:DataGridColumn headerText="拼音" width= "100" dataField="pinyin"/> <mx:DataGridColumn headerText="住所" dataField="address"/> <mx:DataGridColumn headerText="电话号码" width= "115" dataField="tel"/> <mx:DataGridColumn headerText="能力比" width= "100" dataField="cper"> <mx:itemRenderer> <mx:Component> <renderer:BarRenderer dataField="cper"> </renderer:BarRenderer> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid>?
最后把代码传上来，随便写写的，大家看不懂可以问我