如何更改散点图中的点大小？

Question

我有这个ScatterChart在JavaFX： 如何设置数据点大小？

我发现它应该在CSS中完成，但即使有docs，我仍然无法弄清楚。

Answer 1

使用

.chart-symbol { 
    -fx-background-radius: 10px ; 
    -fx-padding: 10px ; 
} 

如果你需要这个应用只是一个特定的图表，为图表的ID和使用ID在CSS文件：

chart.setId("bifurcation-diagram"); 

#bifurcation-diagram .chart-symbol { 
    -fx-background-radius: 10px ; 
    -fx-padding: 10px ; 
} 

SSCCE：

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.chart.NumberAxis; 
import javafx.scene.chart.ScatterChart; 
import javafx.scene.chart.XYChart.Data; 
import javafx.scene.chart.XYChart.Series; 
import javafx.stage.Stage; 

public class ScatterChartExample extends Application { 

    @Override 
    public void start(Stage primaryStage) { 

     ScatterChart<Number, Number> chart = new ScatterChart<>(new NumberAxis(), new NumberAxis()); 

     chart.setId("bifurcation-diagram"); 

     Series<Number, Number> series = new Series<>(); 
     chart.getData().add(series); 

     for (int i = 0 ; i <= 100; i++) { 
      double lambda = 4.0 * i/100 ; 
      double x = 0.5 ; 
      for (int j = 0 ; j < 100 ; j++) { 
       x = lambda * x * (1-x); 
      } 
      for (int j = 0 ; j < 50; j++) { 
       series.getData().add(new Data<>(lambda, x)); 
       x = lambda * x * (1-x); 
      } 
     } 

     Scene scene = new Scene(chart, 1200, 800); 
     scene.getStylesheets().add("bifurcation.css"); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 

    } 

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

bifurcation.css：

#bifurcation-diagram .chart-symbol { 
    -fx-background-radius: 10px ; 
    -fx-padding: 10px ; 
} 

如果你想要小点，这似乎并没有很好地工作（我假设，因为它们与图表数据生成的默认节点兼容）。在这种情况下，您可能需要为数据的节点，以及：

for (int i = 0 ; i <= 400; i++) { 
    double lambda = 1.0 * i/100 ; 
    double x = 0.5 ; 
    for (int j = 0 ; j < 100 ; j++) { 
     x = lambda * x * (1-x); 
    } 
    for (int j = 0 ; j < 50; j++) { 
     Data<Number, Number> data = new Data<>(lambda, x); 
     Region plotpoint = new Region(); 
     plotpoint.setShape(new Circle(0.5)); 
     data.setNode(plotpoint); 
     series.getData().add(data); 
     x = lambda * x * (1-x); 
    } 
} 

和CSS

#bifurcation-diagram .chart-symbol { 
    -fx-background-radius: 0; 
    -fx-padding: 1px ; 
} 

Answer 2

如果你想增加所有点的大小，你可以简单地使用下面的CSS：

.chart-symbol { 
    -fx-padding: 10px; 
} 

顺便说一句，这是从JavaFX: Working with JavaFX UI Components (scatter chart section)一个例子：

.default-color5.chart-symbol { 
    -fx-background-color: #860061, white; 
    -fx-background-insets: 0, 2; 
    -fx-background-radius: 5px; 
    -fx-padding: 5px; 
} 

它使一个第五个系列象征一个空心圆。请参阅此样式表中的.default-color<x>与下面提到的CSS参考指南之间的关系 - 这非常简单。

更多详细信息请参见散点图部分的JavaFX CSS Reference Guide。