Flex中如何通过barWidthRatio样式控制改变图表线宽度的例子

By Minidxer | October 22, 2008

接下来的例子演示了Flex中如何通过barWidthRatio样式，控制改变图表线宽度。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:ArrayCollection id="arrColl">
  8.         <mx:source>
  9.             <mx:Array>
  10.                 <mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
  11.                 <mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
  12.                 <mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
  13.                 <mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
  14.                 <mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
  15.             </mx:Array>
  16.         </mx:source>
  17.     </mx:ArrayCollection>
  18.  
  19.     <mx:ApplicationControlBar dock="true">
  20.         <mx:Form>
  21.             <mx:FormItem label="barWidthRatio:">
  22.                 <mx:HSlider id="slider"
  23.                         minimum="0.0"
  24.                         maximum="1.0"
  25.                         value="0.6"
  26.                         liveDragging="true"
  27.                         tickInterval="0.1" />
  28.             </mx:FormItem>
  29.         </mx:Form>
  30.     </mx:ApplicationControlBar>
  31.  
  32.      <mx:BarChart id="barChart"
  33.              showDataTips="true"
  34.              dataProvider="{arrColl}"
  35.              width="100%"
  36.              height="100%">
  37.         <mx:verticalAxis>
  38.             <mx:CategoryAxis categoryField="name"/>
  39.         </mx:verticalAxis>
  40.         <mx:series>
  41.             <mx:BarSeries id="barSeries"
  42.                     yField="name"
  43.                     xField="avg"
  44.                     displayName="avg"
  45.                     barWidthRatio="{slider.value}" />
  46.         </mx:series>
  47.     </mx:BarChart>
  48.  
  49. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Chart | 1 Comment » | Tags: ,

你可能还对下列文章感兴趣:

One comment | Add One

  1. 学习 - 10/27/2008 at 10:21 am

    老师视频在线手把手讲解 QQ群：10669989
    ActionScript3.0 Cookbook 200元
    Flex3.0RIA开发500元
    Flash+PHP/ASP(任选其一)网站开发500元（用户调查表/新闻发布系统/留言本，要有Flash编程基础才可以听）
    北京地区的朋友如果选择教室听课，学费两倍至三倍计算。
    QQ咨询在线：807792168
    网址：http://www.tujunhui.cn
    地点：北京市朝阳区立水桥北方明珠A楼1205室
    联系电话：13146492725

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll