mx.chart.AxisRenderer labelRotation не работает - PullRequest
Новая
       22

mx.chart.AxisRenderer labelRotation не работает

1 голос
/ 21 октября 2011

Я пытаюсь повернуть метки категорий на своей гибкой диаграмме, но свойство labelRotation, похоже, не работает. Судя по примерам и результатам, я не могу понять, что я делаю неправильно. 

<mx:BarChart id="barchartX" left="40" right="40" bottom="40" paddingBottom="40"
         dataProvider="{chartDataObj.series}" showDataTips="false"
         itemClick="editItem_clickHandler(event)" includeIn="BAR" visible="true">
    <mx:verticalAxis>
         <mx:CategoryAxis id="vaxis" categoryField="title" 
                          title="click here to rename this axis" /> 
    </mx:verticalAxis>

    <mx:verticalAxisRenderers>
         <mx:AxisRenderer axis="{vaxis}" labelRotation="45"
                          click="axis_clickHandler(event)"/>
    </mx:verticalAxisRenderers>

    <mx:horizontalAxis>
        <mx:LinearAxis id="haxis" title="click here to rename this axis" />
    </mx:horizontalAxis>

    <mx:horizontalAxisRenderers>
        <mx:AxisRenderer axis="{haxis}" labelRotation="0"       
                             click="axis_clickHandler(event)"/>
    </mx:horizontalAxisRenderers>

    <mx:series>
        <mx:BarSeries labelPosition="none" yField="title" xField="value" 
                          fills="{chartDataObj.colors}"/>
    </mx:series>

Ответы [ 2 ]

1 голос
/ 03 февраля 2012

Я включаю свой ответ на аналогичный вопрос, https://stackoverflow.com/a/9129992/892191

Ключом к работе labelRotation является встраивание шрифтов. Хорошая статья о Flex 4.6 здесь

Простой пример кода: добавить стиль в файл mxml, 

<fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";

        @font-face{
            src: local("Arial");
            fontFamily: Arial;
            embedAsCFF: false;
        }

        mx|ColumnChart {
            fontFamily: Arial;
            fontSize: 10;
        }
</fx:Style>
0 голосов
/ 24 октября 2011

Хорошо, после поиска по фактическому коду AxisRenderer я пришел к следующему: 

<fx:Script>
     [Embed(source='../assets/verdana.ttf', 
            fontName='verdanaFontMX', 
            mimeType='application/x-font',
            embedAsCFF='false')] 
     private var font2:Class;
</fx:Script>    

<mx:verticalAxisRenderers>
            <mx:AxisRenderer axis="{vaxis}" labelRotation="90"
                                 labelClass="mx.controls.Label" 
                                 fontFamily="verdanaFontMX" canStagger="false"
                                 click="axis_clickHandler(event)"/>
    </mx:verticalAxisRenderers>

При использовании CategoryAxis для диаграммы MX в мобильном проекте метки категорий отображаются как метки Spark, но остальные метки оси отображаются как метки MX.Поворот метки работает, но выдается предупреждение, и категория отображается вместо шрифта устройства.Чтобы это исправить, используйте вместо этого класс MX Label (labelClass = "mx.controls.Label").Я знаю, что он не отображается быстро, как метка Spark, но он будет отображаться в шрифте, который вы хотите.

Далее, если у вас есть очень длинная метка категории, каким-то образом происходит деление на ноль, и все происходит сбой.Чтобы избежать этого, установите canStagger = "false" или canDropLabels = "true".Это позволяет избежать ошибок измерения.Однако, если установлен fontSize, а метка оказывается слишком большой, автоматическое изменение размера снова происходит сбой.Итак, я думаю, что самое простое решение было бы сделать ярлыки категорий короткими.

Существует также возможность обрезания текста, как показано здесь: http://help.adobe.com/en_US/flex/using/WS02f7d8d4857b1677355f601a126b41ed60e-8000.html или, с помощью пользовательского labelRenderer, но это может быть очень сложным и может привести к снижению отдачи от объема работы по сравнению сблаго на внешний вид.

...