2016-09-23 57 views
0

我可以更改符号形状,颜色,填充,半径,但我似乎无法找到将更改符号大小的CSS项目。如何更改javafx散点图中图表符号的大小?

我曾经想过,如果我用较小的SVG路径重新创建符号,这可能是一种方法,但是看起来我的较小形状无论如何都会被放大。

我需要更小的符号,但到目前为止还没有找到一种方法来缩放它们。

+0

你好,你需要那样的东西? http://postimg.org/image/fgxpzf3tp/ – BadVegan

+0

@BadVegan是的!你是怎么做到的? –

回答

2

以下是代码和循环,您可以在其中找到所有符号并更改宽度和高度。我只知道这种方式。如果您在CSS中试用此功能,您还将在图表下方更改图例。

public class Chart extends Application { 

    @Override 
    public void start(Stage stage) { 

    //set Axis 
    final NumberAxis xAxis = new NumberAxis(); 
    final NumberAxis yAxis = new NumberAxis(); 

    //chart 
    final ScatterChart<Number, Number> lineChart = new ScatterChart<Number, Number>(xAxis, yAxis); 

    //prepare series 
    XYChart.Series series1 = new XYChart.Series(); 
    series1.getData().add(new XYChart.Data(1, 2)); 
    series1.getData().add(new XYChart.Data(2, 2)); 
    series1.getData().add(new XYChart.Data(3, 1)); 
    series1.getData().add(new XYChart.Data(3, 3)); 
    series1.getData().add(new XYChart.Data(5, 2)); 

    HBox hbox = new HBox(); 
    //add series to chart 
    lineChart.getData().addAll(series1); 

    //take all series 
    for (XYChart.Series<Number, Number> series : lineChart.getData()) { 
     //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.setPrefWidth(50); 
     stackPane.setPrefHeight(50); 
     } 
    } 

    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 wher你可以为这个系列半径

.default-color0.chart-symbol { 
    -fx-background-radius: 30px; 
} 

设置在这个例子中的符号更大 enter image description here

+0

该死的,堆栈窗格大小是关键!谢谢。 –

0

这是我如何在SVG路径中创建一个矩形,再变在CSS中的大小。

.chart-symbol{ 
    -fx-shape: "M 20.0 20.0 v24.0 h 10.0 v-24 Z"; 
    -fx-padding: 7px 7px 7px 7px; 
}