Buscar..


Gráfico circular

La clase PieChart dibuja datos en forma de círculo que se divide en segmentos. Cada porción representa un porcentaje (parte) para un valor particular. Los datos del gráfico circular se envuelven en objetos PieChart.Data . Cada objeto PieChart.Data tiene dos campos: el nombre del sector circular y su valor correspondiente.

Constructores

Para crear un gráfico circular, necesitamos crear el objeto de la clase PieChart . Dos constructores se dan a nuestra disposición. Uno de ellos crea un gráfico vacío que no mostrará nada a menos que los datos se configuren con el método setData :

PieChart pieChart = new PieChart(); // Creates an empty pie chart

Y el segundo requiere que se pase como parámetro una lista ObservableList de PieChart.Data .

ObservableList<PieChart.Data> valueList = FXCollections.observableArrayList(
            new PieChart.Data("Cats", 50),
            new PieChart.Data("Dogs", 50));
PieChart pieChart(valueList); // Creates a chart with the given data

Datos

Los valores de los sectores de sectores no necesariamente tienen que sumar 100, ya que el tamaño del sector se calculará en proporción a la suma de todos los valores.

El orden en que se agregan las entradas de datos a la lista determinará su posición en el gráfico. Por defecto, se colocan en sentido horario, pero este comportamiento puede revertirse

pieChart.setClockwise(false);

Ejemplo

El siguiente ejemplo crea un gráfico circular simple:

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class Main extends Application {

@Override
public void start(Stage primaryStage) {
    Pane root = new Pane();
    ObservableList<PieChart.Data> valueList = FXCollections.observableArrayList(
            new PieChart.Data("Android", 55),
            new PieChart.Data("IOS", 33),
            new PieChart.Data("Windows", 12));
    // create a pieChart with valueList data.
    PieChart pieChart = new PieChart(valueList);
    pieChart.setTitle("Popularity of Mobile OS");
    //adding pieChart to the root.
    root.getChildren().addAll(pieChart);
    Scene scene = new Scene(root, 450, 450);

    primaryStage.setTitle("Pie Chart Demo");
    primaryStage.setScene(scene);
    primaryStage.show();
}

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

Salida:

Resultado

Gráfico circular interactivo

De forma predeterminada, PieChart no controla ningún evento, pero este comportamiento se puede cambiar porque cada porción circular es un Node JavaFX.

En el siguiente ejemplo, inicializamos los datos, los asignamos al gráfico y luego iteramos sobre el conjunto de datos agregando información sobre herramientas a cada segmento, de modo que los valores, normalmente ocultos, puedan presentarse al usuario.

ObservableList<PieChart.Data> valueList = FXCollections.observableArrayList(
            new PieChart.Data("Nitrogen", 7809),
            new PieChart.Data("Oxygen", 2195),
            new PieChart.Data("Other", 93));
    
PieChart pieChart = new PieChart(valueList);
pieChart.setTitle("Air composition");

pieChart.getData().forEach(data -> {
    String percentage = String.format("%.2f%%", (data.getPieValue() / 100));
    Tooltip toolTip = new Tooltip(percentage);
    Tooltip.install(data.getNode(), toolTip);
});

Gráfico de linea

La clase LineChart presenta los datos como una serie de puntos de datos conectados con líneas rectas. Cada punto de datos se XYChart.Data en el objeto XYChart.Data , y los puntos de datos se agrupan en XYChart.Series .

Cada objeto XYChart.Data tiene dos campos, a los que se puede acceder utilizando getXValue y getYValue , que corresponden a un valor de x y ay en un gráfico.

XYChart.Data data = new XYChart.Data(1,3);
System.out.println(data.getXValue()); // Will print 1
System.out.println(data.getYValue()); // Will print 3

Ejes

Antes de crear un LineChart necesitamos definir sus ejes. Por ejemplo, el constructor predeterminado, sin argumentos, de una clase NumberAxis creará un eje de rango automático que está listo para usar y no requiere configuración adicional.

Axis xAxis = new NumberAxis();

Ejemplo

En el ejemplo completo a continuación, creamos dos series de datos que se mostrarán en el mismo gráfico. Las etiquetas de los ejes, los rangos y los valores de marca están definidos explícitamente.

@Override
public void start(Stage primaryStage) {
    Pane root = new Pane();

    // Create empty series
    ObservableList<XYChart.Series> seriesList = FXCollections.observableArrayList();

    // Create data set for the first employee and add it to the series
    ObservableList<XYChart.Data> aList = FXCollections.observableArrayList(
            new XYChart.Data(0, 0),
            new XYChart.Data(2, 6),
            new XYChart.Data(4, 37),
            new XYChart.Data(6, 82),
            new XYChart.Data(8, 115)
    );
    seriesList.add(new XYChart.Series("Employee A", aList));

    // Create data set for the second employee and add it to the series
    ObservableList<XYChart.Data> bList = FXCollections.observableArrayList(
            new XYChart.Data(0, 0),
            new XYChart.Data(2, 43),
            new XYChart.Data(4, 51),
            new XYChart.Data(6, 64),
            new XYChart.Data(8, 92)
    );
    seriesList.add(new XYChart.Series("Employee B", bList));

    // Create axes
    Axis xAxis = new NumberAxis("Hours worked", 0, 8, 1);
    Axis yAxis = new NumberAxis("Lines written", 0, 150, 10);
    
    LineChart chart = new LineChart(xAxis, yAxis, seriesList);

    root.getChildren().add(chart);

    Scene scene = new Scene(root);
    primaryStage.setScene(scene);
    primaryStage.show();
}

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

Salida:

Gráfico de linea



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow