Gráfico de área apilada de JavaFX

Un componente JavaFX StackedAreaChart es capaz de dibujar gráficos de áreas apiladas dentro de sus aplicaciones JavaFX. Un gráfico de áreas apiladas es similar a un gráfico de áreas con múltiples series de datos, excepto que un gráfico de áreas apiladas muestra las series de datos (y por lo tanto las áreas) apiladas una encima de otra, donde el gráfico de áreas normal las superpondría.

El componente JavaFX StackedAreaChart está representado por la clase java.scene.chart.StackedAreaChart.

StackedAreaChart Eje X y Eje Y

Un JavaFX StackedAreaChart dibuja un gráfico de áreas apiladas. Un gráfico de áreas apiladas es un gráfico bidimensional, lo que significa que el gráfico tiene un eje X y un eje Y. Los gráficos de áreas suelen tener dos ejes numéricos. Un eje numérico está representado por la clase JavaFX javafx.scene.chart.NumberAxis.

Debe definir el eje X y el eje Y utilizados por un archivo StackedAreaChart. A continuación se muestra un ejemplo de creación de dos NumberAxisinstancias de JavaFX:

NumberAxis xAxis = new NumberAxis();
xAxis.setLabel("Last 7 Days");

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

Crear un gráfico de área apilada

Usted crea un componente JavaFX StackedAreaChart creando una instancia de la StackedAreaChartclase. Debe pasar un eje X y un eje Y al StackedAreaChartconstructor. Aquí hay un StackedAreaChartejemplo de creación de instancias de JavaFX:

NumberAxis xAxis = new NumberAxis();
xAxis.setLabel("No of employees");

NumberAxis yAxis = new NumberAxis();
yAxis.setLabel("Revenue per employee");

StackedAreaChart stackedAreaChart = new StackedAreaChart(xAxis, yAxis);

Serie de datos StackedAreaChart

Para que un StackedAreaChartcomponente JavaFX muestre puntos, debe proporcionarle una serie de datos . Una serie de datos es una lista de puntos de datos. Cada punto de datos contiene un valor X y un valor Y.

Para ver áreas apiladas, debe agregar dos o más series de datos al StackedAreaChartcomponente. Muestra StackedAreaChartlos valores de la serie de datos apilados uno encima del otro.

A continuación se muestra un ejemplo de cómo crear dos series de datos y agregarlas a un StackedAreaChartcomponente:

XYChart.Series dataSeries1 = new XYChart.Series();
dataSeries1.setName("Desktop");

dataSeries1.getData().add(new XYChart.Data( 0, 567));
dataSeries1.getData().add(new XYChart.Data( 1, 612));
dataSeries1.getData().add(new XYChart.Data( 2, 800));
dataSeries1.getData().add(new XYChart.Data( 3, 780));
dataSeries1.getData().add(new XYChart.Data( 4, 650));
dataSeries1.getData().add(new XYChart.Data( 5, 610));
dataSeries1.getData().add(new XYChart.Data( 6, 590));

stackedAreaChart.getData().add(dataSeries1);

XYChart.Series dataSeries2 = new XYChart.Series();
dataSeries2.setName("Mobile");

dataSeries2.getData().add(new XYChart.Data( 0, 101));
dataSeries2.getData().add(new XYChart.Data( 1, 110));
dataSeries2.getData().add(new XYChart.Data( 2, 140));
dataSeries2.getData().add(new XYChart.Data( 3, 132));
dataSeries2.getData().add(new XYChart.Data( 4, 115));
dataSeries2.getData().add(new XYChart.Data( 5, 109));
dataSeries2.getData().add(new XYChart.Data( 6, 105));

stackedAreaChart.getData().add(dataSeries2);

Los datos de estas series de datos representan los datos de visitas de usuarios en dispositivos móviles y de escritorio hace 7 días.

Agregar un StackedAreaChart al gráfico de escena

Para hacer StackedAreaChartvisible un JavaFX, debe agregarlo al gráfico de escena de JavaFX. Esto significa agregarlo StackedAreaCharta un Sceneobjeto o agregarlo AreaCharta un componente de diseño que se agrega a un Sceneobjeto.

Aquí hay un ejemplo que agrega un StackedAreaChartgráfico de escena de JavaFX:

package com.jenkov.javafx.charts;

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

public class StackedAreaChartExperiments extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("StackedAreaChart Experiments");

        NumberAxis xAxis = new NumberAxis();
        xAxis.setLabel("7 Day Interval");

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

        StackedAreaChart stackedAreaChart = new StackedAreaChart(xAxis, yAxis);

        XYChart.Series dataSeries1 = new XYChart.Series();
        dataSeries1.setName("Desktop");

        dataSeries1.getData().add(new XYChart.Data( 0, 567));
        dataSeries1.getData().add(new XYChart.Data( 1, 612));
        dataSeries1.getData().add(new XYChart.Data( 2, 800));
        dataSeries1.getData().add(new XYChart.Data( 3, 780));
        dataSeries1.getData().add(new XYChart.Data( 4, 650));
        dataSeries1.getData().add(new XYChart.Data( 5, 610));
        dataSeries1.getData().add(new XYChart.Data( 6, 590));

        stackedAreaChart.getData().add(dataSeries1);

        XYChart.Series dataSeries2 = new XYChart.Series();
        dataSeries2.setName("Mobile");

        dataSeries2.getData().add(new XYChart.Data( 0, 101));
        dataSeries2.getData().add(new XYChart.Data( 1, 110));
        dataSeries2.getData().add(new XYChart.Data( 2, 140));
        dataSeries2.getData().add(new XYChart.Data( 3, 132));
        dataSeries2.getData().add(new XYChart.Data( 4, 115));
        dataSeries2.getData().add(new XYChart.Data( 5, 109));
        dataSeries2.getData().add(new XYChart.Data( 6, 105));

        stackedAreaChart.getData().add(dataSeries2);

        VBox vbox = new VBox(stackedAreaChart);

        Scene scene = new Scene(vbox, 400, 200);

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

        primaryStage.show();
    }

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

La aplicación resultante de ejecutar este ejemplo sería similar a esta: