如何根据需要控制饼图中图例的显示？

Question

在我的 Flex 应用程序中，我有一个饼图，它显示了公司中不同人所持股份的分布情况。

[Bindable]
        private var shareData:ArrayCollection;


    <mx:PieChart id="sharesDistribution" dataProvider="{shareData}" showDataTips="true"                              
            height="100%" width="70%"  left="0" right="0" bottom="0" top="0" >
        <mx:series>
            <mx:PieSeries field="share" nameField="name" labelPosition="insideWithCallout" />
        </mx:series>
</mx:PieChart>

<mx:Legend right="0" width="30%" direction="horizontal" dataProvider="{sharesDistribution}" />

根据上面的代码，饼图正确显示。我在这里面临的问题是......

有时，任何成员都可能拥有 0% 或 0% 的股份。在该实例中，饼图仅显示拥有股份的人。比如说 A、B、C 和 D 持有一家公司的股份。在某一时刻，C 不持有任何股份，饼图只显示 A、B 和 D 持有的股份。

但是，图例显示的人 C 的颜色实际上看起来并不正确，因为饼图没有显示这样的人。希望你能理解我的观点并同意我的观点。

我希望人物 C 不显示在图例中。

我该怎么做？请分享您的答案。

Answer 1

我认为饼图组件总是显示数据源中的所有项目。

我会处理 ArrayList 的 change Event 并定义另一个 List，它不包含任何 null 元素。

类似这样的东西（这里是working example）：

<?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" creationComplete="init(event)">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.CollectionEvent;
        import mx.events.FlexEvent;

        [Bindable]private var shareData:ArrayCollection = new ArrayCollection(
            [
                {name: "A", share: 20}, 
                {name: "B", share: 50},
                {name: "C", share: 0},
                {name: "D", share: 10}
            ]);

        [Bindable]private var shareDataDP:ArrayCollection = new ArrayCollection();


        protected function init(event:FlexEvent):void
        {
            shareData.addEventListener(CollectionEvent.COLLECTION_CHANGE, onCollectionChange);
            updateDP();
        }

        private function onCollectionChange(evt:CollectionEvent):void
        {
            updateDP();
        }

        private function updateDP():void
        {
            shareDataDP.removeAll();

            for each (var item:Object in shareData)
            {
                if (item.share != 0)
                {
                    shareDataDP.addItem(item);
                }
            }
        }

    ]]>
</fx:Script>

<s:VGroup left="20" top="20">

    <s:HGroup verticalAlign="bottom">
        <s:Label text="Value for C: "/>
        <s:TextInput id="valueC" text="0" width="40" restrict="0-9"/>
        <s:Button label="Change" click="{shareData.getItemAt(2).share = int(valueC.text); shareData.refresh()}"/>
    </s:HGroup>

    <s:HGroup>

        <s:Group width="300" height="300">

            <mx:PieChart id="sharesDistribution" dataProvider="{shareData}" showDataTips="true"                              
                         height="100%" width="70%"  left="0" right="0" bottom="0" top="0">
                <mx:series>
                    <mx:PieSeries field="share" nameField="name" labelPosition="insideWithCallout" />
                </mx:series>
            </mx:PieChart>

            <mx:Legend right="0" width="30%" direction="horizontal" dataProvider="{sharesDistribution}" />

        </s:Group>

        <s:Group width="300" height="300">

            <mx:PieChart id="sharesDistributionDP" dataProvider="{shareDataDP}" showDataTips="true"                              
                         height="100%" width="70%"  left="0" right="0" bottom="0" top="0">
                <mx:series>
                    <mx:PieSeries field="share" nameField="name" labelPosition="insideWithCallout" />
                </mx:series>
            </mx:PieChart>

            <mx:Legend right="0" width="30%" direction="horizontal" dataProvider="{sharesDistributionDP}" />

        </s:Group>
    </s:HGroup>
</s:VGroup>
</s:Application>