Problème de cuisine: linechart et onMouseEntered sur node

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

Je viens vous embêter avec un petit problème sur une application que j'ai créée pour m'amuser et découvrir un peu les graphiques sous JAVAFX. Cette application est un graphique qui recense le nombre de ... cigarettes fumées ... sur une semaine (j'ai juste mis deux semaines dans la base de données). Il y a deux graphiques, correspondant à chaque semaine. Le fait est que lorsque l'on passe sur un point du graphique, je souhaite afficher une vbox qui contient le nombre de cigarettes et la date exacte. Ceci est mis en place mais le problème est qu'il faut passer deux fois sur le point pour que cela s'affiche (la première fois ça marche pas, après cela marche). La première fois, j'ai trois petits points.

Ci-dessous le code.

Tout d'abord, la récupération des informations d'une série (désolé pour les noms rapides des variables ^^):

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
 
String[] lsTitles;
CategoryAxis xAxis;
NumberAxis yAxis;
Calendar cal = Calendar.getInstance();
int  w =  cal.get(Calendar.WEEK_OF_YEAR);
w--; //j'ai démarré il y a une semaine donc j'ai du reculer un peu ^^
 
XYChart.Series<String,Number> series = new XYChart.Series<String,Number>();
List<CigVinz> lsCV = Bdd.getCig("w", ""+ w);
//ici je fais les opérations via peek et je récupère en optional la date minimale pour la mettre en légende
Optional<Date> minDate = lsCV.stream().peek(ee -> {
  	Data<String,Number> tempd = new XYChart.Data<String, Number>(Bdd.convertDateToDayOfWeek(ee.getJour()), ee.getNbCig());
        Label lblDate = new Label("- Date  : " + ee.getJour());	        	 
	Label lblNb= new Label("- Nombre: " + ee.getNbCig());
	Label[] tabLbl = { lblDate, lblNb};	
	VBox vv = new VBox();	        	
	tempd.setNode(vv);
	tempd.setExtraValue(tabLbl);
	series.getData().add(tempd);
}).map(ee -> ee.getJour()).min(new java.util.Comparator<Date>(){      
	 public int compare(Date d1, Date d2){
	        if(d1.before(d2))
	        	return -1;
	        else if (d1.after(d2))
	        	return 1;
	        else
	        	return 0;
	}
});
 
lsTitles = Semaine.getTitreWeekFrmDate(minDate.get());

Ensuite, la méthode de mise en place des évenements

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
 
	public static void setEvenement(LineChart<String, Number> lineChart, int numSer, CategoryAxis xAxis, NumberAxis yAxis ){
 
		Set<Node> lsn = lineChart.lookupAll(".chart-line-symbol.series"+ numSer);
		     lsn.stream().forEach(
		     ee -> {
 
		    	 VBox path = (VBox) ee;
		    	 path.setOnMouseEntered(new EventHandler<MouseEvent>() {
 
			         @Override public void handle(MouseEvent e) {
 
			        	 if(path.getChildren().size() == 0)
			        	 {
			        	 NumberFormat df = NumberFormat.getInstance();
			        	 df.setRoundingMode(RoundingMode.HALF_DOWN);
			        	 df.setMaximumFractionDigits(0);
 
			        	 String valX = xAxis.getValueForDisplay(ee.getLayoutX());
			        	 Series<String, Number> tempser = lineChart.getData().get(numSer);
			        	 ObservableList<Data<String,Number>> ol = tempser.getData();
			        	 FilteredList<Data<String,Number>> fl = ol.filtered(u ->  (u.getXValue()).equals(valX));
			        	 Data<String, Number> dt = fl.get(0);
			        	 Label[] tblbl = (Label[]) dt.getExtraValue();
			        	 path.getChildren().addAll(tblbl);
			        	 path.autosize();
			        	 path.toFront();        	 
			        	 }
 
			         }
			    });
 
		    	path.setOnMouseExited(new EventHandler<MouseEvent>() {		    		
			         @Override public void handle(MouseEvent e) {
			        	 path.getChildren().clear();
			        	 path.autosize();	      
			         }   
		    	 });		 
		     });		    		     
	}

Et pour finir, une image présentant le problème.

Pièce jointe 174274

Je vous remercie d'avance pour votre aide.

Vinz

Pourquoi ne pas essayer de mettre la gestion de l'infobulle ou du popup directement sur le symbole de la donnée de la série ?

Ici, par exemple j'ai place des infobulles sur toutes les data :

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
public class Main extends Application {
    private static class Struct {
        int n;
        int x;
        int y;
    }
 
    private Chart createChart() {
        final int minN = 0;
        final int maxN = 3;
        final int minX = 0;
        final int maxX = 5;
        final int minY = 0;
        final int maxY = (int)Math.pow(maxX, maxN);
        final List<LineChart.Series> seriesList = new LinkedList();
        for (int n = minN; n <= maxN; n++) {
            final LineChart.Series series = new LineChart.Series<>();
            series.setName(String.format("n = %d", n));
            for (int x = minX; x <= maxX; x++) {
                final int y = (int)Math.pow(x, n);
                final LineChart.Data data = new LineChart.Data<>(x, y);                
                final Struct struct = new Struct();
                struct.n = n;
                struct.x = y;
                struct.y = y;
                series.getData().add(data);
                data.nodeProperty().addListener(observable -> {
                    final Node node = data.getNode();
                    final String text = String.format("%d = Math.pow(%d, %d)", struct.y, struct.x, struct.n);
                    final Tooltip tooltip = new Tooltip(text);
                    Tooltip.install(node, tooltip);
                });
            }
            seriesList.add(series);
        }
        final NumberAxis xAxis = new NumberAxis("x", minX, maxX, 1);
        final NumberAxis yAxis = new NumberAxis("y = Math.pow(x, n)", minY, maxY, (maxY - minY) / 4);
        final LineChart chart = new LineChart(xAxis, yAxis);
        chart.getData().setAll(seriesList);
        chart.setTitle("Math.pow()");
        return chart;
    }
 
    @Override
    public void start(Stage primaryStage) {
        final StackPane root = new StackPane();
        root.getChildren().add(createChart());
        Scene scene = new Scene(root, 500, 500);
        primaryStage.setTitle("Test chart tip");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
 
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
}

Cependant, comme je n'ai pas créé de symbole customisé, j'ai mis un écouteur pour savoir quand la skin charge le symbole par défaut (il est null avant le chargement de la skin). Une fois le symbole chargé, je place un Tooltip sur le symbole. Évidement on peut mettre des infobulles riches en plaçant un noeud quelconque dans le graphic de l'infobulle.

Et si on ne veut pas utiliser des Tooltip, on peut tout aussi bien placer les écouteurs de la gestion de la souris au même endroit à la place.

10/04/2015, 14h04
vinou33

1 pièce(s) jointe(s)

Merci pour la réponse. Je viens de tester via les infobulles comme dans l'exemple et il est vrai que c'est plus rapide et plus simple. Il faudra que je vois aussi pour l'autre possibilité (popup). Je démarre depuis peu sur fx ^^ et encore merci pour l'aide.
Le résultat obtenu ( faites pas attention, je vais modifier un peu la présentation du texte ) :
Pièce jointe 174390

Merci ^^

Vinz