使Flex Plot Chart项目切换为显示/隐藏项目的标签

时间:2012-12-26 09:19:29

标签: flex charts toggle labels

我根据先前计算的数据(X,Y)制作了一个生成绘图表的应用程序。在绘制图表上的数据之后,当用户点击点时,我尝试使项目(点)显示标签(通过addChild一个外部自定义标签组件)(例如:如果用户点击图表项,相应的ID号将显示在点旁边。

虽然一切正常,但我无法切换项目(例如:如果已点击一个点并且标签ID可见,则在下一次点击我要隐藏的同一个点(removeChild)标签对应于该项目的组件)...附上我迄今所做的简单示例代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="417" height="468" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
    <mx:Script><![CDATA[
    import mx.charts.events.ChartItemEvent;
    import mx.charts.HitData;
     import mx.collections.ArrayCollection;

     [Bindable]
     public var ARR:ArrayCollection = new ArrayCollection([
        {ID:1, Y:2000, X:1500},
        {ID:2, Y:1000, X:200},
        {ID:3, Y:1500, X:500},
        {ID:4, Y:500, X:300},
        {ID:5, Y:1000, X:450},
        {ID:6, Y:2000, X:500}
     ]);

     private function labels_plot1(plot:String, dotIndex:int, labelID:String):void {
            var ID_lab:ID_label = new ID_label();
            if(this[plot].series[0] == ID_lab.parent){
                this[plot].series[0].removeChild(ID_lab);
            }else{
                this[plot].series[0].addChild(ID_lab);
                ID_lab.x = this[plot].series[0].getChildAt(dotIndex).x + 8;
                ID_lab.y = this[plot].series[0].getChildAt(dotIndex).y + 1.2;
                ID_lab.ID_txt.htmlText = "<B>" + labelID  + "</B>";
            }
     }

     private function dotClickEvent(event:ChartItemEvent):void{
        labels_plot1(event.currentTarget.id, event.hitData.chartItem.index, event.hitData.item.ID);
     }

  ]]></mx:Script>
     <mx:PlotChart id="myChart" dataProvider="{ARR}" itemClick="dotClickEvent(event)">
        <mx:series>
           <mx:PlotSeries id="pl"
                xField="X"
                yField="Y"
                displayName="Plot 1"
            />
        </mx:series>
        <mx:annotationElements>
            <mx:CartesianDataCanvas id="canvas" includeInRanges="true"/>
        </mx:annotationElements>
     </mx:PlotChart>
</mx:WindowedApplication>

我几乎尝试了一切,但没有成功......如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

您的功能中的第一次检查可能不是真的,这就是为什么不删除孩子的原因。首先,在您不知道是否需要新标签之前,不应该创建新标签。

在您的情况下,我将使用组件的属性名称来保存dotIndex。 dotIndex是uniq,因此您可以使用函数getChildByName(dotIndex.toString())随时检查标签是否存在。

我也更喜欢将新标签直接添加到单独的容器中,或者在我们的情况下添加到应用程序本身。您可以尝试这样做:

        private function labels_plot1(plot:String, dotIndex:int, labelID:String):void {

            var dispObj:DisplayObject = this.getChildByName(dotIndex.toString());

            if (dispObj != null)
            {
                this.removeChild(dispObj);
            }
            else
            {
                var ID_lab:Label = new Label();

                ID_lab.x = this[plot].series[0].getChildAt(dotIndex).x + 8 + 60;
                ID_lab.y = this[plot].series[0].getChildAt(dotIndex).y + 1.2 + 4;

                ID_lab.text = labelID;
                ID_lab.name = dotIndex.toString();
                this.addChild(ID_lab);
            }
        }

我没有你的组件ID_Label,所以我在这里使用了普通的标签。