2017-07-25 109 views
1

我想繪製javafx中的峯值圖,但沒有一個類能完成我的目標。所以我修改了「LineChart」作爲我的「峯值地圖」,它看起來像that。但是我想將X軸移動到0的比例(Y軸),我能做些什麼來實現它。順便說一下,如果你有更好的方法來實現「峯值地圖」,請給我一些建議。如何繪製javafx中的峯值圖

謝謝!

public void start(Stage stage) { 
     stage.setTitle("Line Chart Sample"); 
     final NumberAxis xAxis = new NumberAxis(); 
     final NumberAxis yAxis = new NumberAxis(); 
     xAxis.setLabel("X"); 
     yAxis.setLabel("Y"); 
     final LineChart<Number, Number> lineChart = new LineChart<>(xAxis, yAxis); 

     lineChart.setTitle("Peak Map"); 

     XYChart.Series<Number, Number> series1 = new XYChart.Series<>(); 
     series1.setName("Portfolio 1"); 

     series1.getData().add(new XYChart.Data<Number, Number>(1, 0)); 
     series1.getData().add(new XYChart.Data<Number, Number>(1, 14)); 

     XYChart.Series<Number, Number> series2 = new XYChart.Series<>(); 
     series2.setName("Portfolio 2"); 
     series2.getData().add(new XYChart.Data<Number, Number>(2, 0)); 
     series2.getData().add(new XYChart.Data<Number, Number>(2, 34)); 

     XYChart.Series<Number, Number> series3 = new XYChart.Series<>(); 
     series3.setName("Portfolio 3"); 
     series3.getData().add(new XYChart.Data<Number, Number>(3, 0)); 
     series3.getData().add(new XYChart.Data<Number, Number>(3, 35)); 

     XYChart.Series<Number, Number> series4 = new XYChart.Series<>(); 
     series4.setName("Protfolio 4"); 
     series4.getData().add(new XYChart.Data<>(2, 0)); 
     series4.getData().add(new XYChart.Data<>(2, -8)); 

     Scene scene = new Scene(lineChart, 800, 600); 
     lineChart.getData().addAll(series1, series2, series3, series4); 

     lineChart.setCreateSymbols(false); 
     lineChart.setLegendVisible(false); 

     stage.setScene(scene); 
     stage.show(); 
    } 
+2

什麼是峯值圖?你有鏈接到解釋它的東西嗎? – jewelsea

+1

我很抱歉,我無法給你一個確切的定義,因爲它更像是一個自定義圖形。但它看起來像[https://i.stack.imgur.com/cmvys.png](https://i.stack.imgur.com/cmvys.png)。在圖中,像(x1,y1)這樣的每個點確定從(x1,0)到(x1,y1)的直線, – huangjs

回答

1

我玩了一下你的代碼。你期待這樣的結果嗎? enter image description here

警告:這真的很棘手的解決方案。

查找零水平線對象和移動xAxis到這個位置:

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

    final ObservableList<Node> lineChildren = lineChart.getChildrenUnmodifiable(); 
    final Optional<Node> chartContent = lineChildren 
      .stream() 
      .filter(node -> node.getStyleClass().contains("chart-content")) 
      .findFirst(); 

    if (chartContent.isPresent()) { 
     final Optional<Node> xyChart = ((Parent)chartContent.get()) 
       .getChildrenUnmodifiable() 
       .stream() 
       .filter(node -> node.getStyleClass().isEmpty()) 
       .findFirst(); 

     if (xyChart.isPresent()) { 
      final Optional<Node> xAxisOrigin = ((Parent) xyChart.get()) 
        .getChildrenUnmodifiable() 
        .stream() 
        .filter(node -> node.getStyleClass().contains("chart-horizontal-zero-line")) 
        .findFirst(); 

      if (xAxisOrigin.isPresent()) { 
       final Line node = (Line) xAxisOrigin.get(); 
       Platform.runLater(() -> { 
        xAxis.setTranslateY(-(xAxis.getLayoutY() - node.getEndY())); 
       }); 
      } 
     } 
    } 

至於我的X和Y標籤可在全部去掉。

注意:我們需要處理窗口大小調整事件動態地移動xAxis