flex x轴旋转 (转载)-CSDN博客

本文链接：https://blog.csdn.net/x_lyk_x/article/details/83535676

本文介绍了一种使用Adobe Flex框架实现的股票数据柱状图展示方法，通过自定义的数据格式来显示不同国家的开盘价和收盘价，并利用日期格式器进行数据标签的美化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="vertical" 
        verticalAlign="middle" 
        backgroundColor="white"> 


  <mx:Style>
      @font-face { 
            src: local("仿宋_GB2312");
            font-size:20;
            font-family:EmbeddedArial; 

        } 

        ColumnChart { 
            font-family:EmbeddedArial; 
            font-size:16;
        } 
  </mx:Style> 
    <mx:Script> 
        <![CDATA[ 
            import mx.charts.series.items.ColumnSeriesItem; 
            import mx.charts.ChartItem; 
            import mx.charts.chartClasses.Series; 
            import mx.charts.chartClasses.IAxis; 
            import mx.utils.ObjectUtil;  

            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String { 
                return currencyFormatter.format(item); 
            } 

            private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String { 
                var datNum:Number = Date.parse(item); 
                var tempDate:Date = new Date(datNum); 
                return shortDateFormatter.format(tempDate).toUpperCase(); 
            } 

            private function columnSeries_labelFunc(element:ChartItem, series:Series):String { 
                var csi:ColumnSeriesItem = ColumnSeriesItem(element); 
                var ser:ColumnSeries = ColumnSeries(series); 

                var datNum:Number = Date.parse(csi.item.@date); 
                var tempDate:Date = new Date(datNum); 
                return fullDateFormatter.format(tempDate); 
            } 
        ]]> 
    </mx:Script> 

    <mx:DateFormatter id="shortDateFormatter" formatString="DD" /> 
    <mx:DateFormatter id="fullDateFormatter" formatString="MMM D, YYYY" /> 
    <mx:CurrencyFormatter id="currencyFormatter" precision="2" /> 

    <mx:XMLListCollection id="dp"> 
        <mx:source> 
            <mx:XMLList> 
                <quote date="中国----国家" open="40.29" close="39.58" /> 
                <quote date="美国----国家" open="39.4" close="39.52" /> 
                <quote date="德国----国家" open="39.47" close="38.75" /> 
                <quote date="韩国----国家" open="38.71" close="39.38" /> 
                <quote date="阿根廷----国家" open="39.08" close="39.42" /> 
                <quote date="巴西----国家" open="39.61" close="40.23" /> 
                <quote date="日本----国家" open="39.9" close="40.75" /> 
                <quote date="索马里海盗" open="41.3" close="41.06" /> 
            </mx:XMLList> 
        </mx:source> 
    </mx:XMLListCollection> 
    <mx:ColumnChart id="columnChart" 
            showDataTips="true" 
            dataProvider="{dp}" 
            width="432" 
            height="300" 
            showLabelVertically="{checkBox.selected}"> 

        <!-- vertical axis --> 
        <mx:verticalAxis> 
            <mx:LinearAxis baseAtZero="false" /> 
        </mx:verticalAxis> 

        <!-- horizontal axis --> 

        <mx:horizontalAxis> 
            <mx:CategoryAxis id="ca"  
                    categoryField="@date" /> 
        </mx:horizontalAxis> 

        <!-- horizontal axis renderer --> 
        <mx:horizontalAxisRenderers> 
            <mx:AxisRenderer axis="{ca}"  labelRotation="-90"
                    canDropLabels="true" /> 
        </mx:horizontalAxisRenderers> 

        <!-- series --> 
        <mx:series> 
            <mx:ColumnSeries displayName="Open" 
                    xField="@date" 
                    yField="@open" 
                    labelPosition="outside"> 
            </mx:ColumnSeries> 
        </mx:series> 

        <!-- series filters --> 
        <mx:seriesFilters> 
            <mx:Array /> 
        </mx:seriesFilters> 
    </mx:ColumnChart>

    <mx:ApplicationControlBar dock="true"> 
        <mx:CheckBox id="checkBox" 
                label="showLabelVertically:" 
                labelPlacement="left" 
                selected="true" /> 
    </mx:ApplicationControlBar> 

</mx:Application>