0

图表的数据提供者包含一组设施对象。设施对象由几个部分组成，分别表示安装 ID、设施编号和设施名称，如下所示：

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

我有一张图表，描述了每栋建筑的能源消耗。图表中可能显示了来自几个不同地区的建筑物。我想要：

  1. 将同一区域内的所有建筑物组合在一起。
  2. 仅在启动新组时才包含区域标签。
  3. 在网格中对齐标签部分，以便：
    • 所有区域标签都彼此左对齐。
    • 所有建筑物 ID 彼此右对齐。
    • 建筑物名称彼此左对齐。

下图中显示的所需输出示例。

所需的格式

使用应用于类别轴的自定义标签函数，我可以将值连接成一个字符串。通过对数组区域 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 Chart 中对齐网格中的多部分标签？

4

1 回答 1

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>
于 2011-12-01T14:49:02.647 回答