16.11.创建一个可以编辑线状图

<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>