Как превратить символы в круг, используя диаграмму рассеяния 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

Вот стиль по умолчанию CSS для символов ScatterChart:

.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.