使折线图上的标记透明。 javafx

Question

我在折线图上显示数据。使用 GUI，我正在添加新数据，并且需要添加新数据系列。我还需要新数据系列具有透明符号。如果不这样做，就会出现下面的画面：

数据系列是动态添加的，我不知道是否可以以某种方式将 css 样式应用于这些数据系列。

到目前为止我想出的唯一解决方案是每次更改图表时创建一个新的 CSS 文件，其中将为每种颜色写入透明度属性：

/* Remove data series points */
.default-color0.chart-line-symbol {
    -fx-background-color: transparent;
}
/* Remove data series lines */
.default-color1.chart-series-line {
    -fx-stroke: transparent;
}
/* Remove data series lines */
.default-color2.chart-series-line {
    -fx-stroke: transparent;
}

Answer 1

使用纯css，你可以添加.chart-series-line { -fx-stroke: transparent; }，然后你可以用.default-color0.chart-series-line { -fx-stroke: CHART_COLOR_1; }.

修改第一个系列的笔触到它原来的颜色

.chart-series-line {
    -fx-stroke: transparent;
}

.default-color0.chart-series-line {
    -fx-stroke: CHART_COLOR_1;
}

.default-color0.chart-line-symbol {
    -fx-background-color: transparent;
}

或者，您可以通过编程方式将侦听器添加到图表系列 ObservableList。当收到更改通知时，您可以遍历系列并使用查找 css 选择器 .chart-series-line 找到行 Node。最后可以设置节点样式-fx-stroke: transparent;.

假设第一个系列（series1）始终停留在图表中，这里是示例代码：

chart.getData().add(series1);

chart.getData().addListener((ListChangeListener<XYChart.Series>) c -> {
    while (c.next()) {
        if (c.wasAdded()) {
            c.getAddedSubList().stream()
                    .map(series -> series.getNode().lookup(".chart-series-line"))
                    .forEach(node -> node.setStyle("-fx-stroke: transparent;"));
        }
    }
});

使折线图上的标记透明。 javafx

Make the markers on the LineChart transparent. javafx

css

java

javafx