2012-09-27 22 views
5

Estoy tratando de dar estilo a mi diagrama de líneas de JavaFX, pero tengo algunos problemas con la leyenda.JavaFX 2.0 - ¿Cómo cambiar el color de leyenda de un LineChart dinámicamente?

sé cómo cambiar el color leyenda de un gráfico de líneas en el archivo CSS:

.default-color0.chart-series-line { -fx-stroke: #FF0000, white; }
.default-color1.chart-series-line { -fx-stroke: #00FF00, white; }
.default-color2.chart-series-line { -fx-stroke: #0000FF, white; }

.default-color0.chart-line-symbol { -fx-background-color: #FF0000, white; }
.default-color1.chart-line-symbol { -fx-background-color: #00FF00, white; }
.default-color2.chart-line-symbol { -fx-background-color: #0000FF, white; }

Pero esto no es suficiente para mis propósitos. Tengo tres o más botones de alternar de colores y una serie de datos para cada botón. Los datos deben mostrarse en el mismo color que el botón después de haber seleccionado el botón. Esto debería ser posible con una multiselección de los botones, de forma que se puedan mostrar más de una serie de datos simultáneamente.

Para las líneas del gráfico he logrado cambiando el estilo después hice clic en el botón:

..
dataList.add(series);
..
series.getNode().setStyle("-fx-stroke: rgba(" + rgba + ")");

Si anule la selección del botón I eliminar los datos de la lista.

dataList.remove(series);

que está trabajando muy bien para los golpes, pero ¿cómo puedo hacer lo mismo con la leyenda?

Puede ver un ejemplo a continuación. Primero hice clic en el botón rojo, por lo que el trazo y la leyenda son rojos (predeterminado-color0). Después de eso, hice clic en el botón azul. Aquí puedes ver el problema. El trazo es azul, pero la leyenda es verde, porque se usa el color1 predeterminado y no sé cómo cambiar el color de la leyenda.

enter image description here

+0

¿Quieres decir subtítulos o etiqueta? – ceklock

Respuesta

0

Parece que this tipo es capaces de buscar los nodos utilizados para la leyenda usando su clase y, a continuación, llamar setStyle() en esos nodos. (No creo que su problema sea relevante para usted)

2

Me encontré con este problema también. El problema parece ser que cuando se agregan series de datos al gráfico, la leyenda no se actualiza al mismo tiempo, por lo que cuando busca componentes con esa clase de estilo seriesN aún no existen. Se encontró con una solución temporal que detecta cuándo se crean los elementos de la leyenda para que se les pueda agregar un estilo dinámico.

he añadido un ListChangeListener a ObservableList de la leyenda del gráfico "getChildrenUnmodifiable()", que a su vez añade un ListChangeListener a cada uno de los hijos de la leyenda a medida que se añaden. Desde este oyente, podemos saber cuándo se están agregando nuevos elementos a la leyenda (o quitados). Esto nos permite realizar los cambios de estilo dinámicos.

for (Node n : lineChart.getChildrenUnmodifiable()) 
    { 
     if (n instanceof Legend) 
     { 
      final Legend legend = (Legend) n; 

      // remove the legend 
      legend.getChildrenUnmodifiable().addListener(new ListChangeListener<Object>() 
      { 
       @Override 
       public void onChanged(Change<?> arg0) 
       { 
        for (Node node : legend.getChildrenUnmodifiable()) 
        { 
         if (node instanceof Label) 
         { 
          final Label label = (Label) node; 
          label.getChildrenUnmodifiable().addListener(new ListChangeListener<Object>() 
          { 
           @Override 
           public void onChanged(Change<?> arg0) 
           { 
            //make style changes here 
           } 

          }); 
         } 
        } 
       } 
      }); 
     } 
    } 
+1

Mil gracias por esto, estaba buscando algo así por días. – MaxD

+0

Tal vez una pregunta tonta, pero ¿a qué agregaré los cambios de estilo? ¿para etiquetar? @MaxD –

1

En el futuro, este problema puede ser resuelto envolviendo su código correspondiente en una llamada a Platform.runLater(). Por ejemplo:

LineChart<Number, Number> plot; 
.... 
Platform.runLater(() -> { 
    Node nl = plot.lookup(".default-color0.chart-series-line"); 
    Node ns = plot.lookup(".default-color0.chart-line-symbol"); 

    nl.setStyle("-fx-stroke: #333;"); 
    ns.setStyle("-fx-background-color: #333, white;"); 
}); 
+0

¡Muchas gracias! ¿Dónde puedo encontrar todos estos CSS crípticos para JavaFX? –

+1

@ Zeta.Investigator Esto es lo que uso como referencia https://gist.github.com/tmazeika/c90c03c645d18722ddb0 – Chris

+0

¿Qué es este plot.lookup? –

Cuestiones relacionadas