Flessione: Crea tratto personalizzato su LineSeries?

Question

Si può facilmente impostare un colpo su una serie riga come questa:

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

Questo imposterà alfa per l'intera corsa di .8

Ma io voglio essere in grado di impostare un alpha diverso sul Stoke per ogni trama basata su qualcosa in dataProvider.

Ad esempio il yField nelle lineSeries è "Apple", che è come si sa dove tracciare per i lineSeries. Voglio essere in grado di aggiungere qualcosa di simile alphaField che gli dice cosa impostare l'alfa della corsa per ogni trama.

quindi se la mia era 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>

E impostare alphaField="alpha" allora avrebbe un solido corsa da trama a trama 0 1 e quindi un alfa corsa 50% dal terreno 1 per tracciare 2.

Come posso fare questo ??? Sto cercando nei commitProperties () e updateDisplayList () metodi di LineSeries e ho idea di cosa avrebbe bisogno di essere aggiunto / modificato per rendere questo?

Sono abbastanza sicuro, questa classe deve usare Graphics.lineTo () per disegnare ogni trama, in modo sostanzialmente avrebbe bisogno di "ottenere" il valore corrente alphaField in qualche modo, e applicare un Graphics.lineStyle () con l'alfa corretta prima di disegnare ogni linea.

Grazie !!

---

Aggiorna

ho ottenuto molto più vicino alla mia risposta.

Quando si estendo LineRenderer sovrascrivo updateDisplayList (), che chiama GraphicsUtilities.drawPolyLine ()

estendo GraphicsUtilities e sovrascrivere il metodo drawPolyLine () come questo è dove la linea viene tracciata.

posso chiamare lineStyle () nel qui e cambiare l'alfa della linea ...

Ho ancora 1 cosa che non riesco a capire, dall'interno del metodo drawPolyLine () come posso accedere ai dati che determina ciò che l'alfa dovrebbe essere?

Grazie !!!!

Answer 1

Ho usato Flex SDK 4.0, ma credo che funzionerà su 3.4 pure.

ArrayCollection invece di XML usati, perché non era il tsimus.

<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

Hai provato a usare un renderer elemento personalizzato?

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

Questo è solo un esempio veloce, ma penso che l'itemRenderer è la strada da percorrere.

Answer 3

In funzione drawPolyLine otterrete pts:Array. Questo è un array di SeriesItem specifico. Per la serie di linea si otterrà un array di oggetti LineSeriesItem. Quindi, se si desidera ottenere il vostro valori dell'asse y x &. basta accedere al xValue o la proprietà di un yValue LineSeriesItem. in questo modo: pts[0].xValue o 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