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

Question

我有这个 ScatterChart 用 JavaFX 制作的：如何设置数据点大小？

我发现应该在CSS中完成，但即使有了docs，我还是想不通。

Answer 1

如果你想增加所有点的大小，你可以简单地使用以下 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 的散点图部分找到更多详细信息。

Answer 2

使用

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

如果您只需要将其应用于特定图表，请为图表指定一个 ID 并在 CSS 文件中使用该 ID：

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 ;
}

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

How to change point size in Scatter Chart?

java

css

javafx

plot

scatter-plot