FLEX的图表(CHART)中的Legend?的字体通过直接设置Style?并没有办法改变字体大小.
通过查资料发现了这个方法:?通过派生LegendItem类,并设置Legend的ItemClass属性来实现。
LegendItem?是Lengend?的元素,?就是里面一个一个的图示.?通过派生这个类,?就可以修改其相应的样式.-
派生LegendItem?类,?并设置样式.?
//?ActionScript?file
package?com
{
????import?mx.charts.LegendItem;
????
????public?class?BigFontLegendItem?extends?LegendItem
????{
????????public?function?BigFontLegendItem()
????????{
????????????super();
????????????this.styleName?=?"ChineseFont";
????????}
????????
????}
}
2.在<s:Application>中添加样式:
<fx:Style>
????????@namespace?s?"library://ns.adobe.com/flex/spark";
????????@namespace?mx?"library://ns.adobe.com/flex/mx";
????????.ChineseFont{
????????????fontFamily:"微软雅黑";
????????????fontSize:12;
????????????fontWeight:normal;
????????}
????</fx:Style>
3.?在相应的Legend中指定legendItemClass="com.BigFontLegendItem"
<mx:Legend?dataProvider="{linechart1}"?direction="horizontal"?legendItemClass="com.BigFontLegendItem"/>
<?xml version="1.0"?> <!-- Simple example to demonstrate the LineChart and AreaChart controls. --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()" > <fx:Script> <![CDATA[ import mx.charts.series.LineSeries; import mx.collections.ArrayCollection; import mx.utils.ColorUtil; private var colorutil:ColorUtil ; [Bindable] private var expensesAC:ArrayCollection = new ArrayCollection( [ { Month: "Jan",Profit: 2000,Expenses: 1500,Amount: 450 },{ Month: "Feb",Profit: 1000,Expenses: 200,Amount: 600 },{ Month: "Mar",Profit: 1500,Expenses: 500,Amount: 300 },{ Month: "Apr",Profit: 1800,Expenses: 1200,Amount: 900 },{ Month: "May",Profit: 2400,Expenses: 575,Amount: 500 } ]); private function init():void { var array:Array = new Array(); for(var i:int =0;i<3;i++) { var line:LineSeries = new LineSeries(); line.setStyle("lineStroke",new SolidColorStroke(new uint("0xf00000"),4)); line.yField="Profit"; line.displayName="Profit"; array.push(line); var c:ColorUtil = null; } linechart.series = array; linechart.dataProvider = expensesAC; linechart.showDataTips=true; } ]]> </fx:Script> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; .abc{ fontFamily:"微软雅黑"; fontSize:12; fontWeight:normal; color:green; } </fx:Style> <fx:Declarations> <!-- Define custom Strokes. --> <mx:SolidColorStroke id = "s1" color="blue" weight="1" scaleMode="vertical" pixelHinting="false"/> <mx:SolidColorStroke id = "s2" color="red" weight="2"/> <mx:SolidColorStroke id = "s3" color="green" weight="2"/> </fx:Declarations> <mx:Panel title="LineChart and AreaChart Controls Example" height="100%" width="100%" layout="horizontal"> <mx:LineChart id="linechart" height="100%" width="45%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{expensesAC}"> <!-- <mx:horizontalAxis> <mx:CategoryAxis categoryField="Month"/> </mx:horizontalAxis>--> <mx:series> <mx:LineSeries yField="Profit" displayName="Profit" lineStroke="{s1}"/> <mx:LineSeries yField="Expenses" displayName="Expenses" lineStroke="{s2}"/> <mx:LineSeries yField="Amount" displayName="Amount" lineStroke="{s3}"/> </mx:series> </mx:LineChart> <mx:Legend dataProvider="{linechart}" legendItemClass="LegendItemImpl"/> </mx:Panel> </s:Application>
package { import mx.charts.LegendItem; public class LegendItemImpl extends LegendItem { public function LegendItemImpl() { super(); this.styleName= "abc"; } } }