如何在線圖區域內顯示圖例

Question

我想在線圖圖形區域內顯示圖例。默認傳說顯示基於Side.RIGHT圖表繪圖區外，Side.LEFT等參數被傳遞給chart.setLegendSide（側面），如下面的例子： -

import javafx.application.Application; 
import javafx.geometry.Side; 
import javafx.scene.Scene; 
import javafx.scene.chart.CategoryAxis; 
import javafx.scene.chart.LineChart; 
import javafx.scene.chart.NumberAxis; 
import javafx.scene.chart.XYChart; 
import javafx.stage.Stage; 


public class LineChartSample extends Application { 

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

     lineChart.setTitle("Graph Example"); 

     lineChart.setLegendSide(Side.RIGHT); 

     XYChart.Series series1 = new XYChart.Series(); 
     series1.setName("Legend 1"); 
     series1.getData().add(new XYChart.Data("Jan", 23)); 
     series1.getData().add(new XYChart.Data("Feb", 14)); 
     series1.getData().add(new XYChart.Data("Mar", 15)); 
     series1.getData().add(new XYChart.Data("Apr", 24)); 
     series1.getData().add(new XYChart.Data("May", 34)); 
     series1.getData().add(new XYChart.Data("Jun", 36)); 


     XYChart.Series series2 = new XYChart.Series(); 
     series2.setName("Legend 2"); 
     series2.getData().add(new XYChart.Data("Jul", 55)); 
     series2.getData().add(new XYChart.Data("Aug", 54)); 
     series2.getData().add(new XYChart.Data("Sep", 48)); 
     series2.getData().add(new XYChart.Data("Oct", 27)); 
     series2.getData().add(new XYChart.Data("Nov", 37)); 
     series2.getData().add(new XYChart.Data("Dec", 29)); 
     Scene scene = new Scene(lineChart,800,600);  
     lineChart.getData().addAll(series1, series2); 

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

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

我找不到的方式展現圖表區域內的傳說。在大多數我本來2-3的傳說和使用Java 8

謝謝

Answer 1

我不認爲有任何清潔的方式做到這一點。我拿出你的setLegendSide後stage.show()

for (Node n : lineChart.lookupAll(".chart-legend")) { 
     n.setTranslateY(-200); 
    } 

加入這一場景展示，您可以「查找」在場景中的節點後。我找到了傳說（由它的CSS名），將其向上200

您還可以在一個CSS文件翻譯傳說

.chart-legend{ 
    -fx-translate-y: -200; 
} 

只是一個CSS文件添加到您的場景（像這樣，如果它是在同一個包中）。

scene.getStylesheets().add(this.getClass().getResource("css.css").toExternalForm()); 

這仍留在圖下的空間，所以它不是完美的。我注意到你可以添加這個css來給chart-content更多空間

.chart .chart-content{ 
    -fx-padding: 5 5 -25 5; 
}