Flex中如何利用showLabelVertically属性控制ColumnChart上Column
发布时间:2020-12-15 01:01:46 所属栏目:百科 来源:网络整理
导读:接下来的例子演示了Flex中如何利用showLabelVertically属性,控制ColumnChart上ColumnSeries标签为竖直或横向 下面是完整代码 ?xml version="1.0"?mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" back
接下来的例子演示了Flex中如何利用showLabelVertically属性,控制ColumnChart上ColumnSeries标签为竖直或横向
下面是完整代码 <?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("Arial"); fontFamily: ArialEmbedded; } ColumnChart { fontFamily: ArialEmbedded; } </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,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="8/1/2007" open="40.29" close="39.58" /> <quote date="8/2/2007" open="39.4" close="39.52" /> <quote date="8/3/2007" open="39.47" close="38.75" /> <quote date="8/6/2007" open="38.71" close="39.38" /> <quote date="8/7/2007" open="39.08" close="39.42" /> <quote date="8/8/2007" open="39.61" close="40.23" /> <quote date="8/9/2007" open="39.9" close="40.75" /> <quote date="8/10/2007" open="41.3" close="41.06" /> <quote date="8/13/2007" open="41" close="40.83" /> <quote date="8/14/2007" open="41.01" close="40.41" /> <quote date="8/15/2007" open="40.22" close="40.18" /> <quote date="8/16/2007" open="39.83" close="39.96" /> <quote date="8/17/2007" open="40.18" close="40.32" /> <quote date="8/20/2007" open="40.55" close="40.74" /> <quote date="8/21/2007" open="40.41" close="40.13" /> <quote date="8/22/2007" open="40.4" close="40.77" /> <quote date="8/23/2007" open="40.82" close="40.6" /> <quote date="8/24/2007" open="40.5" close="40.41" /> <quote date="8/27/2007" open="40.38" close="40.81" /> </mx:XMLList> </mx:source> </mx:XMLListCollection> <mx:ApplicationControlBar dock="true"> <mx:CheckBox id="checkBox" label="showLabelVertically:" labelPlacement="left" selected="true" /> </mx:ApplicationControlBar> <mx:ColumnChart id="columnChart" showDataTips="true" dataProvider="{dp}" width="100%" height="100%" showLabelVertically="{checkBox.selected}"> <!-- vertical axis --> <mx:verticalAxis> <mx:LinearAxis baseAtZero="false" labelFunction="linearAxis_labelFunc" /> </mx:verticalAxis> <!-- horizontal axis --> <mx:horizontalAxis> <mx:CategoryAxis id="ca" categoryField="@date" title="August 2007" labelFunction="categoryAxis_labelFunc" /> </mx:horizontalAxis> <!-- horizontal axis renderer --> <mx:horizontalAxisRenderers> <mx:AxisRenderer axis="{ca}" canDropLabels="true" /> </mx:horizontalAxisRenderers> <!-- series --> <mx:series> <mx:ColumnSeries displayName="Open" xField="@date" yField="@open" labelFunction="columnSeries_labelFunc" labelPosition="outside"> </mx:ColumnSeries> </mx:series> <!-- series filters --> <mx:seriesFilters> <mx:Array /> </mx:seriesFilters> </mx:ColumnChart> </mx:Application> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |