フレックス:LineSeries でカスタム ストロークを作成しますか?
-
20-09-2019 - |
質問
次のようにして、一連の線にストロークを簡単に設定できます。
<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() メソッド内から、アルファがどうあるべきかを決定するデータにアクセスするにはどうすればよいですか?
ありがとう!!!!
解決
私は、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>
他のヒント
あなたはカスタムアイテムレンダラーを使用してみましたか?
<mx:LineSeries>
<mx:itemRenderer>
<mx:Component>
<mx:BoxItemRenderer scaleX="1" scaleY="1" alpha="{data.alpha}"/>
</mx:Component>
</mx:itemRenderer>
</mx:LineSeries>
これは単なる簡単な例ですが、私はするitemRendererが進むべき道だと思います。
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