java - 如何使用散点图 JavaFX 将符号变成圆形?
问题描述
我想建造巴黎地铁,所以我需要用正确的颜色将所有车站显示为一个圆圈。这是我得到的:显示的所有电台。但是,我希望所有符号都是圆圈,但我找不到怎么做。下面是我的代码:
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;");
}
}
这是我用来显示一行的功能,但是当我想显示多行时,符号不再是圆圈了。有人有想法吗?谢谢你。
解决方案
这是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
。
推荐阅读
- javascript - 制作非常简单的应用程序,包括前端和后端技能(js、node.js、psql、react...)
- python - 从()中提取特定信息的最简单方法是什么?
- android - 如何打开 Native Android App 中的数据并将其传递给 Flutter Android App?
- android - Android 应用:用户通过 Intent.ACTION_GET_CONTENT 选择 CSV 文件。然后如何将此 CSV 文件导入到 sqlite 数据库表中?
- reactjs - 有没有办法使用 axios 将图像上传到 Firebase 并从中加载?
- python - 如何在 Python 中根据需要编写文件段落?
- python - 在没有 Jupyter Notebook 的情况下使用 Kepler GL
- android - 如何修复找不到以下类:-android.support.design.widget.BottomNavigationView
- java - 发送发布请求抛出 500 内部错误
- swiftui - AppDelegate 和 ContentView() 之间的 SwiftUI 通信