PlotChart/LineChart 直线系列上的垂直线性渐变

Question

我想构建一个 LineChart 组件，其中线条的颜色表示值的高低。我应该能够只使用渐变笔划（见下文）进行此购买，但由于某种原因，渐变仅从左到右，并且“角度”属性被忽略。我怎么能这样做？

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

Answer 1

在遇到同样的问题并使用上面 James Hay 的解释/示例后，我构建了自己的 LineSegmentRenderer。

基本上我想在我的折线图中有一个从上到下的渐变笔触。我也发现LineSegmentRenderer中LinearGradientStroke的角度或更准确的旋转属性无效，所以我复制了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);
    }

Answer 2

我希望您需要为折线图创建自定义 lineSegmentRenderer。当前 lineSegmentRenderer 是一个 ShadowLineRenderer。如果我自己没有真正解决整个问题，我会创建一个基于 ShadowLineRenderer 的新类并更改 updateDisplayList 方法以完全按照您的需要绘制线条。然后更改线条系列的 lineSegmentRenderer 属性以使用此渲染器。

如果它有帮助，我必须做一个非常相似的事情，但使用 AreaRenderer。区域渐变需要基于总图表，而不是为显示的任何区域着色完整渐变（例如，使用常规区域渲染器，如果区域仅覆盖 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();
    }