Die Anleitung zu JavaFX BarChart und StackedBarChart

JavaFX BarChart
Das Beispiel über BarChart
Horizontales Diagramm BarChart
Anpassende BarChart
Die Animation verwalten wenn die Daten ändert
JavaFX StackedBarChart
BarChart und das Event

1. JavaFX BarChart

JavaFX BarChart ist für die Erstellung eines Bar Chart, das ist eine 2D Diagramm mit 2 Achsen X und Y. Darin bezeichnet ein Achse eine Objektsgruppe und die andere eine numerische Daten

Beispiel: Daten über die populär Programmiersprache im Jahr 2014 und 2015

	2014	2015
Java	20.973%	26.983%
C#	4.429%	6.569%
PHP	2.792%	6.619%

Benutzen Sie BarChart für die Bezeichnung der Häufigkeit der Programmiersprache mit den oben Daten. Sehe Beispiel

Achse X bezeichnet die Programmiersprache, Achse Y bezeichnet die Nummerische Daten (die Anteil der Sprache). Es gibt 2 Datenteil, ein von 2014 und ein von 2015

2. Das Beispiel über BarChart

BarChartDemo.java

package org.o7planning.javafx.barchart;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class BarChartDemo extends Application {

   @Override
   public void start(Stage primaryStage) throws Exception {

       CategoryAxis xAxis = new CategoryAxis();
       xAxis.setLabel("Programming Language");

       NumberAxis yAxis = new NumberAxis();
       yAxis.setLabel("Percent");

       // Create a BarChart
       BarChart<String, Number> barChart = new BarChart<String, Number>(xAxis, yAxis);

       // Series 1 - Data of 2014
       XYChart.Series<String, Number> dataSeries1 = new XYChart.Series<String, Number>();
       dataSeries1.setName("2014");

       dataSeries1.getData().add(new XYChart.Data<String, Number>("Java", 20.973));
       dataSeries1.getData().add(new XYChart.Data<String, Number>("C#", 4.429));
       dataSeries1.getData().add(new XYChart.Data<String, Number>("PHP", 2.792));

       // Series 2 - Data of 2015
       XYChart.Series<String, Number> dataSeries2 = new XYChart.Series<String, Number>();
       dataSeries2.setName("2015");

       dataSeries2.getData().add(new XYChart.Data<String, Number>("Java", 26.983));
       dataSeries2.getData().add(new XYChart.Data<String, Number>("C#", 6.569));
       dataSeries2.getData().add(new XYChart.Data<String, Number>("PHP", 6.619));

       // Add Series to BarChart.
       barChart.getData().add(dataSeries1);
       barChart.getData().add(dataSeries2);

       barChart.setTitle("Some Programming Languages");

       VBox vbox = new VBox(barChart);

       primaryStage.setTitle("JavaFX BarChart (o7planning.org)");
       Scene scene = new Scene(vbox, 400, 200);

       primaryStage.setScene(scene);
       primaryStage.setHeight(300);
       primaryStage.setWidth(400);

       primaryStage.show();
   }

   public static void main(String[] args) {
       Application.launch(args);
   }
}

3. Horizontales Diagramm BarChart

Beim Default bezeichnet Achse Y die nummerische Daten und Achse X bezeichnet die Objekt. In diesem Fall ist BarChart ein vertikale Grafik. Aber können Sie die horizontale Grafik machen. Sehen Sie das Beispiel

HorizontalBarChartDemo.java

