如何使用散点图 JavaFX 将符号变成圆形？

Question

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

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中给出你喜欢的颜色。