2016-09-15 41 views
1

我使用JavaFX中的圖表4不同的系列。三個系列是靜態的展示,如綠色,黃色和紅色的實際數據的各種警報級別。如何從JavaFX中圖表只選系列刪除符號標記?

我希望顯示符號提示,但只有實際數據線(藍色),並希望從我的靜態警戒水位線(紅色,黃色和綠色)爲吸引人的外觀刪除它們。

我嘗試使用JavaFX的CSS,但它並沒有因此去。 下面是我的代碼:

.default-color0.chart-series-line { 
    -fx-stroke: #00cc33; 
    -fx-stroke-type: centered;   
    -fx-symbol-visible: false; 
} 

.default-color1.chart-series-line { 

    -fx-stroke: #ffff00; 
    -fx-stroke-type: centered; 
    -fx-symbol-visible: false; 
} 

.default-color2.chart-series-line { 
    -fx-stroke: #cc0000; 
    -fx-stroke-type: centered; 
    -fx-symbol-visible: false; 
} 

.default-color3.chart-series-line{ 
    -fx-stroke-width: 1px; 
    -fx-symbol-visible: true; 
} 

下面是相同的圖形表示:

enter image description here

我不知道我在哪裏出了錯

回答

1

我發現你的問題的解決方案。您可以在圖表上找到所有符號。這些符號是Node(StackPane),所以你可以設置屬性可見。這裏是循環:

//in loop take all series 
for (XYChart.Series<Number, Number> series : lineChart.getData()) { 

    if (series.getName().equals("blue")) //if Name is "blue" then continue 
    continue; 

    //for all series, take date, each data has Node (symbol) for representing point 
    for (XYChart.Data<Number, Number> data : series.getData()) { 
    // this node is StackPane 
    StackPane stackPane = (StackPane) data.getNode(); 
    stackPane.setVisible(false); 
    } 
} 

這裏是代碼示例aplication:

public class Chart extends Application { 

    @Override public void start(Stage stage) { 

    final NumberAxis xAxis = new NumberAxis(); 
    final NumberAxis yAxis = new NumberAxis(); 
    final LineChart<Number, Number> lineChart = new LineChart<Number, Number>(xAxis, yAxis); 

    XYChart.Series series1 = new XYChart.Series(); 
    series1.setName("green"); //i added name to all series, to find easy in loop 
    series1.getData().add(new XYChart.Data(1, 2)); 
    series1.getData().add(new XYChart.Data(2, 2)); 
    series1.getData().add(new XYChart.Data(3, 2)); 
    series1.getData().add(new XYChart.Data(4, 2)); 
    series1.getData().add(new XYChart.Data(5, 2)); 

    XYChart.Series series2 = new XYChart.Series(); 
    series2.setName("yellow"); 
    series2.getData().add(new XYChart.Data(1, 3)); 
    series2.getData().add(new XYChart.Data(2, 3)); 
    series2.getData().add(new XYChart.Data(3, 3)); 
    series2.getData().add(new XYChart.Data(4, 3)); 
    series2.getData().add(new XYChart.Data(5, 3)); 

    XYChart.Series series3 = new XYChart.Series(); 
    series3.setName("red"); 
    series3.getData().add(new XYChart.Data(1, 4)); 
    series3.getData().add(new XYChart.Data(2, 4)); 
    series3.getData().add(new XYChart.Data(3, 4)); 
    series3.getData().add(new XYChart.Data(4, 4)); 
    series3.getData().add(new XYChart.Data(5, 4)); 

    XYChart.Series series4 = new XYChart.Series(); 
    series4.setName("blue"); 
    series4.getData().add(new XYChart.Data(1, 5)); 
    series4.getData().add(new XYChart.Data(2, 5)); 
    series4.getData().add(new XYChart.Data(3, 5)); 
    series4.getData().add(new XYChart.Data(4, 5)); 
    series4.getData().add(new XYChart.Data(5, 5)); 

    HBox hbox = new HBox(); 
    lineChart.getData().addAll(series1, series2, series3, series4); 

    //in loop take all series 
    for (XYChart.Series<Number, Number> series : lineChart.getData()) { 

     if (series.getName().equals("blue")) //if Name is "blue" then continue 
     continue; 

     //for all series, take date, each data has Node (symbol) for representing point 
     for (XYChart.Data<Number, Number> data : series.getData()) { 
     // this node is StackPane 
     StackPane stackPane = (StackPane) data.getNode(); 
     stackPane.setVisible(false); 
     } 
    } 

    hbox.getChildren().addAll(lineChart); 
    Scene scene = new Scene(hbox, 800, 600); 
    scene.getStylesheets().add(getClass().getResource("/resources/chart.css").toExternalForm()); 
    stage.setScene(scene); 
    stage.show(); 
    } 

    public static void main(String[] args) { 
    launch(args); 
    } 
} 

和CSS:

.default-color0.chart-series-line { 
    -fx-stroke: #00cc33; 
    -fx-stroke-type: centered; 
} 

.default-color1.chart-series-line { 

    -fx-stroke: #ffff00; 
    -fx-stroke-type: centered; 
} 

.default-color2.chart-series-line { 
    -fx-stroke: #cc0000; 
    -fx-stroke-type: centered; 
} 

.default-color3.chart-series-line{ 
    -fx-stroke-width: 1px; 
} 

現在是這個樣子: enter image description here

+0

太棒了!我真的很感謝你付出努力......非常感謝你的回來,回答這個:) – Vishal