分享几个使用Flex3开发的图表示例

老早就接触flex了,到今年6月份才应用到开发中,主要也就是图表方面的应用,虽说开源的图表很多,但自己开发起来的就是比较有成就感,来分享下几个简单的图表应用吧: :arrow:

[b]pie chart:[/b]
[img]http://dl.iteye.com/upload/attachment/539305/5adff72c-f51c-37c8-b92a-4d4cdb95bbfc.png[/img]


<?xml version="1.0"?>
<!--
@author 脉兜
@date 20110516
柱状图

使用说明:
jsp页面调用flash需要传入initMethod参数,
该参数为js脚本的方法名,由flash调用该方法,
该方法返回json字符串
字符串格式:
格式demo:[{ "NAME": "USA", "VALUE": 35}]
key需要双引号,字符串VALUE也用双引号,单引号转换不了
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
horizontalAlign="center"
verticalAlign="top"
backgroundAlpha="0.1"
paddingTop="0"
paddingLeft="0"
paddingBottom="0"
paddingRight="0"
backgroundColor="white"
applicationComplete="init();">

<mx:Style>
PieSeries {
fills:blue, red, green,#298686, #B9EAC1, #F7F74B, #D30DD3, #FA3EAA, #313434;
}

.incomeSeries {
fontSize:16;
fontWeight:normal;
labelAlign:top;
}
</mx:Style>

<mx:Script>
<![CDATA[
import mx.charts.HitData;
import mx.controls.Alert;
import com.adobe.serialization.json.JSON;
import mx.collections.ArrayCollection;

[Bindable]
private var medalsAC:ArrayCollection = new ArrayCollection();

private function displayLabel(data:Object, field:String, index:Number, percentValue:Number):String {
var temp:String= ("" + percentValue).substr(0,6);
var name:String = "";
var showLen = 6;
var i:int = data.NAME.length;
if(i >=showLen ){
i = showLen;
name = data.NAME.substr(0,i) + "..";
}else{
name = data.NAME;
}

return name + '\n(' + temp + "%)" + '\n' + data.VALUE;
}

private function init():void{
//参数获取页面执行的js函数,js函数返回数据
var jsonStr : String = ExternalInterface.call(Application.application.parameters.initMethod);


//处理值为null的情况
jsonStr = jsonStr.replace("null",0);

var arr:Array = (JSON.decode(jsonStr) as Array);

for(var i: int = 0; i < arr.length; i++){

medalsAC.addItem({ NAME: arr[i]["NAME"], VALUE: arr[i]["VALUE"]});
}

}

]]>
</mx:Script>

<!-- This Stroke is used for the callout lines. -->
<mx:Stroke id="callouts" weight="1" color="black" alpha=".8" caps="round" />

<!-- This Stroke is used to separate the wedges in the pie. -->
<mx:Stroke id="radial" weight="1" color="0xFFFFCC" alpha=".3"/>

<!-- This Stroke is used for the outer border of the pie. -->
<mx:Stroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>

<!-- 效果设置 -->
<mx:SeriesInterpolate id="interpolate" duration="1000" />

<mx:PieChart id="chart"
showDataTips="true"
dataProvider="{medalsAC}" width="100%" height="100%">
<!--
-->
<mx:series>
<mx:PieSeries showDataEffect="interpolate"
nameField="NAME"
labelPosition="callout"
styleName="incomeSeries"
field="VALUE"
labelFunction="displayLabel"
calloutStroke="{callouts}"
radialStroke="{radial}"
stroke="{pieborder}"
>
<!-- Clear the drop shadow filters from the chart. -->
<mx:filters>
<mx:Array/>
</mx:filters>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
<!--
<mx:Legend dataProvider="{chart}" />
-->
</mx:Application>



[b]bar chart:[/b]
[img]http://dl.iteye.com/upload/attachment/539316/9090c8a5-7b1b-3e0e-a002-cbadd8899645.png[/img]


<?xml version="1.0"?>
<!--
@author 脉兜
@date 20110518
项目阶段图表

使用说明:
jsp页面调用flash需要传入initMethod参数和getYtitleMethod,
initMethod参数为js脚本的方法名,由flash调用该方法,
该方法返回json字符串
字符串格式:
格式demo:[{ "NAME": "USA", "VALUE": 35}]
key需要双引号,字符串value也用双引号,单引号转换不了

getXtitleMethod参数为获得x title的js函数名称,该方法返回名称即可

