2012-03-18 24 views
9

En nuestro proyecto JavaFX necesitamos un gráfico de líneas. Puedo estilizar fácil todo el gráfico y la serie el uso de CSS, pero el contenido de nuestra tabla puede cambiar dinámicamente:¿Cómo cambiar dinámicamente el estilo de línea en el gráfico de líneas JavaFX 2.0?

  1. número de serie y su orden de visualización depende de las acciones del usuario y sus datos. Cada serie representa una categoría de datos concretos y cada categoría tiene su propio estilo, por ejemplo. la categoría A se muestra como una línea de puntos y la categoría B se muestra como una línea discontinua. El gráfico puede contener 0 o más series para cada categoría,

  2. el estilo de la serie también depende de los valores de datos, p. Ej. La línea de serie sobre el promedio es roja, y abajo es azul.

¿Cómo hacerlo en JavaFX?

+0

No puedo creer que no haya forma de hacerlo. Es un defecto de diseño tan terrible. – CarrKnight

Respuesta

7
  1. número de serie y su orden de visualización depende de las acciones del usuario y sus datos.

El número de serie indicado y el orden de visualización se pueden modificar cambiando la ObservableList de la serie de la que usted pasó a la llamada de la tabla setData(). A medida que el gráfico escucha los cambios en la lista, a medida que cambia la lista de respaldo, el cuadro se actualiza automáticamente para reflejar los cambios.

cada categoría tiene su propio estilo, por ejemplo. la categoría A se muestra como una línea de puntos y la categoría B se muestra como una línea discontinua.

Esto puede hacerse mediante la determinación de qué serie en la tabla se encuentra en la categoría, mirando hacia arriba todos los nodos relacionados con la serie a través de la función de nodo lookupAll(cssStyleSelector) y la aplicación de un nuevo estilo personalizado a la serie que coincide con el estilo de la categoría . Las líneas punteadas y punteadas se pueden diseñar mediante CSS estableciendo la propiedad -fx-stroke-dash-array css. Alternativamente, en lugar de una búsqueda, puede cambiar dinámicamente la clase de estilo css asignada a los nodos modificando la ObservableList devuelta desde getStyleClass().

El estilo de la serie también depende de los valores de los datos, p. Ej. La línea de serie sobre el promedio es roja, y abajo es azul.

Esto es similar a cómo se muestran las líneas de puntos y trazos, pero en su lugar el color de las líneas se modifed por la propiedad css -fx-stroke y la modificación depende de los valores medios calculados para la serie.

Para demostrar los puntos anteriores, he creado una solución de muestra para esta pregunta aquí: https://gist.github.com/2129306

+0

¡Muchas gracias! El ejemplo es genial y muy útil. – Kojak

4

lo hice así, pensaron que era bastante práctico. Nota: Esto aparentemente funciona en LineCharts pero no en ScatterCharts.

Series<Number, Number> series = new Series<>(); 
... 
series.nodeProperty().get().setStyle("-fx-stroke-width: 1px;"); 
+3

Esto arroja un NPE si el escenario no se muestra. Ten cuidado. – GGrec

Cuestiones relacionadas