Flex 4 chart mouse update data

Version imprimable

Bonjour,

je cherche a realiser un chart ou je peux faire varier les points a la souris. mon code marche a vitesse lente mais des exceptions sont levées lorsque j accélère les déplacements de points

voici le bout de code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
		 creationComplete="init()" >
 
 
	<fx:Declarations>
		<!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
	</fx:Declarations>
 
 
 
	<fx:Script>
		<![CDATA[
			import mx.charts.ChartItem;
			import mx.charts.events.ChartItemEvent;
			import mx.collections.ArrayCollection;
			import mx.events.CollectionEvent;
 
			[Bindable]
			private var provider:ArrayCollection = new ArrayCollection([
				{x: 1, y: 5},
				{x: 2, y: 10},
				{x: 3, y: 5},
				{x: 4, y: 10},
				{x: 5, y: 5},
				{x: 6, y: 10}
			]);
			[Bindable]
			private var idx:Number;
 
 
			private function init():void{
 
				chart.addEventListener(ChartItemEvent.ITEM_CLICK,onItemClicDown);	
				chart.addEventListener(MouseEvent.MOUSE_UP,onItemClicUp);
			}
 
			private function onItemClicDown(event:ChartItemEvent):void{
				var item:Object = event.hitData.item;
				idx = provider.getItemIndex(item);
				chart.addEventListener(MouseEvent.MOUSE_MOVE,onItemMouve);	
			}	
 
			private function onItemMouve(event:MouseEvent):void{
 
				var item:Object = provider.getItemAt(idx);
 
				var tmpCollection:ArrayCollection = provider;
 
				var p:Point = new Point(chart.mouseX,chart.mouseY);
 
				var d:Array = serie.localToData(p);
				item.y = d[1];
 
				tmpCollection.setItemAt(item,idx);
				provider = tmpCollection;
			}
 
			private function onItemClicUp(event:MouseEvent):void{
				chart.removeEventListener(MouseEvent.MOUSE_MOVE,onItemMouve);	
			}
 
		]]>
	</fx:Script>
 
 
 
	<s:Panel>
 
	<mx:LineChart id="chart" >
		<mx:series>
			<mx:LineSeries 
				dataProvider="{provider}"
				xField="x"
				yField="y"
				id="serie"
				itemRenderer="mx.charts.renderers.CircleItemRenderer">						  
 
			</mx:LineSeries>
		</mx:series>
	</mx:LineChart>
 
	</s:Panel>
 
</s:Group>

et voici l exception levée

Code:

1
2
3
4
TypeError: Error #1009: Cannot access a property or method of a null object reference.
	at mx.charts.series::LineSeries/findDataPoints()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\charts\series\LineSeries.as:1460]
	at mx.charts.chartClasses::ChartBase/findDataPoints()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\charts\chartClasses\ChartBase.as:2202]
	at mx.charts.chartClasses::ChartBase/mouseMoveHandler()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\charts\chartClasses\ChartBase.as:4882]

ce qui semble être une exception levée par le framework, car un object est null lors de l'appelle a une fonction de basechart pour mouseMouveHandler

j ai aussi remarque que le listener item_click ne marche pas correctement
il se comporte comme item_double_clik

j ai déjà poste un peu partout mon problème, vous êtes mon dernier recours après cela je devrais changer de framework :(

09/04/2010, 14h45
jylaxx

1- Ton code est un peu curieux ce qui laisse supposer une mauvaise interprétation du fonctionnement d'AS. En effet, quel est le but quand tu affectes ton provider à une variable temporaire ? En pratique tu ne fais que créer une référence sur ton provider mais l'appel des méthodes a le même effet sur tmpCollection que sur provider. En affectant provider à tmpCollection tu ne fais pas une copie.
2- Le fait de déclencher les exception lors d'un mouvement rapide peut indiquer que le listener sur le move est appelé plusieurs fois simultanément. Ce qui peut entrainer une situation instable. Je commencerai par placer un boolean au niveau de la classe pour être certain de sérialiser le code du listener du move.

Merci pour ton aide

Pour le tmpCollection tu a bien deviné je ne connais pas encore le langage correctement et c'etait just pour tester une behavior

j ai essayer de sérialiser la partie du move avec des booleans, mais l'erreur
se produit toujours, j ai vraiment l'impression que c'est le listenerMouseMove général de baseChart qui craque celui qui est appell2 par le framework pour remplir les différents attributs de l'event;

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   creationComplete="init()" 
			   xmlns:custom="com.sap.research.kazmierczak.forecast.*"
 
			   >
 
 
 
		<fx:Declarations>
			<!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
		</fx:Declarations>
 
 
		<fx:Script>
			<![CDATA[
				import mx.charts.ChartItem;
				import mx.charts.events.ChartItemEvent;
				import mx.collections.ArrayCollection;
				import mx.events.CollectionEvent;
 
				[Bindable]
				private var provider:ArrayCollection = new ArrayCollection([
					{x: 1, y: 5},
					{x: 2, y: 10},
					{x: 3, y: 5},
					{x: 4, y: 10},
					{x: 5, y: 5},
					{x: 6, y: 10}
				]);
				[Bindable]
				private var idx:Number;
 
				[Bindable]
				private var lock:Boolean;
 
				[Bindable]
				private var lock2:Boolean;
 
 
				private function init():void{
					lock=false;
					lock2=false;
					chart.addEventListener(ChartItemEvent.ITEM_MOUSE_DOWN,onItemClicDown);	
					chart.addEventListener(MouseEvent.MOUSE_UP,onItemClicUp);
				}
 
				private function onItemClicDown(event:ChartItemEvent):void{
					var item:Object = event.hitData.item;
					idx = provider.getItemIndex(item);
 
					if(!lock){
						lock=true;
						chart.addEventListener(MouseEvent.MOUSE_MOVE,onItemMouve);	
					}
				}	
 
				private function onItemMouve(event:MouseEvent):void{
					if(!lock2){
						lock2=true;
						var item:Object = provider.getItemAt(idx);			
						var p:Point = new Point(chart.mouseX,chart.mouseY);
						var d:Array = serie.localToData(p);
						item.y = d[1];		
						provider.setItemAt(item,idx);
						chart.invalidateDisplayList();
						lock2=false;
					}
				}
 
				private function onItemClicUp(event:MouseEvent):void{
					chart.removeEventListener(MouseEvent.MOUSE_MOVE,onItemMouve);	
					lock=false;
				}
 
			]]>
		</fx:Script>
 
 
		<s:Panel>
 
			<mx:LineChart id="chart" >
				<mx:series>
					<mx:LineSeries 
						dataProvider="{provider}"
						xField="x"
						yField="y"
						id="serie"
						itemRenderer="mx.charts.renderers.CircleItemRenderer">						  
 
					</mx:LineSeries>
				</mx:series>
			</mx:LineChart>
 
		</s:Panel>
 
</s:Application>

23/07/2010, 12h15
badi3

callLater()

Pense à utiliser la méthode callLater() de Flex pour la partie du code où tu mets à jour le dataProvider. En général, elle permet de résoudre ce genre de problèmes.