Come faccio ad aggiornare un grafico flessibile ogni volta che i dati vengono aggiunti al suo fornitore di dati?

Question

Ora mi manca qualcosa qui, poiché questo sembra un problema di base che verrebbe affrontato in qualsiasi "Guida introduttiva alla creazione di grafici Flex". tutorial. Tuttavia, tutto quello che ho potuto trovare è stato il suggerimento che il grafico dovrebbe aggiornarsi automaticamente ogni volta che cambia DataProvider. Intendiamoci, suggerimenti.

Questo è il mio markup:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="econemon Sensor Simulator">
    <!-- ... -->
    <mx:Script source="SimulatorFunctions.as" />
    <mx:HDividedBox left="0" top="0" bottom="0" right="0">
        <!-- ... -->
        <mx:VDividedBox width="75%" height="100%">
            <mx:PlotChart width="100%" height="33%" dataProvider="{xmlDataTest}">
                <mx:horizontalAxis>
                    <mx:DateTimeAxis dataUnits="seconds" displayLocalTime="true" parseFunction="dtFromUnixtime"/>
                </mx:horizontalAxis>
                <mx:series>
                    <mx:LineSeries xField="dt" yField="fltValue" displayName="Testkurve" />
                </mx:series>
            </mx:PlotChart>
            <mx:Panel width="100%" height="66%">
                <mx:Button label="Start" click="vDataStart()" />
                <mx:Button label="Stop" click="vDataStop()" />
            </mx:Panel>
        </mx:VDividedBox>
    </mx:HDividedBox> 
</mx:WindowedApplication>

E questo fa parte del mio ActionScript:

[Bindable]
public var xmlDataTest:Array = [
        { dt: "1230908694", fltValue: "50.4" },
        // ...
        { dt: "1230909594", fltValue: "35.4" }
]

public var dflt:Number = 10.0;
public var timData:Timer = new Timer(3000);

// ...

public function vDataStart():void
{
    if (!timData.running) {
        timData.addEventListener(TimerEvent.TIMER, vAppendDatum);
        timData.start();
    }
}

public function vDataStop():void
{
    if (timData.running) {
        timData.stop();
    }
}

public function vAppendDatum(evt:Event):void
{
    var dtNew:String;
    var fltNew:String;
    var fltT: Number;
    dtNew = String(Number(xmlDataTest[xmlDataTest.length - 1].dt) + 100);
    fltT = Number(xmlDataTest[xmlDataTest.length - 1].fltValue);
    if (fltT < 10.0 || fltT > 70) {
        dflt *= -1;
    }
    fltNew = String(fltT + dflt);
    xmlDataTest.push({ dt: dtNew, fltValue: fltNew });
    //trace("Datenpunkte: " + xmlDataTest.length);
}

Facendo clic su " Avvia " pulsante, l'array di dati viene esteso ogni 3 secondi, ma il grafico sullo schermo rimane lo stesso.

Answer 1

Dai un'occhiata a this . In Flex, tutte le classi della struttura dei dati (come Array ) hanno classi Collection (o CollectionView) corrispondenti che fungono da wrapper. Quando si utilizzano le funzioni wrapper come addItem () , invia un evento a qualsiasi cosa in ascolto per notificare loro che la raccolta è cambiata. Ti consigliamo di impostare dataProvider su un'istanza di ArrayCollection che racchiude xmlDataTest .

MODIFICA : inoltre, poiché all'inizio non ero abbastanza chiaro, dovrai fare tutto la tua manipolazione dell'array attraverso il wrapper ArrayCollection. Qualsiasi modifica apportata ai dati sottostanti che non passano attraverso tale interfaccia il resto del sistema non ha modo di saperlo.

Answer 2

Credo che renderlo un ArrayCollection come descritto da rmeador sia corretto.

Potresti essere in grado di aggirare questo problema chiamando il metodo refreshBindings () del diagramma di trama in questo modo: idOfPlotChart.refreshBindings (); dopo che i dati sono stati aggiornati in la tua funzione vAppendDatum .