-->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
horizontalAlign="left"
verticalAlign="bottom"
backgroundAlpha="0.1"
backgroundColor="white"
paddingTop="0"
paddingLeft="0"
paddingBottom="0"
paddingRight="0"
applicationComplete="init();">
<mx:Style>
BarChart {
horizontalAxisStyleName:myAxisStyles;
verticalAxisStyleName:myAxisStyles;
}
.myAxisStyles {
tickPlacement:none;
}
.incomeSeries {
fontSize:9;
fontWeight:bold;
labelPosition:inside;
labelAlign:right;
fills:blue, red, green,#298686, #B9EAC1, #F7F74B, #D30DD3, #FA3EAA, #313434;
}

</mx:Style>

<mx:Script>
<![CDATA[
import mx.charts.series.items.BarSeriesItem;
import mx.charts.chartClasses.Series;
import mx.charts.ChartItem;
import mx.charts.HitData;
import mx.charts.chartClasses.IAxis;
import com.adobe.serialization.json.JSON;
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection();

public function dtFunc(hd:HitData):String {
return hd.item.name + ":" + hd.item.value;
}

//BarSeries labelFunction="displayLabel"
// private function displayLabel(element:ChartItem, series:Series):String {
// // Get a refereence to the current data element.
// var data:BarSeriesItem = BarSeriesItem(element);
//
// return "第" + data.xValue + "阶段";
// }


private function init():void{
xAxis.title = "bar chart demo";//ExternalInterface.call(Application.application.parameters.getXtitleMethod);
//参数获取页面执行的js函数,js函数返回数据
var jsonStr : String = ExternalInterface.call(Application.application.parameters.initMethod);
//var jsonStr : String = jsonStr = '[{ "NAME": "USA", "VALUE": 3},{ "NAME": "CN", "VALUE": 1}]';//debugger;

//处理值为null的情况
jsonStr = jsonStr.replace("null",0);

var arr:Array = (JSON.decode(jsonStr) as Array);

for(var i: int = 0; i < arr.length; i++){
expenses.addItem({ name: arr[i]["NAME"], value: arr[i]["VALUE"]});
}
}

//LinearAxis labelFunction="defineLabel"
//x坐标名称
// public function defineLabel(cat:Object, pcat:Object,ax:mx.charts.LinearAxis):String{
// return cat + "";
// }
]]>
</mx:Script>

<!-- Define custom colors for use as fills. -->
<mx:SolidColor id="sc1" color="blue" alpha=".7"/>
<!-- Define custom Strokes for the columns. -->
<mx:Stroke id="s1" color="blue" alpha=".8"/>

<mx:SeriesSlide id="slideIn" duration="1000" direction="right"/>

<mx:BarChart id="myChart" dataProvider="{expenses}"
showDataTips="true" width="100%" height="100%"
dataTipFunction="dtFunc"
>

<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="name"
/>
</mx:verticalAxis>

<mx:horizontalAxis>
<mx:LinearAxis id="xAxis" baseAtZero="true" interval="1" maximumLabelPrecision="0"/>
</mx:horizontalAxis>

<mx:series>
<mx:BarSeries
fill="{sc1}"
stroke="{s1}"
styleName="incomeSeries"
xField="value"
showDataEffect="slideIn"
/>
</mx:series>
</mx:BarChart>


</mx:Application>




[b]bar series:[/b]
[img]http://dl.iteye.com/upload/attachment/539325/6b7a60af-b9d1-3e6c-aafb-9ca3132f84d5.png[/img]

<?xml version="1.0"?>
<!--
@author 脉兜
@date 20110516

柱状图

使用说明:
jsp页面调用flash需要传入initMethod参数和getYtitleMethod,
@param initMethod 参数为js脚本的方法名,由flash调用该方法,
该方法返回json字符串
字符串格式:
格式demo:[{ "name": "USA", "value": 35}]
key需要双引号,字符串value也用双引号,单引号转换不了

@param getYtitleMethod 参数为获得y title的js函数名称,该方法返回名称即可

@param interval 增长值

@param maximumLabelPrecision 最大精确度几位

-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
horizontalAlign="center"
verticalAlign="top"
backgroundAlpha="0.1"
paddingTop="0"
paddingLeft="0"
paddingBottom="0"
paddingRight="0"
backgroundColor="white"
applicationComplete="init();">

<mx:Style>
ColumnChart {
horizontalAxisStyleName:myAxisStyles;
verticalAxisStyleName:myAxisStyles;
}
.myAxisStyles {
tickPlacement:none;
}
.incomeSeries {
fontSize:9;
fontWeight:bold;
labelPosition:inside;
labelAlign:top;
fills:blue, red, green,#298686, #B9EAC1, #F7F74B, #D30DD3, #FA3EAA, #313434;
}

