Flex: Crear trazo personalizado en LineSeries?

Question

Puede configurar fácilmente un golpe en una serie línea como la siguiente:

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

Esto establecerá alfa para toda la carrera a 0,8

Pero yo quiero ser capaz de establecer un alfa diferente en el Stoke para cada trama basada en algo de dataProvider.

Por ejemplo, la yField en los lineSeries es "Apple", que es como se conoce dónde se trazan para los lineSeries. Quiero ser capaz de añadir algo como alphaField que le dice lo que para establecer el alfa de carrera para cada parcela.

así que si mi dataProvider era:

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

Y establecer alphaField="alpha" entonces tendría un golpe sólido a partir de trama 0 para trazar 1 y luego un golpe alpha 50% a partir de trama 1 para trazar 2.

¿Cómo puedo hacer esto ??? Busco en los commitProperties () y updateDisplayList () de LineSeries y no tienen idea de lo que tendría que ser añadido / modificado para hacer esto?

Estoy bastante seguro, esta clase tiene que utilizar Graphics.lineTo () para dibujar cada parcela, así que básicamente sería necesario para "conseguir" el valor actual alphaField alguna manera, y aplicar una Graphics.lineStyle () con el alfa correcta antes de dibujar cada línea.

Gracias !!

---

Actualizar

He conseguido mucho más cerca de mi respuesta.

Cuando extiendo LineRenderer I anular updateDisplayList () que llama GraphicsUtilities.drawPolyLine ()

extiendo GraphicsUtilities y reemplazar el método drawPolyLine () ya que es donde la línea está dibujado.

Puedo llamar lineStyle () en el aquí y cambiar el alfa de la línea ...

Todavía tengo 1 cosa que no puedo entender, desde dentro del método drawPolyLine () ¿cómo puedo acceder a esos datos que dicta lo que debe ser el alfa?

Gracias !!!!

Answer 1

He utilizado Flex SDK 4.0, pero creo que va a trabajar en 3.4 también.

Se utiliza ArrayCollection en lugar de XML, porque no era el 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

¿Ha intentado utilizar un procesador de elementos personalizados?

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

Esto es sólo un ejemplo rápido, pero creo que el itemRenderer es el camino a seguir.

Answer 3

En función drawPolyLine obtendrá pts:Array. Esta es una matriz de la SeriesItem específico. Para la serie Línea obtendrá una matriz de objetos LineSeriesItem. Así que si usted desea conseguir su Valores del eje x y. que acaba de acceder a la propiedad o xValue yValue de un LineSeriesItem. de esta manera: 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