【问题标题】:How to align vertical axis zero for multiple vertical axis chart如何为多个垂直轴图表对齐垂直轴零
【发布时间】:2011-03-22 10:43:58
【问题描述】:

基于此 Adob​​e 多轴图表示例: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"
    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>

【问题讨论】:

    标签: apache-flex charts alignment


    【解决方案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 有默认的垂直轴,而且似乎它的最大值和最小值是根据第一组数据计算的。计算的最大值和最小值没有被默认图表垂直轴的最小值和最大值属性覆盖。这导致错误的原点线放置。

    我猜在现实世界中你会动态地获取数据。在这种情况下,您必须即时计算最小值和最大值。

    【讨论】:

    • 谢谢,这部分解决了这个问题。但是由于某种原因出现了黑色的水平线......
    • 请说得具体点,你的黑线是什么意思?
    • 我想我知道“深色水平线”是什么。它似乎是图表原点线。它确实被放置在错误的位置。在解决了这个问题之后,我修改了一个示例。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-30
    • 2021-09-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多