在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>

 

最后把代码传上来，随便写写的，大家看不懂可以问我