flex4.6画图——柱状图

 Flex4柱状图：

代码如下：两种数据源，第一种xml数据源已经注释，本例使用ArrayCollection显示。

<?xml version="1.0" encoding="utf-8"?><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"    width="1073" height="654" minWidth="955" minHeight="600"><fx:Declarations><!-- 第一种数据提供方式，利用xml数据<fx:XML id="yuan"><all><data name="海贼王" hot="90" theatre="90" blues="482" rating="90" trends="100" /><data name="死神" hot="20" theatre="10" blues="230" rating="60"  trends="70" /><data name="火影忍者" hot="90" theatre="10" blues="482" rating="90" trends="100" /><data name="柯南" hot="90" theatre="10" blues="482" rating="90"  trends="100" /></all></fx:XML><s:XMLListCollection id="bardata" source="{yuan.data}"/>--></fx:Declarations><fx:Script><![CDATA[import mx.charts.LegendItem;import mx.collections.ArrayCollection;[Bindable]public var funs:ArrayCollection=new ArrayCollection([//创建数据集合{name:"海贼王",hot:90,theatre:10,blues:482,rating:90,trends:100},{name:"死神",hot:60,theatre:10,blues:230,rating:60,trends:70},{name:"火影忍者",hot:80,theatre:12,blues:520,rating:80,trends:40},{name:"柯南",hot:50,theatre:30,blues:600,rating:70,trends:30}]);]]></fx:Script><!--第一种显示方式，显示xml提供的数据<s:Panel width="710" title="柱状图"><mx:ColumnChart id="barchart"dataProvider="{bardata}"width="543"  fontFamily="幼圆"fontSize="16"showDataTips="true"><mx:horizontalAxis>  <mx:CategoryAxis categoryField="@name" />  </mx:horizontalAxis> <mx:series>  <mx:ColumnSeries xField="@name" yField="@hot" displayName="人气指数" /><mx:ColumnSeries xField="@name" yField="@theatre" displayName="剧场版数"/><mx:ColumnSeries xField="@name" yField="@blues" displayName="已出集数"/><mx:ColumnSeries xField="@name" yField="@rating"  displayName="好评度"/><mx:ColumnSeries xField="@name" yField="@trends" displayName="发展趋势"/></mx:series></mx:ColumnChart><mx:Legend x="547" y="11" height="183" dataProvider="{barchart}" toolTip="图例"></mx:Legend></s:Panel>   -->   <!-- 画一个panel容器，用来装这个柱状图--><s:Panel width="710" title="柱状图"><!-- dataprovider制定数据源  showDataTips="true" 指定当鼠标放到具体的某一项时，显示具体信息  fontFamily="幼圆" 设置文字的样式--><mx:ColumnChart id="barchart2" width="543" dataProvider="{funs}" fontFamily="幼圆"fontSize="16"showDataTips="true"><!-- 水平列显示值，在此处制定为漫画名字--><mx:horizontalAxis>  <mx:CategoryAxis categoryField="name" />  </mx:horizontalAxis> <!--垂直列显示值利用YFiled制定 ，displayName为这列的名称，显示图例时用到--><mx:series>  <mx:ColumnSeries xField="name" yField="hot"  displayName="人气指数" /><mx:ColumnSeries xField="name" yField="theatre" displayName="剧场版数"/><mx:ColumnSeries xField="name" yField="blues" displayName="已出集数"/><mx:ColumnSeries xField="name" yField="rating" displayName="好评度"/><mx:ColumnSeries xField="name" yField="trends" displayName="发展趋势"/></mx:series></mx:ColumnChart><!--显示图例--><mx:Legend x="547" y="11" height="183" dataProvider="{barchart2}" toolTip="图例"></mx:Legend></s:Panel></s:Application>

效果如下：