FLEX3D圖表旋轉實現

http://coenraets.org/blog/2007/11/experimenting-with-the-ilog-elixir-components-for-flex/

package
{
import flash.events.MouseEvent;

import ilog.charts3d.charts3dClasses.CartesianChart3D;

import mx.core.Application;

public class Chart3DControl
{
private var _chart:CartesianChart3D;

private var downX:int;
private var downY:int;
private var downElevation:Number;
private var downRotation:Number;

public function set chart(chart:CartesianChart3D):void
{
_chart = chart;
_chart.addEventListener(MouseEvent.MOUSE_DOWN, downListener);
_chart.addEventListener(MouseEvent.MOUSE_WHEEL, wheelListener);
}

public function get chart():CartesianChart3D
{
return _chart;
}

private function downListener(e:MouseEvent):void
{
_chart.removeEventListener(MouseEvent.MOUSE_DOWN, downListener);
Application.application.addEventListener(MouseEvent.MOUSE_UP, upListener);
Application.application.addEventListener(MouseEvent.ROLL_OUT, rollOutListener);
_chart.addEventListener(MouseEvent.MOUSE_MOVE, moveListener);
downX = e.stageX;
downY = e.stageY;
downElevation = _chart.elevationAngle;
downRotation = _chart.rotationAngle;
}

private function rollOverListener(e:MouseEvent):void
{
Application.application.removeEventListener(MouseEvent.ROLL_OVER, rollOverListener);
if (! e.buttonDown)
{
upListener(e);
}
}

private function rollOutListener(e:MouseEvent):void
{
Application.application.removeEventListener(MouseEvent.ROLL_OUT, rollOutListener);
Application.application.addEventListener(MouseEvent.ROLL_OVER, rollOverListener);
}

private function moveListener(e:MouseEvent):void
{
var dx:Number = e.stageX - downX;
var dy:Number = e.stageY - downY;
_chart.elevationAngle = downElevation + dy/5;
_chart.rotationAngle = downRotation - dx/5;
}

private function wheelListener(e:MouseEvent):void
{
if (e.delta < 0)
{
_chart.zoom += 0.15;
}
else
{
_chart.zoom -= 0.15;
}
}

private function upListener(e:MouseEvent):void
{
_chart.addEventListener(MouseEvent.MOUSE_DOWN, downListener);
Application.application.removeEventListener(MouseEvent.MOUSE_UP, upListener);
_chart.removeEventListener(MouseEvent.MOUSE_MOVE, moveListener);
}

}
}

 

 

//一下是顯示圖表

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" xmlns:ilog="http://www.ilog.com/2007/ilog/flex"
backgroundGradientColors="[0xFFFFFF, 0xFFFFFF]"
creationComplete="srv.send()">

<mx:Script>
<![CDATA[
import mx.charts.HitData;

import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

[Bindable]
private var products:ArrayCollection;

private function resultHandler(event:ResultEvent):void
{
products = event.result.catalog.product;
gc.refresh();
}

private function isChartVisible(selectedItem:Object):Boolean
{
return selectedItem && selectedItem.revenue;
}

private function formatDataTip(hitData:Object):String
{
return hitData.element.yField+"<br>"+hitData.item.month+"<br>"+cf.format(hitData.chartItem.yValue);
}

]]>
</mx:Script>

<mx:HTTPService id="srv" url="catalog.xml" result="resultHandler(event)"/>

<mx:AdvancedDataGrid id="dg" width="100%" height="40%">

<mx:dataProvider>
<mx:GroupingCollection id="gc" source="{products}">
<mx:Grouping>
<mx:GroupingField name="series"/>
</mx:Grouping>
</mx:GroupingCollection>
</mx:dataProvider>

<mx:columns>
<mx:AdvancedDataGridColumn dataField="name"/>
<mx:AdvancedDataGridColumn dataField="price"/>
</mx:columns>

</mx:AdvancedDataGrid>

<mx:SeriesInterpolate id="interpolate" elementOffset="10"/>

<mx:CurrencyFormatter id="cf"/>

<local:Chart3DControl chart="{chart}"/>

<ilog:ColumnChart3D id="chart" width="100%" height="60%" visible="{isChartVisible(dg.selectedItem)}"
showDataTips="true" dataProvider="{dg.selectedItem.revenue}" dataTipFunction="formatDataTip">

<ilog:wallsFill>
<mx:SolidColor color="0xdddddd"/>
</ilog:wallsFill>

<ilog:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</ilog:horizontalAxis>

<ilog:series>
<ilog:ColumnSeries3D yField="Europe" showDataEffect="interpolate"/>
<ilog:ColumnSeries3D yField="Americas" showDataEffect="interpolate"/>
<ilog:ColumnSeries3D yField="Asia" showDataEffect="interpolate"/>
</ilog:series>

</ilog:ColumnChart3D>

<mx:Label text="Click+Drag=Rotation | Mouse wheel=Zoom"/>

</mx:Application>