package org.o7planning.javafx.barchart;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class HorizontalBarChartDemo extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        CategoryAxis xAxis = new CategoryAxis();
        xAxis.setLabel("Programming Language");

        NumberAxis yAxis = new NumberAxis();
         
        yAxis.setLabel("Percent");

        // Create a BarChart
        BarChart<Number, String> barChart = new BarChart<Number, String>(yAxis, xAxis);

        // Series 1 - Data of 2014
        XYChart.Series<Number, String> dataSeries1 = new XYChart.Series<Number, String>();
        dataSeries1.setName("2014");

        dataSeries1.getData().add(new XYChart.Data<Number, String>(20.973, "Java"));
        dataSeries1.getData().add(new XYChart.Data<Number, String>(4.429, "C#"));
        dataSeries1.getData().add(new XYChart.Data<Number, String>(2.792, "PHP"));

        // Series 2 - Data of 2015
        XYChart.Series<Number, String> dataSeries2 = new XYChart.Series<Number, String>();
        dataSeries2.setName("2015");

        dataSeries2.getData().add(new XYChart.Data<Number, String>(26.983, "Java"));
        dataSeries2.getData().add(new XYChart.Data<Number, String>(6.569, "C#"));
        dataSeries2.getData().add(new XYChart.Data<Number, String>(6.619, "PHP"));

        // Add Series to BarChart.
        barChart.getData().add(dataSeries1);
        barChart.getData().add(dataSeries2);

        barChart.setTitle("Some Programming Languages");

        VBox vbox = new VBox(barChart);

        primaryStage.setTitle("JavaFX BarChart (o7planning.org)");
        Scene scene = new Scene(vbox, 400, 200);

        primaryStage.setScene(scene);
        primaryStage.setHeight(300);
        primaryStage.setWidth(400);

        primaryStage.show();
    }

    public static void main(String[] args) {
        Application.launch(args);
    }
}

4. Anpassende BarChart

// Set show Tick Marks
xAxis.setTickMarkVisible(true);

// Rotate the label of Tick Marks 90 degrees
xAxis.setTickLabelRotation(90);

// Set color for lable of Tick marks
xAxis.setTickLabelFill(Color.RED);

// Set Font
xAxis.setTickLabelFont( new Font("Arial", 15));

// Set legend position.
barChart.setLegendSide(Side.LEFT);

5. Die Animation verwalten wenn die Daten ändert

Sie können die Grafik aktuallisiern wenn die Daten geändert sind. JavaFX ermöglicht Ihnen die Effekt für Wiedererstellung der Grafik mit neuer Daten zu machen

// Changing random data after every 1 second.
Timeline timeline = new Timeline();
timeline.getKeyFrames().add(new KeyFrame(Duration.millis(1000), new EventHandler<ActionEvent>() {
   @Override
   public void handle(ActionEvent actionEvent) {
       for (XYChart.Series<String, Number> series : barChart.getData()) {
           for (XYChart.Data<String, Number> data : series.getData()) {
               Number yValue = data.getYValue();
               Number randomValue = yValue.doubleValue() * (0.5 + Math.random());
               data.setYValue(randomValue);
           }
       }
   }
}));
// Repeat indefinitely until stop() method is called.
timeline.setCycleCount(Animation.INDEFINITE);
timeline.setAutoReverse(true);
timeline.play();

Beispiel

AnimationBarChartDemo.java

package org.o7planning.javafx.barchart;

import javafx.animation.Animation;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;

