具有多个Y轴的挠曲图表显示错误的水平原点

Question

我创建了一个包含多个Y轴的弹性图表。我希望它显示其中一个数据系列的原点。它显示了这条线，但却错了。

也许是因为我没有告诉GridLines哪个轴用作源？但是，我不确定是否有可能......

如果您知道如何在具有多个轴的图表上显示水平原点，请提供帮助。

这是一个重现我的问题的考试。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           xmlns:local="*" 
           height="450" 
           width="500" xmlns:components="components.*" xmlns:charts="components.charts.*">
<s:layout>
    <s:BasicLayout/>
</s:layout>

<fx:Declarations>
    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <fx:Array>
                <fx:Object name="R Winn"    slg="445" avg="0.300" />
                <fx:Object name="P Feliz"   slg="418" avg="-0.253" />
                <fx:Object name="O Vizquel" slg="316" avg="0.246" />
                <fx:Object name="B Molina"  slg="433" avg="-0.276" />
                <fx:Object name="R Durham"  slg="343" avg="0.218" />
            </fx:Array>
        </mx:source>
    </mx:ArrayCollection>       
</fx:Declarations>

<mx:ColumnChart 
             showDataTips="true"
             dataProvider="{arrColl}"
             width="100%"
             height="100%">

    <mx:backgroundElements>
        <mx:GridLines id="grid1"
                      gridDirection="both"
                      horizontalShowOrigin="true">
            <mx:horizontalOriginStroke>
                <s:SolidColorStroke color="red" weight="3" alpha="1" /> 
            </mx:horizontalOriginStroke>
        </mx:GridLines>
    </mx:backgroundElements>

    <mx:verticalAxisRenderers>
        <mx:AxisRenderer placement="left" axis="{axis1}" />
        <mx:AxisRenderer placement="right" axis="{axis2}" />
    </mx:verticalAxisRenderers>

    <mx:horizontalAxis>
        <mx:CategoryAxis categoryField="name"/>
    </mx:horizontalAxis>

    <mx:series>
        <mx:ColumnSeries yField="avg" xField="name">
            <mx:verticalAxis>
                <mx:LinearAxis id="axis1"/>
            </mx:verticalAxis>
        </mx:ColumnSeries>
        <mx:LineSeries yField="slg" xField="name">
            <mx:verticalAxis>
                <mx:LinearAxis id="axis2"/>
            </mx:verticalAxis>
        </mx:LineSeries>
    </mx:series>
</mx:ColumnChart>

</s:Application>

Answer 1

您应该扩展GridLines类，例如AxisRendererGridLines，并覆盖updateDisplayList方法。找到下面的代码并删除/评论

if (horizontalShowOrigin && cache[0].y > 0 && cache[0].y < unscaledHeight) { originStroke=getStyle("horizontalOriginStroke"); originStroke.apply(g, null, null); g.moveTo(0, cache[0].y - sWidth / 2); g.lineTo($width, cache[0].y - sWidth / 2); }

并添加如下代码

var _verticalAxisRenderer:IAxisRenderer;

            if (!(CartesianChart(chart).verticalAxisRenderers) || CartesianChart(chart).verticalAxisRenderers.length == 0)
            {
                _verticalAxisRenderer=CartesianChart(chart).getLeftMostRenderer();
                if (!_verticalAxisRenderer)
                    _verticalAxisRenderer=CartesianChart(chart).getRightMostRenderer();
            }
            else
                verticalAxisRenderer=CartesianChart(chart).verticalAxisRenderers[0];


            var _axisHeight:Number=unscaledHeight;
            var _minor_ticks:Array=(verticalAxisRenderer as AxisRenderer).minorTicks;
            var _max:Number=((verticalAxisRenderer as AxisRenderer).axis as LinearAxis).maximum;
            var _min:Number=((verticalAxisRenderer as AxisRenderer).axis as LinearAxis).minimum;
            var _zero_radio:Number=_max / (_max - _min);

            var _index_mt:int;

            for (var k:int=0; k < _minor_ticks.length - 1; k++)
            {
                if (_zero_radio >= _minor_ticks[k] && _zero_radio <= _minor_ticks[k + 1])
                {
                    if ((_zero_radio - _minor_ticks[k]) <= (_minor_ticks[k + 1] - _zero_radio))
                    {
                        _index_mt=k;
                    }
                    else
                    {
                        _index_mt=k + 1;
                    }
                    break;
                }
            }
            originStroke=getStyle("horizontalOriginStroke");
            originStroke.apply(g, null, null);
            g.moveTo(0, _minor_ticks[_index_mt] * _axisHeight);
            g.lineTo($width, _minor_ticks[_index_mt] * _axisHeight);

我试过这个并运作良好。