<!--columnchart的动态效果样式，还有线条的样式-->
<fx:Declarations>
??<!-- 将非可视元素（例如服务、值对象）放在此处 -->
??<mx:WipeUp id="wipeUp" duration="1000"/>
??<mx:WipeRight id="wipeIn" duration="1000"/>
??<mx:SolidColorStroke id = "s1" color="haloGreen" weight="3" alpha="0.6"/>
<mx:SolidColorStroke id="chartAxisStroke" scaleMode="normal" weight="2" pixelHinting="true" miterLimit="0"
??????? joints="round" caps="round" color="#000000" alpha="1.0"/>
??<mx:SolidColorStroke id="chartAxisStrokeThick" scaleMode="normal" miterLimit="0" joints="round"
??????? caps="round" color="#000000" weight="2" alpha="1.0"/>??
?? <!-- 定制坐标轴样式. color:uint (default = 0x000000) — 指定线条颜色。默认值为 0x000000（黑色）。?
??weight:Number (default = 0) — 指定线条的粗细（以像素为单位）。默认值为 0。?
??alpha:Number (default = 1.0) — 指定 alpha 值，介于 0.0 到 1.0 之间。默认值为 1.0（不透明）。?
??pixelHinting:Boolean (default = false) — 指定是否提示笔触采用完整像素。此值同时影响曲线锚点
??的位置以及线条笔触大小本身。默认值为 false。?
??scaleMode:String (default = "normal") — LineScaleMode 类中的一个值，指定要使用的缩放模式。有效值为
??LineScaleMode.HORIZONTAL、LineScaleMode.NONE、LineScaleMode.NORMAL 和 LineScaleMode.VERTICAL。
??此参数是可选的，默认值为 LineScaleMode.NORMAL。?
??caps:String (default = null) — 指定线条末端处端点类型。有效值为 "round"、"square" 和 "none"。默认值为 null。?
??joints:String (default = null) — 指定用于拐角的连接外观的类型。有效值为 "round"、"miter" 和 "bevel"。默认值为 null。?
??miterLimit:Number (default = 0) — 指示将在哪个限制位置切断尖角。有效值范围是 0 到 255。默认值为 0。
??-->
?</fx:Declarations>
<!---columnchart的文本样式--->
??<fx:Style>
??@namespace s "library://ns.adobe.com/flex/spark";
??@namespace mx "library://ns.adobe.com/flex/mx";
??.ColumnChart
??{?
???axis-title-style-name:brownTitles;
??}
??.brownTitles
??{??
???font-size:12;
???color:#000000;
??}
??.Canvas {
???font-size:12;
??}
??.ChineseFont{
???fontSize:12;
???fontWeight:normal;
??}
?</fx:Style>
<!----------------------------------------------------------------->
?
<mx:ColumnChart id="columnChart" //columnchart的id。我们可以用它找到ColumnChart对它进行操作
?????????width="96%" //columnchart的宽度这里是用百分比，也可以数字。
?????????height="100%" //columchart的高度
?????????alpha="1.0" //透明度。1.0表示不透明。0表示透明。
?????????showDataTips="true"//这里设置的是在鼠标移动到柱状图上时否要显示出该柱状图的信息。
?????????styleName="ColumnChart"?//columchart的样式。
?????????columnWidthRatio="0.20"//柱状图的宽度。这里的0.20表示可用空间的0.2
?????????y="25" x="3" //相对于父组件距左边与上边框的距离。
?????????dataTipFunction="dataTipFunction">//这个函数与showDataTips配合使用，控制鼠标移动到柱状图显示的文本内容。
??????<!--设置X轴的值-->
??????<mx:horizontalAxis>
???????<mx:CategoryAxis? id="haxis"
???????????? categoryField="时间"//x轴的数来源，来源于数组中“时间”的属性值
??????????? ?displayName="时间"? //在x轴显示的标题文本
???????????? labelFunction="horAxisLable" />//对要显示在x轴文本的处理。
??????</mx:horizontalAxis>
??????<!-- 定制横坐标-->
??????<mx:horizontalAxisRenderers>
???????<mx:AxisRenderer axis="{haxis}" axisStroke="{chartAxisStroke}" canDropLabels="true"
??????????? color="#000000" tickStroke="{chartAxisStroke}" fontSize="12" fontFamily="微软雅黑" />
//将上面定制的x轴设置到横坐。 并设置颜色，字体大小。canDropLabels="true"设置为true是为了当x轴点的标点过多，智能的去除多余的点。
??????</mx:horizontalAxisRenderers>
??????<!--设置左边Y轴的值-->
??????<mx:verticalAxis>?
???????<mx:LinearAxis id="first" displayName="收益" minimum="0" autoAdjust="true"/>?
//定投影y轴内容，显示的数据来源是数组中“收益”的值。 autoAdjust=”true“是自适应的定义y轴r的刻度。
??????</mx:verticalAxis>?
??????<!-- 定制左边纵坐标 -->??
??????<mx:verticalAxisRenderers>
<!----这里同x轴--->
???????<mx:AxisRenderer axis="{first}"? canDropLabels="true" axisStroke="{chartAxisStrokeThick}"
??????????? color="#000000" tickStroke="{chartAxisStroke}" />
//设置
??????</mx:verticalAxisRenderers>
??????<!--收益柱状图-->
??????<mx:series>
???????<mx:ColumnSeries
????????verticalAxis="{first}"
????????yField="收益" //值来源的值域
????????displayName="收入"
????????showEffect="{wipeUp}"//显示效果
?????????? >
????????<mx:fill>
?????????<mx:LinearGradient id="columnGradient">
??????????<mx:entries>
???????????<fx:Array>
<!--设置柱状图的阴影--> ????????????<mx:GradientEntry color="#0080FF" ratio="0.0" alpha="1.0" /> ???????????</fx:Array> ??????????</mx:entries> ?????????</mx:LinearGradient> ????????</mx:fill> ???????</mx:ColumnSeries> ??????</mx:series> ?????</mx:ColumnChart>
