필요에 따라 원형 차트에서 범례 표시를 제어하는 ​​방법은 무엇입니까?

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 이벤트를 처리하고 null 요소를 전혀 포함하지 않는 다른 List를 정의합니다. 이 같은

뭔가 (여기가 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>