Apache flex 线系列上的绘图仪/折线图垂直线性渐变

我想构建一个折线图组件，其中线条的颜色表示该值有多高。我应该能够做到这一点，只需使用梯度笔划（见下文），但由于某种原因，梯度只从左到右，“角度”属性被忽略。我怎么能这样做

    <mx:PlotChart id="bpChart" width="514" height="144" dataProvider="{measurementsXLC}"   >
    <mx:series>
        <mx:LineSeries id="bpSeries" displayName="Series 1" yField="value" xField="date" showDataEffect="fade" stroke="{lstroke}">
            <mx:lineStroke>
                <mx:LinearGradientStroke angle="270.0" weight="3"  scaleMode="vertical"  >
                    <mx:entries>
                        <mx:GradientEntry color="#ff0000" ratio="0.0"/>
                        <mx:GradientEntry color="#00ff00" ratio="1.0"/>                         
                    </mx:entries>
                </mx:LinearGradientStroke>
            </mx:lineStroke>
            <mx:itemRenderer>
                <mx:Component>
                    <mx:CircleItemRenderer >

                    </mx:CircleItemRenderer>
                </mx:Component>                 
            </mx:itemRenderer>
        </mx:LineSeries>
        <mx:LineSeries id="bpSeries2" displayName="Series 1" yField="value2" xField="date" showDataEffect="fade"  />
    </mx:series>
    <mx:horizontalAxis>
        <mx:DateTimeAxis id="dateAxis" dataUnits="milliseconds" labelUnits="days" />
    </mx:horizontalAxis>
    <mx:verticalAxis>
        <mx:LinearAxis baseAtZero="false" autoAdjust="true" interval="5" />

    </mx:verticalAxis>
</mx:PlotChart>

---

我希望您需要为折线系列图表创建自定义lineSegmentRenderer。当前lineSegmentRenderer是阴影线渲染器。在不亲自解决整个问题的情况下，我将基于ShadowLineRenderer创建一个新类，并更改updateDisplayList方法以完全按照需要绘制线。然后更改线系列的lineSegmentRenderer属性以使用此渲染器

如果有帮助的话，我必须做一件非常类似的事情，但要使用Area渲染器。区域渐变需要基于总图表，而不是为显示的任何区域的完整渐变上色（例如，使用常规区域渲染器，如果该区域仅覆盖y轴的前20%，则仍然使用完整渐变，这是我的项目不希望使用的功能）。以下是我的问题解决方案，我创建了自己的AreaRenderer并更新了updateDisplayList方法：

override protected function updateDisplayList(unscaledWidth:Number,
                                                  unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        var fill:IFill = GraphicsUtilities.fillFromStyle(getStyle("areaFill"));
        var stroke:IStroke = getStyle("areaStroke");
        var form:String = getStyle("form");

        var g:Graphics = graphics;
        g.clear();

        if (!_area)
            return;

        var boundary:Array /* of Object */ = _area.filteredCache;
        var n:int = boundary.length;
        if (n <= 1)
            return;

        var xMin:Number;
        var xMax:Number = xMin = boundary[0].x;
        var yMin:Number;
        var yMax:Number = yMin = boundary[0].y;

        var i:int;
        var v:Object;

        for (i = 0; i < n; i++)
        {
            v = boundary[i];

            xMin = Math.min(xMin, v.x);
            yMin = Math.min(yMin, v.y);
            xMax = Math.max(xMax, v.x);
            yMax = Math.max(yMax, v.y);

            if (!isNaN(v.min))
            {
                yMin = Math.min(yMin, v.min);
                yMax = Math.max(yMax, v.min);
            }
        }

        if (fill)
            fill.begin(g, new Rectangle(0, 0, unscaledWidth, unscaledHeight));

        GraphicsUtilities.drawPolyLine(g, boundary, 0, n,
                                        "x", "y", stroke, form);

        g.lineStyle(0,0,0); 

        if(boundary[0].element.minField != null && boundary[0].element.minField != "")
        {
            g.lineTo(boundary[n - 1].x, boundary[n - 1].min);       

            GraphicsUtilities.drawPolyLine(g, boundary, n - 1, -1,
                                            "x", "min", noStroke, form, false);
        }
        else
        {
            g.lineTo(boundary[n - 1].x, _area.renderedBase);        
            g.lineTo(boundary[0].x, _area.renderedBase);
        }

        g.lineStyle(0, 0, 0);
        g.lineTo(boundary[0].x, boundary[0].y);

        g.endFill();
    }

覆盖受保护的函数updateDisplayList（unscaledWidth:Number，
无刻度高度：数字）：无效
{
super.updateDisplayList（unscaledWidth、unscaledHeight）；
var fill:IFill=GraphicsUtilities.fillFromStyle（getStyle（“areaFill”）；
变量笔划：IStroke=getStyle（“areaStroke”）；
变量形式：String=getStyle（“形式”）；
变量g：图形=图形；
g、 清除（）；
如果（！\u区域）
返回；
变量边界：对象的数组/=\u area.filteredCache；
变量n:int=边界长度；
如果（n在遇到相同的问题并使用上面James Hay的解释/示例后，我构建了自己的LineSegmentRenderer

基本上我想在我的折线图中有一个从上到下的渐变笔划。我也发现LinearGradientStroke的角度或更准确地说是旋转属性在LineSegmentRenderer中无效，所以我复制了ShadowLineRenderer并编辑了它的updateDisplayList方法（参见下面的代码）

在这个updateDisplayList方法中，LineSeries lineStroke属性被设置为LinearGradientStroke，因此我可以使用在“调用”//lineChart构建MXML模块中设置的笔划颜色项（其中还设置了笔划权重）

我发现创建自上而下渐变的关键部分是在定义lineGradientStyle时使用GradientBox。对于自上而下渐变，GradientBox旋转属性设置为PI/2（相当于90度）。很可能可以导出此旋转属性（使用度到弧度的转换）从笔划旋转属性（可在LineSeries lineStroke属性中设置），这样可以避免在此渲染器中硬编码旋转属性，而是在使用此自定义渲染器时使其成为可调参数

见代码：

        override protected function updateDisplayList(unscaledWidth:Number,
                                                  unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        var stroke:LinearGradientStroke = getStyle("lineStroke");
        var form:String = getStyle("form");
        var gradientBoxMatrix:Matrix = new Matrix();
        gradientBoxMatrix.createGradientBox(unscaledWidth,0.9*(unscaledHeight),Math.PI/2,0,-0.05*(unscaledHeight));
        graphics.clear();
        graphics.lineStyle(stroke.weight,0);

        graphics.lineGradientStyle(GradientType.LINEAR,[stroke.entries[0].color,stroke.entries[1].color],[1,1],[0,255],gradientBoxMatrix);

        graphics.moveTo(_lineSegment.items[_lineSegment.start].x,_lineSegment.items[_lineSegment.start].y);
        graphics.lineTo(_lineSegment.items[_lineSegment.end].x,_lineSegment.items[_lineSegment.end].y);
    }