フレックス：LineSeries でカスタム ストロークを作成しますか?

Question

次のようにして、一連の線にストロークを簡単に設定できます。

<mx:LineSeries yField="apple">
    <mx:lineStroke>
        <mx:Stroke 
                    color="0x6699FF" 
                    weight="4" 
                    alpha=".8"
        />
    </mx:lineStroke>
</mx:LineSeries>

これにより、ストローク全体のアルファが .8 に設定されます。

しかし、dataProvider 内の何かに基づいて、プロットごとにストークに異なるアルファを設定できるようにしたいと考えています。

たとえば、 yField lineSeries の「Apple」は、lineSeries をどこにプロットするかを知る方法です。次のようなものを追加できるようにしたい alphaField これにより、各プロットのストローク アルファを設定するかどうかが決まります。

したがって、私の dataProvider が次の場合:

<result month="Jan-04">
    <apple>81768</apple>
    <alpha>1</alpha>
</result>
<result month="Feb-04">
    <apple>51156</apple>
    <alpha>1</alpha>
</result>
<result month="Mar-04">
    <apple>51156</apple>
    <alpha>.5</alpha>
</result>

そして私は設定しました alphaField="alpha" この場合、プロット 0 からプロット 1 までソリッド ストロークがあり、次にプロット 1 からプロット 2 まで 50% のアルファ ストロークが存在します。

これどうやってするの？？？LineSeries の commitProperties() メソッドと updateDisplayList() メソッドを調べていますが、これを行うには何を追加/変更する必要があるのか​​わかりません。

確かに、このクラスは各プロットを描画するために Graphics.lineTo() を使用する必要があるため、基本的には何らかの方法で現在の alphaField 値を「取得」し、各プロットを描画する前に正しいアルファを持つ Graphics.lineStyle() を適用する必要があります。ライン。

ありがとう！！

---

アップデート

私は自分の答えにかなり近づいてきました。

LineRenderer を拡張するときに、GraphicsUtilities.drawPolyLine() を呼び出す updateDisplayList() をオーバーライドします。

GraphicsUtilities を拡張し、実際に線が描画される場所であるため、drawPolyLine() メソッドをオーバーライドします。

ここで lineStyle() を呼び出して、線のアルファを変更できます...

まだ理解できないことが 1 つあります。drawPolyLine() メソッド内から、アルファがどうあるべきかを決定するデータにアクセスするにはどうすればよいですか?

ありがとう！！！！

Answer 1

私は、Flex SDK 4.0を使用し、私はそれは同様に3.4上で動作します信じています。

それはtsimusなかったので

、ArrayCollectionの代わりにXMLを使用します。

<mx:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/halo" >

    <fx:Script><![CDATA[
        import mx.charts.ChartItem;
        import mx.charts.renderers.CircleItemRenderer;
        import mx.collections.ArrayCollection;
        import mx.graphics.IFill;
        import mx.graphics.SolidColor;
        import mx.graphics.Stroke;

        import st.model.ViewModelLocator;

        [Bindable]
        private var modelLocator:st.model.ViewModelLocator = ViewModelLocator.getInstance() ;

        [Bindable]
        public var dp :ArrayCollection = new ArrayCollection([
            { test:0.1,alpha: 1 },
            { test:0.2,alpha: 0.5 },
            { test:0.3,alpha: 0.75 },
            { test:0.4,alpha: 0.25 },
            { test:0.5,alpha: 0.5 }
        ]);

        private function myFillFunction(element:ChartItem, index:Number):IFill {
            return new SolidColor(0x6699FF,Number(element.item.alpha));
        }
    ]]></fx:Script>

    <mx:ColumnChart id="myChart" dataProvider="{dp}">
        <mx:series>
            <mx:LineSeries lineStroke="{new Stroke(0x6699FF,4,0.1)}" width="100" height="100" yField="test" fillFunction="{myFillFunction}" itemRenderer="{new ClassFactory(mx.charts.renderers.CircleItemRenderer)}" />
        </mx:series>
    </mx:ColumnChart>

</mx:Application>

Answer 2

あなたはカスタムアイテムレンダラーを使用してみましたか？

<mx:LineSeries>
  <mx:itemRenderer>
    <mx:Component>
      <mx:BoxItemRenderer scaleX="1" scaleY="1" alpha="{data.alpha}"/>
    </mx:Component>
  </mx:itemRenderer>
</mx:LineSeries>

これは単なる簡単な例ですが、私はするitemRendererが進むべき道だと思います。

Answer 3

drawPolyLine機能では、pts:Arrayを取得します。これは、特定のSeriesItemの配列です。 ラインシリーズのためには、LineSeriesItemオブジェクトの配列を取得します。だから、あなたはX軸とY軸の値を取得したい場合。あなただけxValueのyValueまたはLineSeriesItemプロパティにアクセスします。このような：pts[0].xValueまたはpts[0].yValue

<時間>

public static function drawPolyLine(g:Graphics, pts:Array,
                                     start:int, end:int,
                                     hProp:String, vProp:String,
                                     stroke:IStroke, form:Object,
                                     moveToStart:Boolean = true):void