flex柱状图 之 columnChart使用

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