css - 如何使用 CSS 去掉折线图中的轴线？

Question

在 JavaFX 中，我使用以下 CSS 向折线图添加了边框:

.chart-plot-background 
{
-fx-border-color: black;
-fx-border-width: 4px;
-fx-border-insets: -2px;
}

图表看起来像:

但是，我不知道如何去掉边界线中间的蓝色“轴线”。我需要做什么才能使这些 x 和 y 轴线变为黑色或不可见？

Answer 1

确切地知道您希望实现什么有点困难。但是下面是一个大纲。希望它能为您提供有关如何自己修改此类内容的进一步指导，并且您将能够修改它以获得您需要的效果。

背景

检查 modena.css 文件，您可以在 Oracle JDK 8 安装附带的 jfxrt.jar 文件中找到该文件。该文件定义图表的样式。您可以根据需要在您提供的自定义 CSS 样式表中覆盖这些样式。

例如，顶部边框颜色的默认值定义为:

.axis:top {
    -fx-border-color: transparent transparent AXIS_COLOR transparent;
}

通过 CSS 控制图表样式

要关闭在图表上绘制轴线，您可以将轴边框颜色的适当值设置为transparent(或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，示例图表如下所示: