Как вы форматируете (выравниваете) метки, состоящие из нескольких частей (например, p1, p2, p3), в виде сетки?

Поставщик данных для диаграммы содержит массив объектов обслуживания. Объект обслуживания состоит из нескольких частей, указывающих идентификатор установки, номер объекта и название объекта, как показано ниже:

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

У меня есть диаграмма, показывающая потребление энергии на одно здание. На схеме могут быть изображены здания из нескольких разных регионов. Я хочу:

  1. Сгруппируйте все здания в одном регионе вместе.
  2. Включайте метку региона только тогда, когда она запускает новую группу.
  3. Align the label parts in a grid such that:
    • All region labels are left aligned with each other.
    • Все идентификаторы зданий совпадают друг с другом по правому краю.
    • Названия зданий выровнены по левому краю.

Пример желаемого результата показан на изображении ниже.

Желаемое форматирование

Используя функцию настраиваемой метки, примененную к оси категорий, я могу объединить значения в одну строку. Сортировка идентификатора региона массива, и я могу даже удалить (не добавить) идентификатор региона, если только не запускается новая группа. Здесь показана функция настраиваемого ярлыка.

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;
}

Однако это генерирует единственную строку, выровненную по правому краю (как и ожидалось). Я хочу добиться выравнивания трех свойств по левому, правому и левому краям, как описано выше.

Я попытался объединить значения свойств в функции метки с помощью символа «@» в качестве разделителя. Мысль заключалась в том, что я мог бы создать настраиваемое средство визуализации меток, которое разделило бы строку по этому разделителю и при необходимости выполняло бы выравнивание. Однако, похоже, я не могу изменить выравнивание метки в настраиваемом средстве визуализации меток.

Как я могу выровнять составные метки в сетке, как на гибкой диаграмме?


charts actionscript-3 apache-flex flex4.5 flash-builder4.5
person Ryan Taylor    schedule 22.11.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я не знаю о каких-либо возможностях создания меток, состоящих из нескольких частей, в 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>
person jburgess    schedule 01.12.2011
comment
Спасибо! Это привело меня в правильное направление, хотя мне нужно было использовать ‹mx: grid› вместо ‹s: group›, потому что средство визуализации меток должно реализовать IDataRenderer, чтобы я мог установить данные для метки. ‹Mx: grid› реализует это за вас. Окончательное решение, к которому я бы не пришел без вашей помощи, см .: gist.github.com/1410908 - person Ryan Taylor; 01.12.2011