Flex中LineChart实现中点的提示文本（dataTip）

使用dataTipFunction可以很方便的自定义图表上元素的提示信息。不管是内容还是格式。

比如，默认数据点的提示如下：

我们可以将其格式化成如下形似：

               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               creationComplete="init(event)">
   
                    import mx.charts.HitData;
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            
            [Bindable]
            private var myData:ArrayCollection = new ArrayCollection( [
                { month: "18:00", value: 20},
                { month: "19:00", value: 60},
                { month: "20:00", value: 215},
                { month: "21:00", value: 202},
                { month: "22:00", value: 190},
                { month: "23:00", value: 95}]);
            
            protected function init(event:FlexEvent):void
            {
                line1.setStyle("fill", 0xffffff); //原点内部填充色为白色
                line1.setStyle("radius", 5); //整个圆点的半径为6
            }
            
            private function dataTips(e:HitData):String{
                var s:String= ""+LineSeries(e.element).displayName+""
                    +"："+e.chartItem["yValue"]+"个";
                return s;
            }
        ]]>
   
    
   
       
       
       
       
       
       
   
    
                      verticalCenter="0" horizontalCenter="0" fontSize="12" color="0x707070"
                  showDataTips="true" dataProvider="{myData}"
                  dataTipFunction="dataTips">
       
           
               
                   
                       
                      
                   
                       
                   
               
                
           
           
               
                   
               
               
                   
               
           
            
       
       
           
       
       
                                         axisStroke="{axisS1}"/>
       
       
           
       
       
                                         axisStroke="{axisS1}"/>
       
       
                                        itemRenderer="mx.charts.renderers.CircleItemRenderer"
                            stroke="{pointS1}" lineStroke="{lineS1}"/>