如何在网格中将多个部分（例如，p1，p2，p3）组成的标签格式化（对齐）？

图表的数据提供者包含一系列设施对象。一种设施对象由几个部分组成，指示安装ID，设施号和设施名称如下所示：如何在网格中将多个部分（例如，p1，p2，p3）组成的标签格式化（对齐）？

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

我有描绘每建筑能源消耗的图表。图表中可能有几个不同地区的建筑物。我想要：

将同一地区的所有建筑物组合在一起。
仅在启动新组时才包含区域标签。
对齐标签部分在网格中，使得：
- 所有区域的标签被留下彼此对准。
- 所有建筑物ID都彼此对齐。
- 建筑物名称相互对齐。

下面的图像中示出它的所希望的输出的一个例子。

Desired Formatting

使用施加到分类轴我可以连接的值成一个字符串自定义标签的功能。通过对阵列区域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; 
}

但是，这会生成一个单一的字符串，它是右对齐的（如预期的那样）。我想要实现的是如上所述的三个属性的左，右，左对齐。

我试图连接标签函数中的属性值和'@'作为分隔符。我的想法是，我可以创建自定义标签渲染器，将该分隔符上的字符串拆分，并根据需要执行对齐。但是，我似乎无法更改自定义标签渲染器中标签的对齐方式。

如何在Flex图表中像时尚一样的网格对齐多部分标签？

来源

2011-11-22 Ryan Taylor

我不知道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>

来源

2011-12-01 14:49:02 jburgess

谢谢！尽管我需要使用而不是，但这使我朝着正确的方向发展，因为标签渲染器需要实现IDataRenderer，以便我可以设置标签的数据。为你实现这个。如果没有您的帮助，我不会在最终解决方案中看到：https：//gist.github.com/1410908 –

如何在网格中将多个部分（例如，p1，p2，p3）组成的标签格式化（对齐）？

回答

相关问题