L'API JavaFX met à disposition toute une série de classes et de classes utilitaires associées pour
afficher des graphiques de données statistiques. Ces classes sont disponibles dans le
package javafx.scene.chart. Ces graphiques sont des nœuds graphiques, il est donc possible de
les modifier et de les manipuler, de leur faire subir des effets et transformations exactement comme
n'importe quel autre nœud SceneGraph. Ces graphiques sont également des Region.
Actuellement, l'API propose les graphiques suivants :
PieChart - un graphique en camembert ;
des graphiques sur deux axes qui héritent de la classe abstraite XYChart :
o ScatterChart - un graphique contenant des séries de valeurs représentées par des
nuages de points ou de symboles,
o BubbleChart - un graphique contenant des séries de valeurs représentées par des
bulles dont le diamètre varie en fonction d'une 3e dimension,
o LineChart - un graphique contenant des séries de valeurs représentées par des
lignes,
o AreaChart - un graphique contenant des séries de valeurs représentées par des
aires colorées,
o StackedAreaChart - un graphique contenant des séries de valeurs représentées par
des aires colorées superposées les unes sur les autres,
o BarChart - un graphique contenant des séries de valeurs représentées par des
colonnes classées par catégories.
o StackedBarChart - un graphique contenant des séries de valeur représentées par
des colonnes classées par catégories et superposées les unes sur les autres.
Il est également possible de créer de nouveaux types de graphiques à partir des classes de base
présentes dans l'API.
Note : les graphiques de cette API sont des agencements complexes de nœuds vectoriels. De plus,
ils sont souvent animés et peuvent mettre à jour immédiatement leur contenu en cas de modification
des séries ou des données qu'elles contiennent via un ensemble complexe d’écouteurs. Ils
contiennent donc généralement beaucoup de sous-nœuds et sont gourmands en mémoire.
Mis à jour le 18 septembre 2014 bouye
Comment créer un graphique en camembert ?
Pour créer un graphique en camembert, vous devez initialiser une instance de PieChart. Pour
peupler ce graphique, vous devez peupler sa liste observable data avec des éléments de
type PieChart.Data contenant les valeurs à afficher.
Par exemple :
Code Java : Sélectionner tout
1 public class Main extends Application {
2
3 @Override
4 public void start(Stage primaryStage) {
5 // Création du graphique.
6 final PieChart chart = new PieChart();
7 chart.setTitle("Stock de fruits");
8 chart.getData().setAll(new PieChart.Data("Pommes",
9 50), new PieChart.Data("Oranges", 30),
10 new PieChart.Data("Poires", 25), new
11 PieChart.Data("Pêches", 42),
12 new PieChart.Data("Citrons", 5), new
13 PieChart.Data("Kiwis", 19)
14 );
15 // Montage de l'IU.
16 final StackPane root = new StackPane();
17 root.getChildren().add(chart);
18 final Scene scene = new Scene(root, 300, 250);
19 primaryStage.setTitle("Test de PieChart");
20 primaryStage.setScene(scene);
21 primaryStage.show();
22 }
23
24 public static void main(String[] args) {
launch(args);
}
}
Ce qui nous donne :
Mis à jour le 18 septembre 2014 bouye
Comment créer un graphique avec des lignes ?
Pour créer un graphique avec des lignes, vous devez instancier un objet de type [b]LineChart[/b.
Vous devez tout d'abord créer des objets de type LineChart.Series que vous allez peupler avec des
instances de LineChart.Data qui contiendront les valeurs à afficher. Ces séries doivent être placées
dans la liste observable data du graphique.
Il faudra également créer deux axes qui héritent de la classe Axis. Chaque axe contient les bornes
minimale et maximale de la plage de valeurs affichables pour leur dimension respective ainsi que le
label à afficher sur cette dimension.
Par exemple :
Code Java : Sélectionner tout
1 public class Main extends Application {
2
3 @Override
4 public void start(Stage primaryStage) {
5 // Création des séries.
6 final List<LineChart.Series> seriesList = new
7 LinkedList<>();
8 final int maxN = 3;
9 final int minX = 0;
10 final int maxX = 5;
11 double minY = Double.MAX_VALUE;
12 double maxY = -Double.MAX_VALUE;
13 for (int n = 0 ; n <= maxN ; n++) {
14 final LineChart.Series series = new
15 LineChart.Series<>();
16 series.setName(String.format("n = %d", n));
17 for (int x = minX ; x <= maxX ; x++) {
18 final double value = Math.pow(x, n);
19 minY = Math.min(minY, value);
20 maxY = Math.max(maxY, value);
21 final LineChart.Data data = new
22 LineChart.Data(x, value);
23 series.getData().add(data);
24 }
25 seriesList.add(series);
26 }
27
// Création du graphique.
28
final NumberAxis xAxis = new NumberAxis(minX, maxX,
29
1);
30
xAxis.setLabel("x");
31
final NumberAxis yAxis = new NumberAxis(minY, maxY,
32
50);
33
yAxis.setLabel("y = Math.pow(x, n)");
34
35 final LineChart chart = new LineChart(xAxis, yAxis);
36 chart.setTitle("Fonction puissance");
37 chart.getData().setAll(seriesList);
38 // Montage de l'IU.
39 final StackPane root = new StackPane();
40 root.getChildren().add(chart);
41 final Scene scene = new Scene(root, 300, 250);
42 primaryStage.setTitle("Test de LineChart");
43 primaryStage.setScene(scene);
44 primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Ce qui nous donne :
Mis à jour le 19 septembre 2014 bouye
Comment créer un histogramme ?
Pour créer un histogramme, vous devez instancier un objet de type BarChart. Vous devez tout
d'abord créer des objets de type BarChart.Series que vous allez peupler avec des instances
de BarChart.Data qui contiendront les valeurs à afficher. Ces séries doivent être placées dans la
liste observable data du graphique.
Il faudra également créer deux axes qui héritent de la classe Axis. Un de ces deux axes doit être
obligatoirement de type CategoryAxis et contenir la liste des catégories affichables. Dans
un BarChart, les catégories sont représentées par une liste de chaines de caractères. La position de
cet axe sur l'histogramme détermine si ce dernier est affiché à la verticale ou à l'horizontale.
L'autre axe contient les bornes minimale et maximale de la plage de valeurs affichables. Chaque axe
contient le label à afficher sur cette dimension.
Par exemple :
Code Java : Sélectionner tout
1 public class Main extends Application {
2
3 @Override
4 public void start(Stage primaryStage) {
5 // Création des séries.
6 final List<BarChart.Series> seriesList = new
7 LinkedList<>();
8 final String[] categoriesNames = {"2012", "2013",
9 "2014"};
10 final String[] seriesNames = {"US", "Royaume-Uni",
11 "France", "Allemagne"};
12 final int[][] allValues = {
13 {50, 25, 32},
14 {80, 90, 88},
15 {24, 75, 79},
16 {15, 23, 2},};
17 final double minY = 0;
18
19 double maxY = -Double.MAX_VALUE;
20 for (int seriesIndex = 0; seriesIndex <
21 seriesNames.length; seriesIndex++) {
22 final BarChart.Series series = new
23 BarChart.Series<>();
24 series.setName(seriesNames[seriesIndex]);
25 final int[] values = allValues[seriesIndex];
26 for (int categoryIndex = 0; categoryIndex <
27 categoriesNames.length; categoryIndex++) {
28 final int value = values[categoryIndex];
29 final String category =
30 categoriesNames[categoryIndex];
31 maxY = Math.max(maxY, value);
32 final BarChart.Data data = new
33 BarChart.Data(category, value);
34 series.getData().add(data);
35 }
36 seriesList.add(series);
37 }
38 // Création du graphique.
39 final CategoryAxis xAxis = new CategoryAxis();
40 xAxis.getCategories().setAll(categoriesNames);
41 xAxis.setLabel("Années");
42 final NumberAxis yAxis = new NumberAxis(minY, maxY,
43
50);
44
yAxis.setLabel("Volumes");
45
final BarChart chart = new BarChart(xAxis, yAxis);
46
chart.setTitle("Exportations");
47
chart.getData().setAll(seriesList);
48
// Montage de l'IU.
49
final StackPane root = new StackPane();
50
root.getChildren().add(chart);
final Scene scene = new Scene(root, 300, 250);
primaryStage.setTitle("Test de BarChart");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Ce qui nous donne :
Mis à jour le 19 septembre 2014 bouye
Comment créer un histogramme empilé ?
Pour créer un histogramme empilé, vous devez instancier un objet de type StackedBarChart. Vous
devez tout d'abord créer des objets de type StackedBarChart.Series que vous allez peupler avec
des instances de StackedBarChart.Data qui contiendront les valeurs à afficher. Ces séries doivent
être placées dans la liste observable data du graphique.
Il faudra également créer deux axes qui héritent de la classe Axis. Un de ces deux axes doit être
obligatoirement de type CategoryAxis et contenir la liste des catégories affichables. Dans
un StackedBarChart, les catégories sont représentées par une liste de chaines de caractères. La
position de cet axe sur l'histogramme détermine si ce dernier est affiché à la verticale ou à
l'horizontale.
L'autre axe contient les bornes minimale et maximale de la plage de valeurs affichables. Chaque axe
contient le label à afficher sur cette dimension.
Par exemple :
Code Java : Sélectionner tout
1 public class Main extends Application {
2
3 @Override
4 public void start(Stage primaryStage) {
5 // Création des séries.
6 final List<StackedBarChart.Series> seriesList = new
7 LinkedList<>();
8 final String[] categoriesNames = {"2012", "2013",
9 "2014"};
10 final String[] seriesNames = {"US", "Royaume-Uni",
11 "France", "Allemagne"};
12 final int[][] allValues = {
13 {50, 25, 32},
14 {80, 90, 88},
15 {24, 75, 79},
16 {15, 23, 2},};
17
18 for (int seriesIndex = 0; seriesIndex <
19 seriesNames.length; seriesIndex++) {
20 final StackedBarChart.Series series = new
21 StackedBarChart.Series<>();
22 series.setName(seriesNames[seriesIndex]);
23 final int[] values = allValues[seriesIndex];
24 for (int categoryIndex = 0; categoryIndex <
25 categoriesNames.length; categoryIndex++) {
26 final int value = values[categoryIndex];
27 final String category =
28 categoriesNames[categoryIndex];
29 final StackedBarChart.Data data = new
30 StackedBarChart.Data(category, value);
31 series.getData().add(data);
32 }
33 seriesList.add(series);
34 }
35 // Création du graphique.
36 final CategoryAxis xAxis = new CategoryAxis();
37 xAxis.getCategories().setAll(categoriesNames);
38 xAxis.setLabel("Années");
39 final NumberAxis yAxis = new NumberAxis();
40 yAxis.setLabel("Volumes");
41 yAxis.setAutoRanging(true);
42
yAxis.setForceZeroInRange(true);
43
final StackedBarChart chart = new
44
StackedBarChart(xAxis, yAxis);
45
chart.setTitle("Exportations");
46
chart.getData().setAll(seriesList);
47
// Montage de l'IU.
48
final StackPane root = new StackPane();
49
root.getChildren().add(chart);
final Scene scene = new Scene(root, 300, 250);
primaryStage.setTitle("Test de StackedBarChart");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Ce qui nous donne :
Mis à jour le 19 septembre 2014 bouye
Comment créer un graphique avec des aires ?
Pour créer un graphique avec des aires, vous devez instancier un objet de type [b]AreaChart[/b.
Vous devez tout d'abord créer des objets de type AreaChart.Series que vous allez peupler avec des
instances de AreaChart.Data qui contiendront les valeurs à afficher. Ces séries doivent être placées
dans la liste observable data du graphique.
Il faudra également créer deux axes qui héritent de la classe Axis. Chaque axe contient les bornes
minimale et maximale de la plage de valeurs affichables pour leur dimension respective ainsi que le
label à afficher sur cette dimension.
Par exemple :
Code Java : Sélectionner tout
1 public class Main extends Application {
2
3 @Override
4 public void start(Stage primaryStage) {
5 // Création des séries.
6 final List<AreaChart.Series> seriesList = new
7 LinkedList<>();
8 final String[] seriesNames = {"Perches", "Brochets",
9 "Truites"};
10 final int[] years = {2011, 2012, 2013, 2014};
11 final int[][] allValues = {
12 {15, 20, 19, 22},
13 {26, 24, 8, 7},
14 {5, 0, 8, 12},};
15 for (int seriesIndex = 0; seriesIndex <
16 seriesNames.length; seriesIndex++) {
17 final AreaChart.Series series = new
18 AreaChart.Series<>();
19 series.setName(seriesNames[seriesIndex]);
20 final int[] values = allValues[seriesIndex];
21 for (int yearIndex = 0; yearIndex < years.length;
22 yearIndex++) {
23 final int year = years[yearIndex];
24 final double value = values[yearIndex];
25 final AreaChart.Data data = new
26 AreaChart.Data(year, value);
27 series.getData().add(data);
28 }
29 seriesList.add(series);
30 }
31 // Création du graphique.
32 final NumberAxis xAxis = new NumberAxis();
33 xAxis.setLabel("Années");
34 xAxis.setAutoRanging(false);
35 xAxis.setLowerBound(years[0]);
36 xAxis.setUpperBound(years[years.length-1]);
37 xAxis.setTickUnit(1);
38 final NumberAxis yAxis = new NumberAxis();
39 yAxis.setLabel("Individus");
40 yAxis.setAutoRanging(true);
41 yAxis.setForceZeroInRange(true);
42 final AreaChart chart = new AreaChart(xAxis, yAxis);
43 chart.setTitle("Population observée");
44 chart.getData().setAll(seriesList);
45
// Montage de l'IU.
46
final StackPane root = new StackPane();
47
root.getChildren().add(chart);
48
final Scene scene = new Scene(root, 300, 250);
49
primaryStage.setTitle("Test de AreaChart");
50
primaryStage.setScene(scene);
51
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Ce qui nous donne :
Mis à jour le 19 septembre 2014 bouye
Comment créer un graphique avec des aires empilées ?
Pour créer un graphique avec des aires empilées, vous devez instancier un objet de type
[b]StackedAreaChart[/b. Vous devez tout d'abord créer des objets de
type StackedAreaChart.Series que vous allez peupler avec des instances
de StackedAreaChart.Data qui contiendront les valeurs à afficher. Ces séries doivent être placées
dans la liste observable data du graphique.
Il faudra également créer deux axes qui héritent de la classe Axis. Chaque axe contient les bornes
minimale et maximale de la plage de valeurs affichables pour leur dimension respective ainsi que le
label à afficher sur cette dimension.
Par exemple :
Code Java : Sélectionner tout
1 public class Main extends Application {
2
3 @Override
4 public void start(Stage primaryStage) {
5 // Création des séries.
6 final List<StackedAreaChart.Series> seriesList = new
7 LinkedList<>();
8 final String[] seriesNames = {"Perches", "Brochets",
9 "Truites"};
10 final int[] years = {2011, 2012, 2013, 2014};
11 final int[][] allValues = {
12 {15, 20, 19, 22},
13 {26, 24, 8, 7},
14 {5, 0, 8, 12},};
15 for (int seriesIndex = 0; seriesIndex <
16 seriesNames.length; seriesIndex++) {
17 final StackedAreaChart.Series series = new
18 StackedAreaChart.Series<>();
19 series.setName(seriesNames[seriesIndex]);
20 final int[] values = allValues[seriesIndex];
21 for (int yearIndex = 0; yearIndex < years.length;
22 yearIndex++) {
23 final int year = years[yearIndex];
24 final double value = values[yearIndex];
25 final StackedAreaChart.Data data = new
26 StackedAreaChart.Data(year, value);
27 series.getData().add(data);
28 }
29 seriesList.add(series);
30 }
31 // Création du graphique.
32 final NumberAxis xAxis = new NumberAxis();
33 xAxis.setLabel("Années");
34 xAxis.setAutoRanging(false);
35 xAxis.setLowerBound(years[0]);
36 xAxis.setUpperBound(years[years.length-1]);
37 xAxis.setTickUnit(1);
38 final NumberAxis yAxis = new NumberAxis();
39 yAxis.setLabel("Individus");
40 yAxis.setAutoRanging(true);
41 yAxis.setForceZeroInRange(true);
42 final StackedAreaChart chart = new
43 StackedAreaChart(xAxis, yAxis);
44
chart.setTitle("Population observée");
45
chart.getData().setAll(seriesList);
46
// Montage de l'IU.
47
final StackPane root = new StackPane();
48
root.getChildren().add(chart);
49
final Scene scene = new Scene(root, 300, 250);
50
primaryStage.setTitle("Test de StackedAreaChart");
51
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Ce qui nous donne :
Mis à jour le 19 septembre 2014 bouye
Comment spécifier le titre du graphique ?
Pour spécifier le titre du graphique, vous devez modifier la valeur de sa propriété title.
Par exemple :
Code Java : Sélectionner tout
chart.setTitle("Mon graphique");
Mis à jour le 19 septembre 2014 bouye
Comment changer la position du titre du graphique ?
Pour changer la position du titre du graphique, vous devez modifier la valeur de sa
propriété titleSide en lui donnant une valeur de type javafx.geometry.Side.
Par exemple :
Code Java : Sélectionner tout
chart.setTitleSide(TitleSide.RIGHT);
Ici, le titre sera placé sur le bord droit du graphique.
Note : changer cette propriété ne modifie pas l'orientation du texte.
Mis à jour le 19 septembre 2014 bouye
Comment cacher la légende du graphique ?
Pour cacher la légende du graphique, vous devez modifier la valeur de sa propriété legendVisible et
la mettre à la valeur false.
Par exemple :
Code Java : Sélectionner tout
chart.setLegendVisible(false);
Mis à jour le 19 septembre 2014 bouye
Comment changer la position de la légende du graphique ?
Pour changer la position de la légende du graphique, vous devez modifier sa
propriété legendSide en lui donnant une valeur de type javafx.geometry.Side.
Par exemple :
Code Java : Sélectionner tout
chart.setLegendSize(Side.LEFT)
Ici, la légende sera placée sur le bord gauche du graphique.
Note : le graphique peut décider de ne pas afficher la légende, s'il n'y a pas assez d'espace pour
l'inclure à sa nouvelle position.
Mis à jour le 19 septembre 2014 bouye
Comment spécifier le label sur un axe ?
Pour spécifier le label sur un axe, vous devez modifier la valeur de sa propriété label. Cela aura pour
effet de changer la chaine de caractères affichée le long de cet axe à l’écran.
Par exemple :
Code Java : Sélectionner tout
axis.setLabel("Dates");
Mis à jour le 19 septembre 2014 bouye
Comment changer les bornes d'affichage sur un axe numérique ?
Si un de vos axes hérite de la classe ValueAxis (c'est le cas de la classe NumberAxis), il vous suffit
de modifier les valeurs de ses propriétés lowerBound ou upperBound pour modifier les bornes
minimale et maximale de cet axe. Cela aura pour impact d'afficher plus ou moins de données
provenant des séries de votre graphique.
Par exemple :
Code Java : Sélectionner tout
1 xAxis.setLowerBound(10);
2 xAxis.setUpperBound(20);
Note : si les propriétés autoRanging ou forceZeroInRange sont actives sur l'axe, il est possible que
les bornes finales ne soient pas celles que vous ayez spécifiées dans le code, car l'axe les modifiera
à nouveau avant de s'afficher.
