在Adobe Flex图表库中通过ActionScript动态创建轴； Adobe 错误？

Question

通过 MXML 创建多轴效果很好： http://livedocs.adobe.com/flex/ 3/html/help.html?content=charts_types_12.html

但是当我尝试动态创建水平和垂直轴时，我会得到额外的轴。我相信这是 Adob​​e 的错误。我该如何解决这种行为？谢谢。

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    minHeight="600"
    minWidth="955"
    creationComplete="application1_creationCompleteHandler(event)"
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            import mx.charts.AxisRenderer;
            import mx.charts.LinearAxis;
            import mx.charts.series.ColumnSeries;
            import mx.charts.series.LineSeries;
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            [Bindable] public var SMITH:ArrayCollection = new ArrayCollection([{date:"22-Aug-05", close:41.87},
                                                                               {date:"23-Aug-05", close:45.74},
                                                                               {date:"24-Aug-05", close:42.77},
                                                                               {date:"25-Aug-05", close:48.06},]);

            [Bindable] public var DECKER:ArrayCollection = new ArrayCollection([{date:"22-Aug-05", close:157.59},
                                                                                {date:"23-Aug-05", close:160.3},
                                                                                {date:"24-Aug-05", close:150.71},
                                                                                {date:"25-Aug-05", close:156.88},]);

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                // VERTICAL AXIS
                var verticalAxis1:LinearAxis = new LinearAxis();
                var verticalAxis2:LinearAxis = new LinearAxis();

                var verticalAxisRenderer1:AxisRenderer = new AxisRenderer();
                var verticalAxisRenderer2:AxisRenderer = new AxisRenderer();

                verticalAxisRenderer1.axis = verticalAxis1;
                verticalAxisRenderer2.axis = verticalAxis2;

                // HORIZONTAL AXIS

                var horizontalAxis:LinearAxis = new LinearAxis();
                var horizontalAxisRenderer:AxisRenderer = new AxisRenderer();
                horizontalAxisRenderer.axis = horizontalAxis;
                horizontalAxisRenderer.placement = "bottom";

                // SERIES

                var newSeries:Array = new Array();

                var columnSeries:ColumnSeries = new ColumnSeries();
                columnSeries.dataProvider = SMITH;
                columnSeries.yField = "close";
                columnSeries.verticalAxis = verticalAxis1;
                columnSeries.displayName = "SMITH";
                newSeries.push(columnSeries);

                var lineSeries:LineSeries = new LineSeries();
                lineSeries.dataProvider = DECKER;
                lineSeries.yField = "close";
                lineSeries.verticalAxis = verticalAxis2;
                lineSeries.displayName = "DECKER";
                newSeries.push(lineSeries);

                // CHART

                myChart.verticalAxisRenderers = [verticalAxisRenderer1, verticalAxisRenderer2];
                myChart.horizontalAxisRenderers = [horizontalAxisRenderer];
                myChart.series = newSeries;
            }
        ]]>
    </fx:Script>

    <mx:Panel title="Column Chart With Multiple Axes">
        <mx:ColumnChart id="myChart"
            showDataTips="true"/>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>
</s:Application>

Answer 1

好的，这就是技巧。不要在 MXML 中创建图表。就像使用渲染器一样，在 AS 代码中创建它。该图表在其 commitProperties() 方法中添加了默认的 AxisRenderer。因此，如果您在 mxml 中创建图表，它将在您在 AS 代码中添加轴渲染器之前进行提交（并因此添加轴渲染器）。只需将图表创建移入 AS 代码并移出 MXML：

var columnChart:ColumnChart = new ColumnChart();
addElement(columnChart)

祝你好运！

Answer 2

如果您仔细查看代码，您会发现您添加了两次轴渲染器。一次在数据系列上，另一次在图表本身上。

Answer 3

Horizo​​ntalAxisRenderer.axis = Horizo​​ntalAxis;

myChart.horizo​​ntalAxisRenderers = [horizo​​ntalAxisRenderer];

正如 Jax 所说，您要添加渲染器两次。尝试删除一个，垂直轴渲染器也需要放置。

Answer 4

我的 2 美分在这里......

我尝试通过 verticalAxisRenderer nulling 并在 verticalAxisRenderers 中设置 axisrenderers 来解决这个问题。这导致了一个问题，因为 verticalAxisRenderer setter 在访问 axis 对象之前不会检查值是否为 null。
我决定使用下面的代码。不优雅但有效..

if(myChart.verticalAxisRenderer)
{
    myChart.verticalAxisRenderer  = verticalAxisRenderer2
    myChart.verticalAxisRenderers = [verticalAxisRenderer1];
}
else
{
    myChart.verticalAxisRenderers = [verticalAxisRenderer2,verticalAxisRenderer1];
}