dataProviderにデータが追加されるたびにFlex Chartを更新するにはどうすればよいですか?
-
03-07-2019 - |
質問
ここで何かを見逃しているに違いありません。これは、「Getting started with Flex charting」で対処される非常に基本的な問題のようです。チュートリアル。ただし、dataProviderが変更されるたびにグラフが自動的に更新されるというヒントのみが見つかりました。気をつけて、ヒント。
これは私のマークアップです:
<?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>
そしてこれは私の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);
}
「開始」をクリックすると、ボタンを押すと、データ配列は3秒ごとに拡張されますが、画面上のグラフは変わりません。
解決
こちらをご覧ください。 Flexでは、すべてのデータ構造クラス( Array
など)に、ラッパーとして機能する対応するCollection(またはCollectionView)クラスがあります。 addItem()
などのラッパー関数を使用すると、リッスンしているものにイベントをディスパッチして、コレクションが変更されたことを通知します。 xmlDataTest
をラップする ArrayCollection
のインスタンスにdataProviderを設定する必要があります。
編集:また、元々明確ではなかったため、ArrayCollectionラッパーを介して配列の操作をすべてすべて行う必要があります。基礎となるデータに加えられた変更は、そのインターフェースを通過せず、システムの残りの部分は知る方法がありません。
他のヒント
rmeadorが説明するようなArrayCollectionにするのは正しいと思います。
次のようにPlotChartの refreshBindings()
メソッドを呼び出すことにより、この問題を回避できる場合があります。 idOfPlotChart.refreshBindings();
vAppendDatum
関数。