FLEX: Crie STROTE personalizado nas séries de linhas?

Question

Você pode definir facilmente um golpe em uma série de linhas como esta:

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

Isso definirá alfa para todo o golpe para .8

Mas quero poder definir um alfa diferente no Stoke para cada gráfico com base em algo no DataProvider.

Por exemplo, o yField Nas séries de linhas está "Apple", que é assim que sabe onde planejar as séries de linhas. Eu quero poder adicionar algo como alphaField O que diz o que definir o ALFA para cada parcela.

Então, se meu 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>

E eu defino alphaField="alpha" Então eu teria um golpe sólido do gráfico 0 para o gráfico 1 e, em seguida, um acidente vascular cerebral alfa de 50% do gráfico 1 ao gráfico 2.

Como posso fazer isso??? Estou procurando os métodos CommitProperties () e UpdatedIsPlayList () de LineSeries e não tenho idéia do que precisaria ser adicionado/alterado para fazer isso?

Tenho certeza de que essa classe precisa usar o Graphics.lineto () para desenhar cada gráfico, então basicamente precisaria "obter" o valor atual do Alphafield de alguma forma e aplicar um gráfico.Linestyle () com o alfa correto antes de desenhar cada um linha.

Obrigado!!

---

ATUALIZAR

Eu cheguei muito mais perto da minha resposta.

Quando estendo a linha de linha, substituo o UpdatedIsPlayList () que chama Graphicsutities.DrawPolyLine ()

Eu estendo o GraphicsUtities e substituo o método drawPolyLine (), pois é aqui que a linha é realmente desenhada.

Eu posso chamar Linestyle () aqui e mudar o alfa da linha ...

Ainda tenho uma coisa que não consigo descobrir, no método DrawPolyLine () Como posso acessar esses dados que ditam o que o alfa deve ser?

Obrigado!!!!

Answer 1

Usei o Flex SDK 4.0, mas acredito que funcionará no 3.4 também.

Usou o ArrayCollection em vez de XML, porque não era o 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

Você já tentou usar um renderizador de item personalizado?

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

Este é apenas um exemplo rápido, mas acho que o ItemRender é o caminho a percorrer.

Answer 3

Dentro drawPolyLine função você vai conseguir pts:Array. Esta é uma matriz da série específica. Para séries de linha, você receberá uma variedade de LineSeriesItem objetos. Portanto, se você deseja obter seus valores de eixo X e Y. você apenas acessa o xValue ou yValue propriedade de a LineSeriesItem. assim: pts[0].xValue ou 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