如何使用散点图 JavaFX 将符号转换为圆形?

Question

我想建造巴黎地铁，所以我需要将所有车站显示为具有正确颜色的圆圈。这是我得到的：显示的所有电台。但是，我希望所有符号都是圆圈，但我找不到该怎么做。以下是我的代码：

public static void setChartsAndLegend(Color color, ScatterChart<Number, Number> sc, int size) {
String colorHex = "#"+Integer.toHexString(color.getRGB()).substring(2);
String blackHex = "#"+Integer.toHexString(Color.BLACK.getRGB()).substring(2);
int metroSize = 3*size;
int hubSize = 4*size;
String metroSizeString = String.valueOf(metroSize);
String hubSizeToString = String.valueOf(hubSize);
Set<Node> nodes = sc.lookupAll(".series" + 0);
for (Node n : nodes) {
n.setStyle("-fx-background-color: " + colorHex + ";n"
+ "    -fx-background-insets: 0, 2;n"
+ "    -fx-background-radius: " + metroSizeString + "px;n"
+ "    -fx-padding: " + metroSizeString + "px;");
}
nodes = sc.lookupAll(".series" + 1);
for (Node n : nodes) {
n.setStyle("-fx-background-color: " + blackHex + ", white;n"
+ "    -fx-background-insets: 0, 2;n"
+ "    -fx-background-radius: " + hubSizeToString + "px;n"
+ "    -fx-padding: " + hubSizeToString + "px;");
}
}

这是我用来显示一条线的功能，但是当我想显示几条线时，符号不再是圆圈了。有人有想法吗？谢谢。

Answer 1

以下是ScatterChart符号的默认 CSS 样式：

.chart-symbol { /* solid circle */
-fx-background-color: CHART_COLOR_1;
-fx-background-radius: 5px;
-fx-padding: 5px;
}
.default-color1.chart-symbol { /* solid square */
-fx-background-color: CHART_COLOR_2;
-fx-background-radius: 0;
}
.default-color2.chart-symbol { /* solid diamond */
-fx-background-color: CHART_COLOR_3;
-fx-background-radius: 0;
-fx-padding: 7px 5px 7px 5px;
-fx-shape: "M5,0 L10,9 L5,18 L0,9 Z";
}
.default-color3.chart-symbol { /* cross */
-fx-background-color: CHART_COLOR_4;
-fx-background-radius: 0;
-fx-background-insets: 0;
-fx-shape: "M2,0 L5,4 L8,0 L10,0 L10,2 L6,5 L10,8 L10,10 L8,10 L5,6 L2,10 L0,10 L0,8 L4,5 L0,2 L0,0 Z";
}
.default-color4.chart-symbol { /* solid triangle */
-fx-background-color: CHART_COLOR_5;
-fx-background-radius: 0;
-fx-background-insets: 0;
-fx-shape: "M5,0 L10,8 L0,8 Z";
}
.default-color5.chart-symbol { /* hollow circle */
-fx-background-color: CHART_COLOR_6, white;
-fx-background-insets: 0, 2;
-fx-background-radius: 5px;
-fx-padding: 5px;
}
.default-color6.chart-symbol { /* hollow square */
-fx-background-color: CHART_COLOR_7, white;
-fx-background-insets: 0, 2;
-fx-background-radius: 0;
}
.default-color7.chart-symbol { /* hollow diamond */
-fx-background-color: CHART_COLOR_8, white;
-fx-background-radius: 0;
-fx-background-insets: 0, 2.5;
-fx-padding: 7px 5px 7px 5px;
-fx-shape: "M5,0 L10,9 L5,18 L0,9 Z";
}

您需要做的就是使它们看起来像.chart-symbol：

.chart-symbol {
-fx-background-color: CHART_COLOR_1;
-fx-background-radius: 5px;
-fx-padding: 5px;
}
.default-color1.chart-symbol {
-fx-background-color: CHART_COLOR_2;
-fx-background-radius: 5px;
-fx-padding: 5px;
-fx-shape: null;
}
.default-color2.chart-symbol {
-fx-background-color: CHART_COLOR_3;
-fx-background-radius: 5px;
-fx-padding: 5px;
-fx-shape: null;
}
.default-color3.chart-symbol {
-fx-background-color: CHART_COLOR_4;
-fx-background-radius: 5px;
-fx-padding: 5px;
-fx-shape: null;
}
.default-color4.chart-symbol {
-fx-background-color: CHART_COLOR_5;
-fx-background-radius: 5px;
-fx-padding: 5px;
-fx-shape: null;
}
.default-color5.chart-symbol {
-fx-background-color: CHART_COLOR_6;
-fx-background-radius: 5px;
-fx-padding: 5px;
-fx-shape: null;
}
.default-color6.chart-symbol {
-fx-background-color: CHART_COLOR_7;
-fx-background-radius: 5px;
-fx-padding: 5px;
-fx-shape: null;
}
.default-color7.chart-symbol {
-fx-background-color: CHART_COLOR_8;
-fx-background-radius: 5px;
-fx-padding: 5px;
-fx-shape: null;
}

如果您希望它们都具有相同的颜色，则可以在-fx-background-color中给出您喜欢的颜色。