</mx:Style>

<mx:Script>
<![CDATA[
import mx.charts.HitData;
import flash.net.navigateToURL;
import mx.charts.events.ChartItemEvent;
import com.adobe.serialization.json.JSON;
import mx.collections.ArrayCollection;

[Bindable]
private var medalsAC:ArrayCollection = new ArrayCollection();

public function dtFunc(hd:HitData):String {
return hd.item.name + " = " +
"<B>" + hd.item.value + "</B>";
}

private function init():void{
//标题
yAxis.title = ExternalInterface.call(Application.application.parameters.getYtitleMethod);
//增长值
yAxis.interval = ExternalInterface.call(Application.application.parameters.interval);
//最大精确度几位
yAxis.maximumLabelPrecision = ExternalInterface.call(Application.application.parameters.maximumLabelPrecision);

//参数获取页面执行的js函数,js函数返回数据
var jsonStr : String = ExternalInterface.call(Application.application.parameters.initMethod);
//var jsonStr : String = jsonStr = '[{ "NAME": "USA", "VALUE": 15},{ "NAME": "CN", "VALUE": 17}]';//debugger;

//处理值为null的情况
jsonStr = jsonStr.replace("null",0);

var arr:Array = (JSON.decode(jsonStr) as Array);
for(var i: int = 0; i < arr.length; i++){
medalsAC.addItem({ name: arr[i]["NAME"], value: arr[i]["VALUE"]});
}
}
//ColumnChart itemClick="handleClick(event)"
/**/
private function handleClick(event:ChartItemEvent):void {
var name : String = event.hitData.item.name;
var value : String = event.hitData.item.value;
//调用jsp页面js函数barClick事件参数1:name,参数2:value
var url :URLRequest = new URLRequest('javascript:barClick("' + name + '", "' + value + '")');
navigateToURL(url, "_self");
}

]]>
</mx:Script>

<!-- Define custom colors for use as fills. -->
<mx:SolidColor id="sc1" color="blue" alpha=".7"/>
<!-- Define custom Strokes for the columns. -->
<mx:Stroke id="s1" color="blue" alpha=".8"/>

<mx:SeriesSlide id="slideIn" duration="1000" direction="up"/>

<mx:ColumnChart id="columnChartID"
height="100%"
width="100%"
showDataTips="true"
dataProvider="{medalsAC}"
dataTipFunction="dtFunc"
itemClick="handleClick(event)" >
<mx:verticalAxis>
<mx:LinearAxis id="yAxis" baseAtZero="true" interval="1" maximumLabelPrecision="0"/>
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="name" />
</mx:horizontalAxis>

<mx:series>
<mx:ColumnSeries
xField="name"
yField="value"
styleName="incomeSeries"
fill="{sc1}"
stroke="{s1}"
showDataEffect="slideIn"
/>
</mx:series>
</mx:ColumnChart>
<!--
<mx:Legend dataProvider="{columnChartID}" width="137"/>
-->
</mx:Application>


[b]2 bar chart:[/b]
[img]http://dl.iteye.com/upload/attachment/539333/b4ba8bf1-f19f-31e3-a93b-2130b5b7d882.png[/img]

<?xml version="1.0"?>
<!--
@author 脉兜
@date 20110516

柱状图

使用说明:
jsp页面调用flash需要传入以下参数:

@param initMethod 参数为js脚本的方法名,由flash调用该方法,
该方法返回json字符串
字符串格式:
格式demo:[{ "name": "USA", "value": 35}]
key需要双引号,字符串value也用双引号,单引号转换不了

@param getYtitleMethod 参数为获得y title的js函数名称,该方法返回名称即可

@param interval 增长值

@param maximumLabelPrecision 最大精确度几位

jsp页面需提供js函数barClick2
处理item Click事件,barClick2带三个参数:参数1:NAME,参数2:VALUE1,参数3:VALUE2
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
horizontalAlign="center"
verticalAlign="top"
backgroundAlpha="0.1"
backgroundColor="white"
paddingTop="0"
paddingLeft="0"
paddingBottom="0"
paddingRight="0"
applicationComplete="init();">

<mx:Style>
ColumnChart {
horizontalAxisStyleName:myAxisStyles;
verticalAxisStyleName:myAxisStyles;
}
.myAxisStyles {
tickPlacement:none;
}
.incomeSeries {
fontSize:9;
fontWeight:bold;
labelPosition:inside;
labelAlign:top;
}

