Como faço para fazer uma atualização do Flex Chart sempre que os dados são adicionados ao seu DataProvider?

Question

Agora devo estar perdendo algo aqui, pois esse parece uma questão muito básica que seria abordada em qualquer tutorial de "começar com o Flex Charting". No entanto, tudo o que pude encontrar foi dicas de que o gráfico deve atualizar automaticamente sempre que o DataProvider altera. Veja bem, dicas.

Esta é a minha marcação:

<?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 isso faz parte do meu 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);
}

Ao clicar no botão "Iniciar", a matriz de dados é estendida a cada 3 segundos, mas o gráfico na tela permanece o mesmo.

Answer 1

Dar uma olhada em isto. Em flex, todas as classes de estrutura de dados (como Array) têm classes de coleção correspondente (ou coleção) que atuam como invólucros. Quando você usa as funções do invólucro, como addItem(), Ele despacha um evento para qualquer coisa que ouça notificá -los que a coleção mudou. Você vai querer definir o DataProvider como uma instância de ArrayCollection Isso envolve xmlDataTest.

EDITAR: Além disso, como eu não estava bem claro originalmente, você precisará fazer tudo Sua manipulação da matriz através do invólucro do ArrayCollection. Quaisquer alterações feitas nos dados subjacentes que não passam por essa interface, o restante do sistema não tem como saber.

Answer 2

Acredito que torná -lo uma coleta de Array, como Rmeador descreve, está correto.

Você pode ser capaz de contornar isso chamando o refreshBindings() Método do pluchart como este: idOfPlotChart.refreshBindings(); Depois que os dados são atualizados em seu vAppendDatum função.