javafx
Gráfico
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:
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);
}