Flex: Créer la course personnalisée sur LineSeries?

Question

Vous pouvez facilement régler une course sur une série de ligne comme ceci:

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

Cela va régler alpha pour toute la course à 0,8

Mais je veux être en mesure de définir une autre alpha sur le stoke pour chaque parcelle en fonction de quelque chose dans le dataProvider.

Par exemple, le yField dans les LineSeries est « Apple », qui est de savoir comment il sait où tracer les LineSeries. Je veux être en mesure d'ajouter quelque chose comme alphaField qui dit quoi régler la course alpha pour chaque parcelle.

donc si mon dataProvider était:

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

Je tournai alphaField="alpha" alors j'aurais un coup solide de terrain 0 à 1, puis tracer une course alpha 50% de la parcelle 1 à tracer 2.

Comment puis-je faire ??? Je suis à la recherche dans les méthodes commitProperties () et updateDisplayList () de LineSeries et ne sais pas ce qu'il faudrait ajouter / changer pour faire cela?

Je suis assez sûr, cette classe doit utiliser Graphics.lineTo () pour dessiner chaque parcelle, donc en gros il faudrait pour « obtenir » la valeur alphaField actuelle en quelque sorte, et appliquer une Graphics.lineStyle () avec la bonne alpha avant de tirer chaque ligne.

Merci !!

---

UPDATE

J'ai eu beaucoup plus proche de ma réponse.

J'adresse LineRenderer I override updateDisplayList () qui appelle GraphicsUtilities.drawPolyLine ()

J'adresse GraphicsUtilities et remplacer la méthode drawPolyLine () comme cela est où la ligne est en fait tiré.

Je peux appeler lineStyle () ici et changer l'alpha de la ligne ...

J'ai encore 1 chose que je ne peux pas comprendre, à partir de la méthode drawPolyLine () comment puis-je accéder à ces données qui dicte ce que l'alpha devrait être?

Merci !!!!

Answer 1

je Flex SDK 4.0, mais je crois que ça va marcher sur 3.4 ainsi.

Utilisé ArrayCollection au lieu de XML, car il n'a pas été le 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

Avez-vous essayé d'utiliser un moteur de rendu d'élément personnalisé?

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

Ceci est juste un exemple rapide, mais je pense que le itemRenderer est le chemin à parcourir.

Answer 3

En fonction drawPolyLine vous obtiendrez pts:Array. Ceci est un tableau de SeriesItem spécifique. Pour les séries de ligne, vous obtiendrez un tableau d'objets de LineSeriesItem. Donc, si vous voulez obtenir votre x et les valeurs de l'axe y. vous accédez simplement la propriété ou xValue yValue d'un LineSeriesItem. comme ceci: 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