</mx:Style>

<mx:Script>
<![CDATA[
import mx.charts.ChartItem;
import mx.charts.HitData;
import flash.net.navigateToURL;
import mx.charts.events.ChartItemEvent;
import com.adobe.serialization.json.JSON;
import mx.collections.ArrayCollection;

[Bindable]
private var medalsAC:ArrayCollection = new ArrayCollection();

public function dtFunc(hd:HitData):String {
var ci:ChartItem = hd.chartItem;

return hd.item.name + " = " +
"<B>" + ci["yValue"] + "</B>" ;
}

private function init():void{
//标题
yAxis.title = ExternalInterface.call(Application.application.parameters.getYtitleMethod);
//增长值
yAxis.interval = ExternalInterface.call(Application.application.parameters.interval);
//最大精确度几位
yAxis.maximumLabelPrecision = ExternalInterface.call(Application.application.parameters.maximumLabelPrecision);

//参数获取页面执行的js函数,js函数返回数据
var jsonStr : String = ExternalInterface.call(Application.application.parameters.initMethod);
//var jsonStr : String = '[{ "NAME": "USA", "VALUE1": 15,"VALUE2": 5},{ "NAME": "CN", "VALUE1": 17,"VALUE2": 9}]';//debugger;
//处理值为null的情况
jsonStr = jsonStr.replace("null",0);

var arr:Array = (JSON.decode(jsonStr) as Array);
for(var i: int = 0; i < arr.length; i++){
medalsAC.addItem({
name: arr[i]["NAME"],
value1: arr[i]["VALUE1"],
value2: arr[i]["VALUE2"]
});
}
}

private function handleClick(event:ChartItemEvent):void {
var name : String = event.hitData.item.name;
var value1 : String = event.hitData.item.value1;
var value2 : String = event.hitData.item.value2;
//调用jsp页面js函数barClick事件参数1:name,参数2:value
var url :URLRequest = new URLRequest('javascript:barClick2("' + name + '", "' + value1 + '","' + value2 + '")');
navigateToURL(url, "_self");
}
]]>
</mx:Script>

<!-- Define custom colors for use as fills. -->
<mx:SolidColor id="sc1" color="blue" alpha=".7"/>
<!-- Define custom Strokes for the columns. -->
<mx:Stroke id="s1" color="blue" alpha=".8"/>

<!-- Define custom colors for use as fills. -->
<mx:SolidColor id="sc2" color="green" alpha=".7"/>
<!-- Define custom Strokes for the columns. -->
<mx:Stroke id="s2" color="green" alpha=".8"/>

<mx:SeriesSlide id="slideIn" duration="1000" direction="up"/>

<mx:ColumnChart id="columnChartID"
height="100%"
width="100%"
showDataTips="true"
itemClick="handleClick(event)"
dataProvider="{medalsAC}"
dataTipFunction="dtFunc"
>
<mx:verticalAxis>
<mx:LinearAxis id="yAxis" baseAtZero="true" interval="1" maximumLabelPrecision="0"/>
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="name" />
</mx:horizontalAxis>

<mx:series>
<mx:ColumnSeries
xField="name"
yField="value1"
styleName="incomeSeries"
fill="{sc1}"
stroke="{s1}"
showDataEffect="slideIn"
displayName="净收入"
/>

<mx:ColumnSeries
xField="name"
yField="value2"
styleName="incomeSeries"
fill="{sc2}"
stroke="{s2}"
showDataEffect="slideIn"
displayName="预计收入"
/>
</mx:series>
</mx:ColumnChart>
<!---->
<mx:Legend dataProvider="{columnChartID}" width="137"/>

</mx:Application>



jsp页面上通过标签引用图表:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="hyproject_main_BarSeries" width="100%" height="100%"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="/flash/BarSeries.swf?initMethod=getFlashData2&getYtitleMethod=getBarYtitle&interval=0.1&maximumLabelPrecision=1" />
<param name="quality" value="high" />
<param name="bgcolor" value="white" />
<param name="wmode" value="transparent"/>
<param name="allowScriptAccess" value="sameDomain" />
<embed src="/flash/BarSeries.swf?initMethod=getFlashData2&getYtitleMethod=getBarYtitle&interval=0.1&maximumLabelPrecision=1" quality="high" bgcolor="white"
width="100%" height="100%" name="hyproject_main_BarSeries" align="middle"
play="true"
loop="false"
wmode="transparent"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值