zoukankan      html  css  js  c++  java
  • Using a custom AxisRenderer object

    Using a custom AxisRenderer object

    http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7c39.html

     
     

    To change the appearance of the axis labels, you can use thelabelRendererproperty of the AxisRenderer class. This lets you specify a class that defines the appearance of the label. The class must extend UIComponent and implement the IDataRenderer and IFlexDisplayObject interfaces. Itsdataproperty will be the label used in the chart. Typically, you write an ActionScript class that extends the ChartLabel class for the label renderer.

    The following example defines a custom component inline by using the<fx:Component>tag. It adds ToolTip objects to the labels along the chart’s horizontal axis so that the values of the longer labels are not truncated.

    <?xml version="1.0"?>
    <!-- charts/LabelRendererWithToolTips.mxml -->
    <s:Application 
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        initialize="setupDP()" 
        width="550" height="600">
        
        <fx:Script>
         <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.charts.ColumnChart; 
        
            [Bindable]
            private var ac:ArrayCollection;
            
            public function setupDP():void{
                ac =  new ArrayCollection([
                  [ "Label 1 is short.", 200000],
                  [ "Label 2 is a fairly long label.", 150000],
                  [ "Label 3 is an extremely long label. It contains 95 characters " + 
                    "and will likely be truncated.", 40000]
                ]);
            }
         ]]>
        </fx:Script>
    
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
    
        <s:Panel title="Column Chart">
            <s:layout>
                <s:VerticalLayout/>
            </s:layout>
            <mx:ColumnChart id="bc1" 
                showDataTips="true" 
                dataProvider="{ac}">
                <mx:series>
                    <mx:ColumnSeries xField="0" yField="1"/>
                </mx:series>
                <mx:verticalAxis>
                    <mx:LinearAxis id="va1"/>
                </mx:verticalAxis>
                <mx:horizontalAxis >
                    <mx:CategoryAxis id="ha1" 
                        dataProvider="{ac}" 
                        categoryField="0"/> 
                </mx:horizontalAxis>
                <mx:horizontalAxisRenderers>
                    <mx:AxisRenderer axis="{ha1}" canDropLabels="false">
                        <mx:labelRenderer>
                            <fx:Component>
                                <mx:Label toolTip="{this.myTip}">
                                    <fx:Script><![CDATA[
                                        [Bindable]
                                        private var myTip:String;
    
                                        override public function set data(value:Object):void{
                                            if(value == null)
                                                return;
                                            myTip = value.text;
                                            var length:int = value.text.toString().length;
                                            if (length > 20) {
                                                text = value.text.toString().substr(0, 20) + "...";
                                            } else {
                                                text = value.text;
                                            }
                                        }
                                    ]]></fx:Script>
                                </mx:Label>
                            </fx:Component>
                        </mx:labelRenderer>
                    </mx:AxisRenderer>                
                </mx:horizontalAxisRenderers>
                <mx:verticalAxisRenderers>
                    <mx:AxisRenderer axis="{va1}" canDropLabels="false"/>                
                </mx:verticalAxisRenderers>
            </mx:ColumnChart>           
            <s:Label id="l1" 
                color="white" 
                text="Hover over the horizontal axis's labels to see the entire title rendered as a ToolTip."/>        
        </s:Panel>         
    </s:Application>

    The executing SWF file for the previous example is shown below:

     

    For an example of an ActionScript class that extends ChartLabel, see Adding axis titles.

  • 相关阅读:
    小程序开发学习记录(一)
    解决移动端touch事件与click冲突的问题
    解决node.js使用fs读取文件出错
    防抖和节流
    promise
    ES6新的特性有哪些?
    css盒模型
    CSS3有哪些新特性?
    ES6新增的数据类型Map和Set。
    js求两个数组的交集|并集|差集|去重
  • 原文地址:https://www.cnblogs.com/wshsdlau/p/3479993.html
Copyright © 2011-2022 走看看