<!--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>