Question

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

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

基本上我想在lineChart中有一个从上到下的渐变笔画。我也发现LinearGradientStroke的角度或更准确的旋转属性在LineSegmentRenderer中无效，因此我制作了ShadowLineRenderer的副本并编辑了它的updateDisplayList方法（参见下面的代码）。

在此updateDisplayList方法中，LineSeries lineStroke属性设置为LinearGradientStroke，因此我可以使用在'calling'/ 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做一个非常相似的事情。区域渐变需要基于总图表，而不是为显示的任何区域着色整个渐变（例如，使用常规的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();
    }

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

2 个答案: