여러 부분으로 구성된 라벨 (예 : p1, p2, p3)을 그리드 방식으로 어떻게 포맷 (정렬)합니까?

Question

차트의 데이터 공급자에는 기능 개체 배열이 포함되어 있습니다. 나는 건물 당 에너지 소비를 묘사 차트를

{ 
    installationID:1000, 
    facilityNum:529, 
    facilityName:"Building1" 
} 

: 아래 그림과 같이 시설 객체는 설치 ID, 시설 번호 및 시설 이름을 나타내는 여러 부분으로 구성되어있다. 여러 다른 지역의 도표가 표시된 건물이있을 수 있습니다. 내가 원하는 :

1. 같은 지역의 모든 건물을 함께 그룹으로 묶으십시오.
2. 새 그룹을 시작할 때만 지역 레이블을 포함하십시오.
3. 그리드에 라벨 부분을 맞 춥니 다하도록 모든 지역 라벨이 서로 왼쪽 정렬되어
   • .
   • 모든 건물 ID가 서로 올바르게 정렬됩니다.
   • 건물 이름은 서로 왼쪽 정렬됩니다.

은 아래 그림 원하는 출력의 예.

I 하나의 문자열로 값을 연결할 수있는 범주 축에 가해지는 맞춤 라벨 기능 사용. 배열 지역 ID를 정렬하면 새로운 그룹이 시작되지 않는 한 지역 ID를 제거 (추가하지 않음) 할 수도 있습니다. 사용자 정의 레이블 기능이 여기에 표시됩니다.

private var nextCategoryIndex:int = 1; 

public function facilitiesLabelFunction(categoryValue:Object, previousCategoryValue:Object, axis:CategoryAxis, categoryItem:Object):String 
{ 
    var nextInstallationID:String = ""; 
    var facilitiesColl:ArrayCollection = ArrayCollection(axis.dataProvider); 

    // if this is not the last facility to be processed get the next installation ID 
    if (nextCategoryIndex <= facilitiesColl.length - 1) { 
     nextInstallationID = facilitiesColl[nextCategoryIndex].installationID; 
    } 

    var label:String = categoryItem.facilityNum + " - " + categoryItem.facilityName; 

    // preppend the installation id when we start listing facilities from a different installation 
    if (nextInstallationID != categoryItem.installationID) { 
     label = categoryItem.installationID + " " + label; 
    } 

    nextCategoryIndex++; 
    return label; 
} 

그러나 이것은 (예상대로) 오른쪽 정렬 된 단일 문자열을 생성합니다. 내가 원하는 것은 위에 설명 된 세 가지 속성의 왼쪽, 오른쪽, 왼쪽 정렬입니다.

label 함수의 속성 값을 '@'로 구분 기호로 연결하려고했습니다. 생각해 보면이 구분 기호에 문자열을 분할하고 필요에 따라 맞춤을 수행하는 맞춤 라벨 렌더러를 만들 수있었습니다. 그러나 사용자 정의 레이블 렌더러 내에서 레이블의 정렬을 변경할 수있는 것 같지 않습니다.

Flex 차트에서 여러 파트 레이블을 격자 모양으로 정렬하려면 어떻게해야합니까?

Answer 1

Flex에서 여러 부분으로 된 라벨 기능을 알지 못합니다. 그러나 원하는대로 여러 라벨 (또는 다른 구성 요소)을 포함하고 정렬하는 항목 렌더러를 만들 수 있습니다. 이 같은 것이 작동해야합니다 (완료되지 않았거나 테스트되지는 않았지만 올바른 방향으로 안내해야 함).

<mx:BarChart> 
    <mx:AxisRenderer> 
     <mx:labelRenderer> 
      <fx:Component> 
       <s:Group width="300"> 
        <s:Label left="0" text="{data.leftvalue}" /> 
        <s:Label horizontalCenter="0" text="{data.centervalue}" /> 
        <s:Label left="right" text="{data.rightvalue}" /> 
       </s:Group> 
      </fx:Component> 
     </mx:labelRenderer> 
    </mx:AxisRenderer> 
</mx:BarChart>