Question

我正在尝试在弹性图表上旋转类别标签，但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>

Answer 1

我将回答类似的问题https://stackoverflow.com/a/9129992/892191

使labelRotation工作的关键是嵌入字体。 Flex 4.6上有一篇很好的文章here

一个简单的代码示例是将样式添加到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>

Answer 2

好的，在搜索了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，但这可能会非常复杂，并且可以减少工作量与外观的收益。

mx.chart.AxisRenderer labelRotation无效

2 个答案: