Pie Charts in JavaFX

In diesem Artikel lernst du die Verwendung von Pie Charts in JavaFX. Dabei handelt es sich um Kuchendiagramm, welches sehr verbreitet ist. Es wird gerne verwendet, um darzustellen welchen Anteil verschiedene Parteien haben z.B.. Wir verwenden in diesem Beispiel eine Scene mit einer Group, also kein BorderPane oder ähnliches, als das Layout.

Beispiel für ein Pie Chart in JavaFX:

ObservableList pieChartData =
        FXCollections.observableArrayList(
        new PieChart.Data("Java", 25),
        new PieChart.Data("Swift", 15),
        new PieChart.Data("PHP", 10),
        new PieChart.Data("C#", 20),
        new PieChart.Data("Andere", 30));

PieChart pieChart = new PieChart(pieChartData);
pieChart.setTitle("Programmiersprachen");

[image img_id=”6322″ alt=”pie chart in javafx” width=”300″ height=”246″]

Du siehst, dass wir mit ziemlich wenig Code, bereits ein so tolles Pie Chart erstellen können. Wenn wir nun auch noch Klicks nutzen wollen, dann benötigen wir wieder einen Eventhandler.

Verwendung von Klicks in Pie Charts in JavaFX:

Label details = new Label("");
details.setTextFill(Color.BLACK);
details.setStyle("-fx-font: 20 arial;");

for (final PieChart.Data data : pieChart.getData()) {
    data.getNode().addEventHandler(MouseEvent.MOUSE_PRESSED,
            new EventHandler() {
                @Override public void handle(MouseEvent e) {
                	details.setTranslateX(e.getSceneX());
                	details.setTranslateY(e.getSceneY());
                	details.setText(String.valueOf(data.getPieValue()) + "%");
                }
            });
}

Damit wird folgender Effekt erreicht:

Dort wo wir drauf klicken, entsteht also ein Label, welches Anzeigt, wie viel Prozent der Teil des Kuchens hat. Du siehst also, mit data.getPieValue() erhältst du den Wert, den wir vorher in unserer Observable List zugeordnet haben. Erstelle nun dein eigenes Pie Chart und zeige rechts oben noch die Auflistung der Prozente neben den einzelnen Programmiersprachen.