<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.charts.chartClasses.AxisLabelSet;
import mx.core.DragSource;
import mx.charts.series.LineSeries;
import mx.events.DragEvent;
import mx.managers.DragManager;
import mx.collections.ArrayCollection;
[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection( [
{ Month: "Jan", Profit: 2000, Expenses: 1500, Sales:3550},
{ Month: "Feb", Profit: 1000, Expenses: 200, Sales:1200},
{ Month: "Mar", Profit: 1500, Expenses: 500, Sales:2000},
{ Month: "Apr", Profit: 1800, Expenses: 1200, Sales:3000},
{ Month: "May", Profit: 2400, Expenses: 575, Sales:2975}]);
// Initializes the drag-and-drop operation.初始化拖曳操作
private function mouseMoveHandler(event:MouseEvent):void {
event.preventDefault();
// Get the drag initiator component from the event object.
從event對象中取得拖曳初始化組件
var dragInitiator:LineSeries = LineSeries(event.currentTarget);
// if a selectedItem isn't set, ignore the mouse event
//如果沒有選擇任何元素，則忽略鼠標事件
if(dragInitiator.selectedItem == null) return;
// Create a DragSource object.
//創建一個DragSource對象
var ds:DragSource = new DragSource();
// Call the DragManager doDrag() method to start the drag.
//調用DragManager的doDrag（）方法來啟動拖動事件
DragManager.doDrag(dragInitiator, ds, event);
}
//mouseMoveHandler()為每個可選的線狀圖對象處理鼠標運動。拖動鼠標激活DragManager.doDrag()方法，
//該方法包含dragInitiator（在本例中就是線狀圖對象），拖動鼠標時將其傳遞給doDrag()方法。
private function setDragDropData(event:DragEvent):void {
var index:Number = (event.dragInitiator as LineChart).selectedChartItem.index;
var newYVal:Number = (event.dragInitiator as LineChart).mouseY;
var selectedSeries:LineSeries = (event.dragInitiator as LineChart).selectedChartItem.element as LineSeries;
var editedObj:Object = (event.dragInitiator as LineChart).dataProvider.getItemAt(index);
var als:AxisLabelSet = linechart.verticalAxis.getLabelEstimate();
var maxValue:Number = als.labels[als.labels.length - 1].value;
/*橫坐標和縱坐標都實現了IAxis 接口，它的getLabelEstimate 方法返回一個AxisLabelSet 對象。

AxisLabelSet 對象定義一個類型數組的標簽屬性，該屬性包含數軸上所有標簽。在這種情況下，最后一個數值用于定義圖表中最大的數值。因為用戶在每一次改變數值的時候最后一個數值都可以改變，每次讀取用戶拖曳出來的新數值是非常重要的，因為這樣才能確定圖表的正確的最大值，以便計算用戶要得到的數值。*/
if(selectedSeries.yField == "Expenses") {
var yPos:Number = ((linechart.height - newYVal) / linechart.height);
var newVal:Number = maxValue * yPos;
editedObj.Expenses = newVal;
}
else
{
var yPos:Number = ((linechart.height - newYVal) / linechart.height);
var newVal:Number = maxValue * yPos;
editedObj.Sales = newVal;
}
ditedObj.Profit = editedObj.Sales - editedObj.Expenses;
(event.dragInitiator as LineChart).clearSelection();
/*為父圖表調用clearSelection()方法是很重要的，這樣可以確定圖表的選區沒有被鼠標事件干
預。線狀圖的數據提供器被更新，使得圖表被重繪。*/

// force the chart to redraw - note if we weren't using a simple
array collection
// the data object in the array could dispatch an event,
forcing the binding to update
(event.dragInitiator as LineChart).dataProvider =
expensesAC;
}

]]>
</mx:Script>
<mx:Panel title="LineChart and AreaChart Controls Example"
height="100%" width="100%" layout="horizontal">
<mx:LineChart id="linechart" height="100%" width="100%"
paddingLeft="5" paddingRight="5"
dragDrop="setDragDropData(event)"
showDataTips="true" dataProvider="{expensesAC}"
selectionMode="single" dragEnabled="true"
dropEnabled="true">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month"/>
</mx:horizontalAxis>
<!--每個線狀圖的CircleItemRenderer 用于使圖表在selected 屬性為true 的情況下可拖曳。在本
例中，因為線狀圖代表盈利，是由代表開支和銷售的組件來決定的，所以盈利的selected 屬
性就要設置為false。-->
<mx:series>
<mx:LineSeries selectable="false" id="profitSeries"
yField="Profit" form="curve" displayName="Profit"
itemRenderer="mx.charts.renderers.CircleItem
Renderer"/>
<mx:LineSeries mouseMove="mouseMoveHandler(event)"
yField="Expenses" form="curve"
displayName="Expenses" selectable="true"
itemRenderer="mx.charts.renderers.CircleItemRenderer"/>
<mx:LineSeries mouseMove="mouseMoveHandler(event)"
yField="Sales" form="curve" displayName="Sales"
selectable="true" itemRenderer="mx.charts.
renderers.CircleItemRenderer"/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{linechart}"/>
</mx:Panel>
</mx:Application>