Flex PieChart 圓餅圖 突出特效


<?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" minWidth="955" minHeight="600"
>
<fx:Script>
<![CDATA[
import mx.charts.events.ChartItemEvent;
import mx.charts.series.items.PieSeriesItem;
import mx.collections.ArrayCollection;
import mx.effects.easing.Elastic;
import mx.events.FlexEvent;

protected function itemClick(event:ChartItemEvent):void
{
//取得被點擊的切片項目
var item:PieSeriesItem = event.hitData.chartItem as PieSeriesItem;

//讓餅圖突出的效果
var arr:Array = [];
arr[item.index] = 0.2;
pieSeries.perWedgeExplodeRadius = arr;
}

]]>
</fx:Script>
<fx:Declarations>
<s:XMLListCollection id="provider">
<s:source>
<fx:XMLList xmlns="">
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</fx:XMLList>
</s:source>
</s:XMLListCollection>
</fx:Declarations>
<mx:PieChart id="pieChart" dataProvider="{provider}" showDataTips="true"
itemClick="itemClick(event);" width="400" height="400"
>
<mx:series>
<mx:PieSeries id="pieSeries" field="@data" nameField="@label" labelPosition="none" reserveExplodeRadius="0.2">
<mx:showDataEffect>
<mx:SeriesInterpolate duration="1500" easingFunction="{Elastic.easeOut}" />
</mx:showDataEffect>
<mx:filters>
<mx:DropShadowFilter />
</mx:filters>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
</s:Application>


要注意的是：
PieSeries的reserveExplodeRadius數值要與arr[item.index] = 0.2; 的數值相同，不相同時餅圖被click時會看見整體的PieChart縮小。

Flex DataGrid 複製至剪貼簿 CSV格式

<?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"
minWidth="955" minHeight="600"
creationComplete="start(event)"
>
<fx:Script>
<![CDATA[
import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;

import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.utils.UIDUtil;

protected function start(event:FlexEvent):void
{
  var provider:ArrayCollection = new ArrayCollection();
  for(var i:int=0 ; i < 10 ; i++)
  {
    provider.addItem( {id:UIDUtil.createUID() , index:i , value:i + "號"});
  }
  grid.dataProvider = provider;
}

protected function copy(event:MouseEvent):void
{
  var csv:String = "";
  var item:Object;
  csv = "ID" + "\t" + "Index" + "\t" + "Value" + "\n";
  for(var i:int ; i < grid.dataProvider.length ; i++)
  {
    item = grid.dataProvider.getItemAt(i);
    csv += item['id'] + '\t' + item['index'] + '\t' + item['value'] + '\n';
  }

//寫入剪貼簿
Clipboard.generalClipboard.clear();
Clipboard.generalClipboard.setData(ClipboardFormats.TEXT_FORMAT , csv , false);
}

]]>
</fx:Script>
<s:VGroup>
<s:DataGrid id="grid"
  verticalScrollPolicy="off"
  variableRowHeight="false"
  editable="false"
  selectionMode="singleRow"
  alternatingRowColors="{new Array(0xF0F0F0, 0xFFFFFF)}">
  <s:columns>
   <s:ArrayList>
    <s:GridColumn dataField="id" headerText="ID" resizable="false"    minWidth="300"/>
    <s:GridColumn dataField="index" headerText="Index" resizable="false"   minWidth="80"/>
    <s:GridColumn dataField="value" headerText="Value" resizable="false" minWidth="80"/>
   </s:ArrayList>
  </s:columns>
</s:DataGrid>
<s:Button label="複製到剪貼簿" click="copy(event)"/>
</s:VGroup>
</s:Application>


如此可以簡單的貼到execel中。

CSV格式參考文件

BitmapData merge


<?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"
minWidth="955" minHeight="600"
creationComplete="start(event)"
>
<fx:Script>
<![CDATA[
import mx.core.BitmapAsset;
import mx.events.FlexEvent;

[Embed(source="assets/iphone4.jpg")]
private var Iphone:Class;

[Embed(source="assets/cat.jpg")]
private var Cat:Class;

[Embed(source="assets/background.jpg")]
private var BackGround:Class;

protected function start(event:FlexEvent):void
{
var iphone:Bitmap = new Iphone() as Bitmap;
var cat:Bitmap = new Cat() as Bitmap;
var backGround:Bitmap = new BackGround() as Bitmap;
var mixBitMapData:BitmapData = backGround.bitmapData;


var catX:Number = (backGround.width - cat.width)/2;
var catY:Number = (backGround.height - cat.height)/2;

//合併背景與貓
mixBitMapData.merge(cat.bitmapData , cat.bitmapData.rect ,new Point(catX,catY),0x100,0x100,0x100,0x100);


var iphoneX:Number = catX + 110;
var iphoneY:Number = catY + 50;

//0x100這些是RGBA通道的複製值,0x100是完全,以下會混合
mixBitMapData.merge(iphone.bitmapData , iphone.bitmapData.rect , new Point(iphoneX , iphoneY),0x100,0x100,0x100,0x100);


catUic.width = cat.width;
catUic.height = cat.height;
catUic.addChild(cat);

iphoneUic.width = iphone.width;
iphoneUic.height = iphone.height;
iphoneUic.addChild(iphone);

uic.addChild(backGround);
}
]]>
</fx:Script>
<s:VGroup width="100%" height="100%">
<s:HGroup id="box">
<mx:UIComponent id="catUic"/>
<mx:UIComponent id="iphoneUic"/>
</s:HGroup>

<mx:UIComponent id="uic"/>
</s:VGroup>
</s:Application>