es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Barchart como TableRow en JavaFX

28 Jul, 2023 Programación

Me gustaría agregar un tipo de gráfico de barras a mi aplicación utilizando JavaFX:

enter image description here

Básicamente: una tabla (potencialmente grande, es decir, hasta 50 entradas). Para cada fila hay varias columnas con información. Una parte de la información son porcentajes sobre la relación ganar/empatar/perder, es decir, digamos tres números 10%, 50%, 40%. Me gustaría mostrar estos tres porcentajes gráficamente como una barra vertical, con tres colores diferentes. De modo que un usuario pueda obtener una impresión visual de cada uno de estos porcentajes.

No he encontrado un método simple o directo para hacer eso con JavaFX. Parece que al menos no hay un control para eso en este momento. Tampoco pude encontrar un control en ControlsFX que pareciera adecuado. Lo que estoy haciendo actualmente es tener la información en sí misma y tres columnas para los porcentajes de esta manera:

Opción    Ganar   Empatar   Perder
=================================
opción1   10%     50%       40%
opción2   20%     70%       10%
opción3   ...

Pero eso simplemente no es tan agradable. ¿Cómo puedo lograr la pantalla gráfica mencionada anteriormente?

(He agregado una imagen para una mejor comprensión; es de lichess.org donde hacen exactamente eso en html)

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr la visualización gráfica de porcentajes como barras verticales con diferentes colores, puedes utilizar la API de gráficos de JavaFX.

    Aquí están los pasos para crear un gráfico de barras con tres colores diferentes que representan los porcentajes de victoria, empate y derrota:

    1. Crea un objeto BarChart especificando las etiquetas del eje x y del eje y.
    2. Crea tres series, una para cada valor porcentual (victoria, empate y derrota) y añádelas al gráfico.
    3. Para cada serie, añade un objeto XYChart.Data para cada opción en la tabla con el valor porcentual correspondiente.
    4. Crea un objeto XYChart.Series para cada valor porcentual con un color único y añade los objetos XYChart.Data correspondientes a él.
    5. Añade los tres objetos XYChart.Series al gráfico.

    Aquí tienes un fragmento de código que demuestra cómo lograr esto:

    // Crear un nuevo BarChart
BarChart<string, number=""> barChart = new BarChart<>(new CategoryAxis(), new NumberAxis());

// Establecer las etiquetas de los ejes
barChart.getXAxis().setLabel("Opción");
barChart.getYAxis().setLabel("Porcentaje");

// Crear las series para los porcentajes de victoria, empate y derrota
XYChart.Series<string, number=""> winSeries = new XYChart.Series<>();
winSeries.setName("Victoria");
XYChart.Series<string, number=""> drawSeries = new XYChart.Series<>();
drawSeries.setName("Empate");
XYChart.Series<string, number=""> lossSeries = new XYChart.Series<>();
lossSeries.setName("Derrota");

// Añadir los datos para los porcentajes de victoria, empate y derrota
winSeries.getData().add(new XYChart.Data<>("opcion1", 10));
drawSeries.getData().add(new XYChart.Data<>("opcion1", 50));
lossSeries.getData().add(new XYChart.Data<>("opcion1", 40));

// Establecer los colores para cada serie
winSeries.getNode().getStyleClass().add("win-bar");
drawSeries.getNode().getStyleClass().add("draw-bar");
lossSeries.getNode().getStyleClass().add("loss-bar");

// Añadir las tres series al gráfico
barChart.getData().addAll(winSeries, drawSeries, lossSeries);

    Ten en cuenta que este código asume que has creado estilos CSS para las barras de victoria, empate y derrota. Puedes hacer esto añadiendo el siguiente código a tu archivo CSS:

    .win-bar {
    -fx-bar-fill: green;
}

.draw-bar {
    -fx-bar-fill: yellow;
}

.loss-bar {
    -fx-bar-fill: red;
}

    Esto establecerá el color de cada barra en verde para victoria, amarillo para empate y rojo para derrota.

    Con este código, deberías poder lograr la visualización gráfica de porcentajes como barras verticales con diferentes colores en tu aplicación de JavaFX.</string,></string,></string,></string,>

Comments are closed.