zoukankan      html  css  js  c++  java
  • Flex:在LineChart图表中格式化双轴线

    lineChart.mxml :

    <?xml version="1.0"?>
    <!-- Simple example to demonstrate the GridLines class. -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="com.*">
        
    <mx:Script>
            
    <![CDATA[
                import mx.charts.CategoryAxis; 
                import mx.charts.chartClasses.IAxis; 
            import mx.collections.ArrayCollection;
            import mx.charts.series.items.PieSeriesItem;
            import mx.charts.HitData;
             import custer.MyLabel;
             import mx.effects.easing.*;
                     import mx.controls.Alert;
            import mx.charts.series.LineSeries;
            import mx.charts.chartClasses.DataTransform; 
            import mx.charts.chartClasses.CartesianTransform;
            import mx.charts.series.items.LineSeriesItem;
                  
                   private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String { 
                    return currFormatter.format(item); 
                } 
                         
             private function init(evt:Event):void {
                    var chart:CustomLineChart = evt.currentTarget as CustomLineChart;
                    seriesFilterArr = chart.seriesFilters;
                     var len:uint = linechart.seriesFilters.length;
                     if (len > 0) {
                        linechart.seriesFilters = [];
                    } else {
                        linechart.seriesFilters = seriesFilterArr;
                    }
                } 
                function CustomLineChart_dataTipFunction(item:HitData):String { 
           // var LCI:LineSeries = item.chartItem as LineSeries; 
            //return "<b>高度/时间</b><br />时间:" + LCI.item.time + "<br/>高度:"+LCI.item.height+"米";
            tit.label = "<b>高度/时间</b><br />时间我们的";
            
            var dt:String = "";
            var this_series:LineSeries = LineSeries(item.element);
            var dataTransform:DataTransform = this_series.dataTransform;
             var vertical_axis:LinearAxis = LinearAxis(dataTransform.getAxis(CartesianTransform.VERTICAL_AXIS));
             var horizontal_axis:CategoryAxis = CategoryAxis(dataTransform.getAxis(CartesianTransform.HORIZONTAL_AXIS));

             var actionItemID:String = this_series.xField;
              var xValue:Object = horizontal_axis.formatForScreen(LineSeriesItem(item.chartItem).xValue);
            var n:String = this_series.displayName;
            if (n && n != "")
             dt += "<font size='14'><b>" + n + "</b><BR/>" + xValue  + "-" + actionItemID;
             
            
            return dt; 
        }  
        
            [Bindable]
            private var expensesAC:ArrayCollection = new ArrayCollection( [
                { Month: "17", Profit: 2000, Expenses: 1500, Amount: 450 },
                { Month: "18", Profit: 800, Expenses: 200, Amount: 600 },
                { Month: "19", Profit: 1500, Expenses: 500, Amount: 300 },
                { Month: "20", Profit: 1800, Expenses: 1200, Amount: 900 },
                { Month: "21", Profit: 2400, Expenses: 575, Amount: 500 },
                 { Month: "22", Profit: 720, Expenses: 575, Amount: 500 },
                { Month: "23", Profit: 1800, Expenses: 1200, Amount: 900 },
                { Month: "24", Profit: 2400, Expenses: 575, Amount: 500 },
                 { Month: "25", Profit: 1400, Expenses: 575, Amount: 500 },
                 { Month: "26", Profit: 2000, Expenses: 1500, Amount: 450 },
                { Month: "27", Profit: 1000, Expenses: 200, Amount: 600 },
                { Month: "28", Profit: 1500, Expenses: 500, Amount: 300 },
                { Month: "29", Profit: 1800, Expenses: 1200, Amount: 900 },
                { Month: "30", Profit: 2400, Expenses: 575, Amount: 500 },
                 { Month: "31", Profit: 3400, Expenses: 575, Amount: 500 },
                { Month: "1", Profit: 1700, Expenses: 1200, Amount: 900 },
                { Month: "2", Profit: 2400, Expenses: 575, Amount: 500 },
                 { Month: "3", Profit: 480, Expenses: 575, Amount: 500 },
                 { Month: "4", Profit: 2400, Expenses: 575, Amount: 500 },
                 { Month: "5", Profit: 1480, Expenses: 575, Amount: 500 },
                 { Month: "6", Profit: 570, Expenses: 575, Amount: 500 },
                 { Month: "7", Profit: 1970, Expenses: 575, Amount: 500 },
                 { Month: "8", Profit: 1600, Expenses: 575, Amount: 500 },
                 { Month: "9", Profit: 720, Expenses: 575, Amount: 500 },
                 { Month: "10", Profit: 2100, Expenses: 575, Amount: 500 },
                 { Month: "11", Profit: 780, Expenses: 575, Amount: 500 },
                 { Month: "12", Profit: 1900, Expenses: 575, Amount: 500 },
                 { Month: "13", Profit: 1480, Expenses: 575, Amount: 500 },
                 { Month: "14", Profit: 1100, Expenses: 575, Amount: 500 },
                 { Month: "15", Profit: 2480, Expenses: 575, Amount: 500 },
                 { Month: "16", Profit: 700, Expenses: 575, Amount: 500 },            
                  { Month: "17", Profit: 1400, Expenses: 575, Amount: 500 } ]);
           
            private function linechart_mouseMove(evt:MouseEvent):void {               
                    tit.label = evt.stageY.toString() + " - " + evt.localY+ " - " + this.mouseY;
                }  
                
               
            
    ]]>     
        
    </mx:Script>
         
    <mx:CurrencyFormatter id="currFormatter" precision="0" />  
         
    <mx:Stroke id = "s1" color="#2E95BF" weight="1"/> 
        
    <mx:Stroke id = "s2" color="#62C426" weight="1"/> 
        
    <mx:Stroke id = "s3" color="#FF8C31" weight="1.5"/> 
        
    <mx:Stroke id="vSolid" weight=".002" color="#333333" alpha=".04" /> 
        
    <mx:Stroke id="hSolid" weight=".03" color="#ff0000" alpha=".1" /> 
    <mx:Stroke id="axisStroke2" color="#6B90DA" weight="2" alpha=".25" caps="square"/>
    <mx:SolidColor id="vFill" color="#D6DECE" alpha=".3" /> 
    <mx:SolidColor id="hFill" color="#F9E0E0" alpha=".03" />  
    <mx:SolidColor id="tFill" color="#ffffff" alpha=".3" /> 
        
    <mx:Array id="seriesFilterArr" />
        
    <mx:Panel title="海口-重庆 航线订单趋势图" height="100%" width="100%" fontSize="14" fontWeight="normal">
            
    <mx:Button width="301" fontWeight="bold" id="tit" fontSize="12" color="#F2530C" fontFamily="Arial" labelPlacement="left"/>
             
    <comp:CustomLineChart id="linechart" height="100%" width="100%"
                paddingLeft
    ="5" paddingRight="5"  
                showDataTips
    ="true"  showAllDataTips="true"  dataTipFunction="CustomLineChart_dataTipFunction" dataProvider="{expensesAC}"  mouseMove="linechart_mouseMove(event);" creationComplete="init(event);">
                 
    <comp:verticalAxis>  
                
    <mx:LinearAxis baseAtZero="false" title="Price" labelFunction="linearAxis_labelFunc"   minimum="0"            
                    
    />  
            
    </comp:verticalAxis>    
                
    <comp:horizontalAxis>           
                    
    <mx:CategoryAxis categoryField="Month" />
                
    </comp:horizontalAxis>
                
    <comp:horizontalAxisRenderer>
                   
    <mx:AxisRenderer canStagger="false" fontSize="10" >                       
                            
    <mx:axisStroke>{axisStroke2}</mx:axisStroke>
            
    </mx:AxisRenderer>
               
    </comp:horizontalAxisRenderer>
               
    <comp:verticalAxisRenderer>
                      
    <mx:AxisRenderer >
                
    <mx:axisStroke>{axisStroke2}</mx:axisStroke>
            
    </mx:AxisRenderer>
                    
    </comp:verticalAxisRenderer>

                    
                
    <comp:backgroundElements>  
                
    <mx:GridLines direction="both" horizontalTickAligned="true" verticalTickAligned="true" 
                verticalStroke
    ="{hSolid}" horizontalStroke="{vSolid}" 
                verticalFill
    ="{vFill}" horizontalFill="{hFill}" 
                verticalAlternateFill
    ="{tFill}" horizontalAlternateFill="{tFill}" 
               
    /> 
            
    </comp:backgroundElements> 
                
    <comp:series>
                    
    <mx:LineSeries yField="Profit" form="curve" displayName="票点明细:" itemRenderer="custer.MyLabel" lineStroke="{s3}" />               
                   
                
    </comp:series>
            
    </comp:CustomLineChart>

        
    </mx:Panel>

    </mx:Application>

    关键部分:axisStroke (参见Api)

    <mx:AxisRenderer canStagger="false" fontSize="10" >                      
                            <mx:axisStroke>{axisStroke2}</mx:axisStroke>
      </mx:AxisRenderer>

  • 相关阅读:
    Linux文件管理详解
    Linux用户管理详解
    Error: No suitable device found: no device found for connection "System eth0" 解决方法
    Linux配置网络详解
    万能的数据传输格式XML入门教程
    【万能的数据传输格式XML入门教程】八、Xpath查询语言
    【万能的数据传输格式XML入门教程】七、SimpleXML模型(查询操作)
    h5标签兼容
    vue 常用指令
    echarts3更新
  • 原文地址:https://www.cnblogs.com/Fooo/p/1586980.html
Copyright © 2011-2022 走看看