public class AnimationBarChartDemo extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        CategoryAxis xAxis = new CategoryAxis();
        xAxis.setLabel("Programming Language");

        NumberAxis yAxis = new NumberAxis();
        yAxis.setLabel("Percent");

        // Create a BarChart
        BarChart<String, Number> barChart = new BarChart<String, Number>(xAxis, yAxis);

        // Series 1 - Data of 2014
        XYChart.Series<String, Number> dataSeries1 = new XYChart.Series<String, Number>();
        dataSeries1.setName("2014");

        dataSeries1.getData().add(new XYChart.Data<String, Number>("Java", 20.973));
        dataSeries1.getData().add(new XYChart.Data<String, Number>("C#", 4.429));
        dataSeries1.getData().add(new XYChart.Data<String, Number>("PHP", 2.792));

        // Series 2 - Data of 2015
        XYChart.Series<String, Number> dataSeries2 = new XYChart.Series<String, Number>();
        dataSeries2.setName("2015");

        dataSeries2.getData().add(new XYChart.Data<String, Number>("Java", 26.983));
        dataSeries2.getData().add(new XYChart.Data<String, Number>("C#", 6.569));
        dataSeries2.getData().add(new XYChart.Data<String, Number>("PHP", 6.619));

        // Add Series to BarChart.
        barChart.getData().add(dataSeries1);
        barChart.getData().add(dataSeries2);

        barChart.setTitle("Some Programming Languages");

        // Changing random data after every 1 second.
        Timeline timeline = new Timeline();
        timeline.getKeyFrames().add(new KeyFrame(Duration.millis(1000), new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent actionEvent) {
                for (XYChart.Series<String, Number> series : barChart.getData()) {
                    for (XYChart.Data<String, Number> data : series.getData()) {
                        Number yValue = data.getYValue();
                        Number randomValue = yValue.doubleValue() * (0.5 + Math.random());
                        data.setYValue(randomValue);
                    }
                }
            }
        }));
        // Repeat indefinitely until stop() method is called.
        timeline.setCycleCount(Animation.INDEFINITE);
        timeline.setAutoReverse(true);
        timeline.play();

        VBox vbox = new VBox(barChart);

        primaryStage.setTitle("JavaFX BarChart (o7planning.org)");
        Scene scene = new Scene(vbox, 400, 200);

        primaryStage.setScene(scene);
        primaryStage.setHeight(300);
        primaryStage.setWidth(400);

        primaryStage.show();
    }

    public static void main(String[] args) {
        Application.launch(args);
    }
}

6. JavaFX StackedBarChart

Es gibt kein Unterschied bei Erstellung von BarChart und StackedBarChart.Der einzige Unterschied ist Daten anzeige. Mit StackedBarChart sind die Series gestapelt

StackedBarChartDemo.java

package org.o7planning.javafx.stackedbarchart;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.StackedBarChart;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class StackedBarChartDemo extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        CategoryAxis xAxis = new CategoryAxis();
        xAxis.setLabel("Programming Language");

        NumberAxis yAxis = new NumberAxis();
        yAxis.setLabel("Percent");

        // Create a StackedBarChart
        StackedBarChart<String, Number> barChart = new StackedBarChart<String, Number>(xAxis, yAxis);

        // Series 1 - Data of 2014
        XYChart.Series<String, Number> dataSeries1 = new XYChart.Series<String, Number>();
        dataSeries1.setName("2014");

        dataSeries1.getData().add(new XYChart.Data<String, Number>("Java", 20.973));
        dataSeries1.getData().add(new XYChart.Data<String, Number>("C#", 4.429));
        dataSeries1.getData().add(new XYChart.Data<String, Number>("PHP", 2.792));

        // Series 2 - Data of 2015
        XYChart.Series<String, Number> dataSeries2 = new XYChart.Series<String, Number>();
        dataSeries2.setName("2015");

        dataSeries2.getData().add(new XYChart.Data<String, Number>("Java", 26.983));
        dataSeries2.getData().add(new XYChart.Data<String, Number>("C#", 6.569));
        dataSeries2.getData().add(new XYChart.Data<String, Number>("PHP", 6.619));

        // Add Series to StackedBarChart.
        barChart.getData().add(dataSeries1);
        barChart.getData().add(dataSeries2);
       
        barChart.setTitle("Some Programming Languages");

        VBox vbox = new VBox(barChart);

        primaryStage.setTitle("JavaFX StackedBarChart (o7planning.org)");
        Scene scene = new Scene(vbox, 400, 200);

        primaryStage.setScene(scene);
        primaryStage.setHeight(300);
        primaryStage.setWidth(400);

        primaryStage.show();
    }

    public static void main(String[] args) {
        Application.launch(args);
    }
}

7. BarChart und das Event

Sie können die Ereignis mit Grafik, einschließend BarChart und StackedBarChart. Einige Beispiel von Ereignisbehandlung mit PieChart, StackedBarChart können Sie in --- sehen

Die Anleitung zu JavaFX PieChart