如何摆脱CSS线形图中的轴线?

时间:2017-02-21 17:14:38

标签: css javafx

在JavaFX中,我使用以下CSS为LineChart添加了边框:

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

图表看起来像:

image

然而,我不能弄清楚如何摆脱蓝色"轴"边界线中间的线条。我需要做些什么才能使这些x和y轴线变黑或不可见?

1 个答案:

答案 0 :(得分:2)

要确切了解您希望实现的目标有点困难。但总体概述如下。希望它能为您提供有关如何自行修改此类内容的进一步指导,并且您将能够对其进行修改以获得您所需的效果。

背景

检查您在Oracle JDK 8安装附带的modena.css文件中可以找到的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,示例图表如下所示:

portfolio