在 JavaFX 中,我使用以下 CSS 添加了折线图边框:
.chart-plot-background
{
-fx-border-color: black;
-fx-border-width: 4px;
-fx-border-insets: -2px;
}
图表如下:
但是,我无法弄清楚如何摆脱边界线中间的蓝色“轴线”。我需要做什么才能使这些 x 和 y 轴线变为黑色或不可见?
最佳答案
确切地知道您希望实现什么有点困难。但总体轮廓如下。希望它能够为您提供有关如何自行修改此类内容的进一步指导,并且您将能够修改它以获得您需要的效果。
背景
检查 modena.css
文件,您可以在 Oracle JDK 8 安装附带的 jfxrt.jar
文件中找到该文件。该文件定义图表的样式。您可以根据需要在您提供的自定义 CSS 样式表中覆盖这些样式。
例如,顶部边框颜色的默认值定义为:
.axis:top {
-fx-border-color: transparent transparent AXIS_COLOR transparent;
}
通过 CSS 控制图表样式
要关闭在图表上绘制轴线,您可以将轴边框颜色的适当值设置为透明
(或null
)。例如:
.axis:top {
-fx-border-color: transparent;
}
此外,您的示例图表具有网格线,这些网格线将绘制在您定义的自定义 chart-plot-background
边框的顶部。为了防止这种情况发生,您还可以使网格线透明。在示例中,我还注释掉了 -fx-border-insets: -2px
值,因为它将边框放置在轴上刻度线的下方,这看起来很奇怪。
CSS 示例
总而言之,示例 CSS 文件类似于以下内容。该图表基于 Oracle sample line chart code .
.chart-plot-background {
-fx-border-color: black;
-fx-border-width: 4px;
/*-fx-border-insets: -2px;*/
}
.axis:top {
-fx-border-color: transparent;
}
.axis:right {
-fx-border-color: transparent;
}
.axis:bottom {
-fx-border-color: transparent;
}
.axis:left {
-fx-border-color: transparent;
}
.chart-vertical-grid-lines {
-fx-stroke: transparent;
}
.chart-horizontal-grid-lines {
-fx-stroke: transparent;
}
使用上述 CSS 绘制时,示例图表如下所示:
关于css - 如何用CSS去掉折线图中的轴线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42373790/