2

線の色が値の高さを示す 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>
4

2 に答える 2

3

同じ問題に遭遇し、上記の 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);
    }
于 2012-08-01T08:34:28.873 に答える
1

折れ線グラフのカスタム 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();
    }
于 2009-01-20T09:39:08.933 に答える