0

我需要将数据点拖到 LineSeries 中的新位置。当用户使用鼠标指针拖动数据点时，它应该动态完成。

我已经尝试过以下选项：dragMoveEnabled="true" dragEnabled="true" dropEnabled="true" 在 flex 的 LineChart 控件中，如下所示。

<mx:LineChart id="linechart1" selectionMode="multiple" showAllDataTips="true" showDataTipTargets="true" dragMoveEnabled="true" dragEnabled="true" dropEnabled="true">

但它不起作用。

任何人都可以告诉如何实现这一目标。

谢谢...

4

1 回答 1

1

我认为没有标准的 Flex API 可以解决这个问题。您可以通过控制用户与数据点的交互来以另一种方式实现它。

这是我的解决方案和工作示例。

用户可以获取任何数据点并上下拖动。可以使用您拥有的任何系列的 localToDate 方法通过转换鼠标坐标来计算新位置。

重要的一点是要考虑图表位置和绘图实际开始之间的距离。为此，我使用常量 CHART_GUTTERTOP。

编码：

<?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.LineSeriesItem;
        import mx.collections.ArrayCollection;

        [Bindable]public var expenses:ArrayCollection = new ArrayCollection([
            {Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
            {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
            {Month:"Mar", Profit:2200, Expenses:800, Amount:300},
            {Month:"Apr", Profit:1800, Expenses:400, Amount:400}
        ]);

        private var currentId:int = -1;
        private var currentYField:String;
        private const CHART_GUTTERTOP:int = 20;

        protected function myChart_itemMouseDownHandler(event:ChartItemEvent):void
        {
            if (event.hitData != null)
            {
                var chartItem:LineSeriesItem = event.hitData.chartItem as LineSeriesItem;
                currentId = chartItem.index;
                currentYField = (chartItem.element as LineSeries).yField;
            }
        }

        protected function myChart_itemMouseUpHandler(event:ChartItemEvent):void
        {
            if (currentId != -1)
            {
                var p:Point = new Point(myChart.mouseX, myChart.mouseY  - CHART_GUTTERTOP);
                var d:Array = series1.localToData(p);

                expenses.getItemAt(currentId)[currentYField] = d[1];
                myChart.dataProvider = expenses;
                currentId = -1;
            }
        }
    ]]>
</fx:Script>

<s:Panel x="20" y="20">
    <s:VGroup>
        <mx:LineChart 
            id="myChart" 
            gutterTop="{CHART_GUTTERTOP}"
            dataProvider="{expenses}" 
            showDataTips="true"
            itemMouseDown="myChart_itemMouseDownHandler(event)" 
            itemMouseUp="myChart_itemMouseUpHandler(event)">

            <mx:horizontalAxis>
                <mx:CategoryAxis 
                    dataProvider="{expenses}" 
                    categoryField="Month"/>
            </mx:horizontalAxis>

            <mx:series>
                <mx:LineSeries id="series1" 
                    yField="Profit" 
                    displayName="Profit"/>
                <mx:LineSeries 
                    yField="Expenses" 
                    displayName="Expenses"/>
            </mx:series>
        </mx:LineChart>

        <mx:Legend dataProvider="{myChart}"/>
    </s:VGroup>
</s:Panel>
</s:Application>
于 2013-04-12T22:12:32.047 回答