Come modificare dinamicamente lo stile della linea nel grafico a linee JavaFX 2.0?

Question

Nel nostro progetto JavaFX abbiamo bisogno di un grafico a linee. Posso facile stilizzare l'intero grafico e la serie con i CSS, ma il contenuto della nostra tabella di poter cambiare in modo dinamico:

1. numero di serie e il loro ordine visualizzazione dipende azioni degli utenti e i suoi dati. Ogni serie rappresenta una categoria di dati concreti e ogni categoria ha il proprio stile, ad es. la categoria A è mostrata come una linea tratteggiata e la categoria B è mostrata come una linea tratteggiata. Il grafico può contenere 0 o più serie per ogni categoria,

2. lo stile della serie dipende anche dai valori dei dati, ad es. linea di serie sopra la media è rossa, e sotto è blu.

Come farlo in JavaFX?

Answer 1

1. numero di serie e il loro ordine visualizzazione dipende dalle azioni degli utenti e i suoi dati.

Il numero di serie visualizzati e l'ordine di visualizzazione può essere modificato cambiando la ObservableList di serie che è stato passato a setData() chiamata del grafico. Mentre il grafico ascolta le modifiche all'elenco, mentre il backing list cambia, il grafico viene automaticamente aggiornato per riflettere le modifiche.

ogni categoria ha il proprio stile, ad es. la categoria A è mostrata come una linea tratteggiata e la categoria B è mostrata come una linea tratteggiata.

Questo può fatto da determinare quale serie nel grafico è in quale categoria, guardando tutti i nodi legati alla serie con la funzione di nodo lookupAll(cssStyleSelector) e l'applicazione di un nuovo stile personalizzato alla serie, che corrisponde allo stile per la categoria . Le linee tratteggiate e tratteggiate possono essere modificate tramite css impostando la proprietà -fx-stroke-dash-array css. In alternativa, anziché una ricerca, è possibile modificare dinamicamente la classe di stile CSS assegnata ai nodi modificando la ObservableList restituita da getStyleClass().

lo stile della serie dipende anche dai valori dei dati, ad es. linea di serie sopra la media è rossa, e sotto è blu.

Questo è simile a come vengono visualizzate le linee punteggiate e tratteggiate, ma invece il colore delle linee sono modifed dalla proprietà css -fx-stroke e la modifica dipende dai valori medi calcolati per la serie.

Per dimostrare i punti di cui sopra, ho creato una soluzione di esempio per questa domanda qui: https://gist.github.com/2129306

Answer 2

ho fatto come questo, pensano che sia abbastanza a portata di mano. Nota: questo apparentemente funziona su LineCharts ma non su ScatterCharts.

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