Как выровнять ноль по вертикальной оси для диаграммы с несколькими вертикальными осями

Question

На основе этого примера многоосевой диаграммы Adobe: http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_12.html

Затем я изменил некоторые значения данных на отрицательные, и моя ось больше не выравнивалась.

Кто-нибудь знает, как выровнять вертикальную ось? Это еще одна ошибка Adobe или есть какое-то свойство, которое выравнивает ось? Спасибо

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    minHeight="600"
    minWidth="955"
    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.collections.ArrayCollection;

            [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},]);
        ]]>
    </fx:Script>

    <mx:Panel title="Column Chart With Multiple Axes">
        <mx:ColumnChart id="myChart"
            showDataTips="true"
            type="overlaid">
            <mx:horizontalAxis>
                <mx:CategoryAxis id="h1"
                    categoryField="date"/>
            </mx:horizontalAxis>

            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer placement="bottom"
                    axis="{h1}"/>
            </mx:horizontalAxisRenderers>

            <mx:verticalAxisRenderers>
                <mx:AxisRenderer placement="left"
                    axis="{v1}"/>
                <mx:AxisRenderer placement="left"
                    axis="{v2}"/>
            </mx:verticalAxisRenderers>

            <mx:series>
                <mx:ColumnSeries id="cs1"
                    dataProvider="{SMITH}"
                    horizontalAxis="{h1}"
                    yField="close"
                    displayName="SMITH">
                    <mx:verticalAxis>
                        <mx:LinearAxis id="v1"/>
                    </mx:verticalAxis>
                </mx:ColumnSeries>
                <mx:LineSeries id="cs2"
                    dataProvider="{DECKER}"
                    horizontalAxis="{h1}"
                    yField="close"
                    displayName="DECKER">
                    <mx:verticalAxis>
                        <mx:LinearAxis id="v2"/>
                    </mx:verticalAxis>
                </mx:LineSeries>
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>
</s:Application>

Answer 1

Вы можете использовать минимальные и максимальные свойства линейной оси.

Модифицированный пример (отредактированный):

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    minHeight="600"
    minWidth="955"
    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.collections.ArrayCollection;

            [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},]);
        ]]>
    </fx:Script>

    <mx:Panel title="Column Chart With Multiple Axes">
        <mx:ColumnChart id="myChart"
                        showDataTips="true"
                        type="overlaid"
                        >

            <mx:horizontalAxis>
                <mx:CategoryAxis id="h1"
                                 categoryField="date"/>
            </mx:horizontalAxis>

            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer placement="bottom"
                                 axis="{h1}"/>
            </mx:horizontalAxisRenderers>

            <mx:verticalAxis>
                <mx:LinearAxis id="v1" minimum="-50" maximum="50" autoAdjust="false"/>
            </mx:verticalAxis>          

            <mx:verticalAxisRenderers>
                <mx:AxisRenderer placement="left"
                                 axis="{v1}"/>
                <mx:AxisRenderer placement="left"
                                 axis="{v2}"/>
            </mx:verticalAxisRenderers>

            <mx:series>
                <mx:ColumnSeries id="cs1"
                                 dataProvider="{SMITH}"
                                 horizontalAxis="{h1}"
                                 yField="close"
                                 displayName="SMITH"
                                 >
                </mx:ColumnSeries>
                <mx:LineSeries id="cs2"
                               dataProvider="{DECKER}"
                               horizontalAxis="{h1}"
                               yField="close"
                               displayName="DECKER"
                               >
                    <mx:verticalAxis >
                        <mx:LinearAxis id="v2" minimum="-180" maximum="180" autoAdjust="false"/>
                    </mx:verticalAxis>
                </mx:LineSeries>
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>
</s:Application>

Обратите внимание, что я переместил verticalAxis для первой серии данных в ColumnChartтег.Я играл с проблемой размещения линии происхождения.Затем меня поразило, что ColumnChart имеет вертикальную ось по умолчанию и кажется, что ее максимальные и минимальные значения вычисляются на основе первой серии данных.Вычисленные Максимум и Минимум не были переопределены минимальными и максимальными свойствами для вертикальной оси диаграммы по умолчанию.Это вызвало неправильное размещение исходной строки.

Полагаю, в реальном мире вы будете получать данные динамически.В этом случае вам придется вычислять минимумы и максимумы на лету.