如何移除JavaFX AreaChart的所有边框轴线及底部白线？

我正尝试使用JavaFX实现完全无样式的AreaChart，仅保留图表线条。目前已通过代码和CSS完成大部分设置，但图表底部仍有一条烦人的白线，请问该如何移除？

Java代码示例 #

int maxDataPoints = 200;

NumberAxis xAxis = new NumberAxis(0, maxDataPoints, 10);
xAxis.setForceZeroInRange(false);
xAxis.setAutoRanging(false);
xAxis.setTickLabelsVisible(false);
xAxis.setTickMarkVisible(false);
xAxis.setMinorTickVisible(false);
xAxis.setVisible(false);

NumberAxis yAxis = new NumberAxis(0, 1, 0.1);
yAxis.setTickLabelsVisible(false);
yAxis.setTickMarkVisible(false);
yAxis.setMinorTickVisible(false);
yAxis.setVisible(false);

AreaChart<Number, Number> areaChartAlt = new AreaChart<>(xAxis, yAxis);

areaChartAlt.minHeightProperty().bind(stackPane.heightProperty());

areaChartAlt.setCreateSymbols(false);

areaChartAlt.getXAxis().setVisible(false);
areaChartAlt.getYAxis().setVisible(false);

areaChartAlt.setLegendVisible(false);

stackPane.getChildren().add(areaChartAlt);
StackPane.setAlignment(areaChartAlt, Pos.CENTER);

XYChart.Series<Number, Number> series = new XYChart.Series<>();
for (int i = 0; i < maxDataPoints; i++)
{
    series.getData().add(new XYChart.Data<>(i, 0));
}

ThreadUtils.run(() -> {
    int counter = maxDataPoints;
    while (true)
    {
        ThreadUtils.safeSleep(samplePeriodMs);
        float value = (float) (counter % 100) * 0.01f;
        int finalCounter = counter;
        Platform.runLater(() -> {
            var data = series.getData().remove(0);
            series.getData().add(new XYChart.Data<>(finalCounter, value));
            xAxis.setLowerBound(data.getXValue().intValue() + 1);
            xAxis.setUpperBound(finalCounter + 1);
        });
        counter++;
    }
});

areaChartAlt.getData().add(series);

stackPane.setPadding(Insets.EMPTY);

borderPane.setCenter(stackPane);
BorderPane.setAlignment(stackPane, Pos.CENTER);

CSS代码示例（初始版本） #

.chart {
    -fx-padding: 0px;
    -fx-background-color: transparent;
    -fx-legend-visible: false;
    -fx-border-color: transparent;
    -fx-grid-lines-visible: false;
    -fx-horizontal-grid-lines-visible: false;
    -fx-vertical-grid-lines-visible: false;
    -fx-minor-tick-visible: false;
}

.chart-content {
    -fx-padding: 0px;
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-border-width: 0px;
}

.chart-plot-background {
    -fx-background-color: transparent;
}

.axis {
    -fx-side: null;
}

解决方法 #

在.chart选择器中添加-fx-border-width: 0;样式，即可移除底部的白线。修改后的完整.chart选择器如下：

.chart {
    -fx-padding: 0px;
    -fx-background-color: transparent;
    -fx-legend-visible: false;
    -fx-border-color: transparent;
    -fx-border-width: 0;
    -fx-grid-lines-visible: false;
    -fx-horizontal-grid-lines-visible: false;
    -fx-vertical-grid-lines-visible: false;
    -fx-minor-tick-visible: false;
}

验证结果 #

添加上述样式后，底部的白线已成功移除，AreaChart仅保留了图表线条，实现了完全无样式的需求。

内容的提问来源于stack exchange，提问作者ptan9o