加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

修改Flex chart中Legend的字体样式

发布时间:2020-12-15 03:50:06 所属栏目:百科 来源:网络整理
导读:FLEX的图表(CHART)中的Legend?的字体通过直接设置Style?并没有办法改变字体大小. 通过查资料发现了这个方法:?通过派生LegendItem类,并设置Legend的ItemClass属性来实现。 LegendItem?是Lengend?的元素,?就是里面一个一个的图示.?通过派生这个类,?就可以修

FLEX的图表(CHART)中的Legend?的字体通过直接设置Style?并没有办法改变字体大小.

通过查资料发现了这个方法:?通过派生LegendItem类,并设置Legend的ItemClass属性来实现。

LegendItem?是Lengend?的元素,?就是里面一个一个的图示.?通过派生这个类,?就可以修改其相应的样式.

  1. 派生LegendItem?类,?并设置样式.?

BigFontLegendIte.as

//?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";
		}
	}
}



(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读