Cómo establecer un color específico para JavaFX XYChart.Series?

Question

Estoy tratando de dar estilo a mi diagrama de líneas de JavaFX, pero no puedo encontrar ninguna forma de establecer el color para series específicas. Sé que puedo crear estilo mediante CSS, pero no puedo encontrar cómo configurar ID o CLASS para mi serie.

¿Puede alguien darme una pista sobre: ​​

1. Cómo establecer un color de linecharts?
2. ¿Cómo establecer una clase css en series?

Answer 1

En general, la forma preferida de estilo de gráficos es sin código, utilizando solo hojas de estilo css como recomienda jschoen. Además, si se requiere una mayor personalización, puede usar las búsquedas css desde el código para profundizar en los nodos generados a partir de los datos de la serie y aplicar varios estilos CSS adicionales.

Aquí hay información sobre cómo cambiar dinámicamente un JavaFX line chart style y un sample program para ir con la respuesta. En la aplicación de muestra, todo el estilo CSS adicional se realiza mediante una llamada setStyle desde el código. Utilizando una técnica de búsqueda similar, podría obtener acceso a los nodos de la serie para aplicar un estilo de estilo de hoja de estilo apropiado en lugar de una llamada de estilo de estilo.

Answer 2

He encontrado un documento de Oracle en este Styling charts with CSS y en esa página de desplazamiento hacia abajo para Setting Chart Colors para lo que está buscando específicamente.

¿Cómo establecer un color para los diagramas de línea?

La manera más simple de esto es el siguiente fragmento de CSS:

.default-color0.chart-series-line { -fx-stroke: #e9967a; } 
.default-color1.chart-series-line { -fx-stroke: #f0e68c; } 
.default-color2.chart-series-line { -fx-stroke: #dda0dd; } 

Esto, desafortunadamente, no funcionará por id o qué serie, sino más bien el fin de la serie se colocan en el gráfico. También puede establecer los estilos de línea, aunque al hacerlo:

.chart-series-line {  
    -fx-stroke-width: 2px; 
    -fx-effect: null; 
} 

Cómo establecer una clase CSS a la serie?

Desafortunadamente no veo la manera de hacerlo. Sería bueno poder crear reglas CSS basadas en la propiedad del nombre XYChart.Series, pero no creo que eso sea posible.

Answer 3

La respuesta de jewelsea parece indicar que debe colocar una clase de estilo en cada nodo de la serie. Estoy usando el siguiente código para aplicar un estilo a la serie de un gráfico de área y solo asignar una clase al nodo asociado con la serie. El código de ejemplo está en Scala, pero debería ser fácil de traducir.

Al crear la serie, añado una clase de estilo de la serie específica:

 val s = new XYChart.Series[Number, Number]() //create a new series 
     s.setName(seriesName)       //set its name (display in legend) 
     s.getNode.getStyleClass.add("series-" + seriesName) //add specific style class 

A continuación, dentro de la css -file Yo lo siguiente para cambiar el color de relleno de la serie '' butterwings:

.series-butterwings *.chart-series-area-fill{ 
    -fx-fill: #aab597; 
} 

Esto funciona, porque el nodo para el área de la serie está debajo del nodo de la serie (que es un grupo en el caso del gráfico de área).

Answer 4

¿Cómo establecer un color para los diagramas de líneas?

Aquí está una manera simple de AreaChart o LineChart

XYChart chart = new AreaChart(); 
Series series = new Series(); 
chart.getData().add(series); 

Node fill = series.getNode().lookup(".chart-series-area-fill"); // only for AreaChart 
Node line = series.getNode().lookup(".chart-series-area-line"); 

Color color = Color.RED; // or any other color 

String rgb = String.format("%d, %d, %d", 
     (int) (color.getRed() * 255), 
     (int) (color.getGreen() * 255), 
     (int) (color.getBlue() * 255)); 

fill.setStyle("-fx-fill: rgba(" + rgb + ", 0.15);"); 
line.setStyle("-fx-stroke: rgba(" + rgb + ", 1.0);");