如何对齐垂直轴零在此基础上的Adobe多轴图表例如多个垂直轴图表

如何对齐垂直轴零在此基础上的Adobe多轴图表例如多个垂直轴图表

问题描述:

http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_12.html如何对齐垂直轴零在此基础上的Adobe多轴图表例如多个垂直轴图表

然后,我改变了一些数据值来负,我成了轴不再一致。

enter image description here

有谁知道如何使垂直轴?这是另一个Adobe bug还是有一些对齐轴的属性?谢谢

<?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> 

您可以使用Linear轴的最小和最大属性。

变形例(编辑):

<?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> 

。注意,我立轴移动对第一系列数据来将ColumnChart标签。我正在玩弄原始线放置问题。然后它激怒了我,ColumnChart忽略了垂直轴,看起来,它的最大值和最小值是根据第一组数据计算出来的。计算最大值和最小值未被默认图表垂直轴的最小和最大属性覆盖。这导致错误的原点线位置。

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

+0

谢谢,这部分解决了这个问题。但是由于某种原因,存在黑暗的水平线...... – zinovii 2011-03-22 12:07:38

+0

请更具体一点,你的意思是什么黑线? – 2011-03-23 06:23:45

+0

我想我知道“黑色水平线”是什么。它似乎是图表的起源线。它确实被置于错误的位置。在玩过这个问题之后,我修改了一个例子。 – 2011-03-23 09:08:48