JavaFX LineChart的XYChart.Series数据点颜色、大小无法设置问题

问题核心原因 #

你的代码失效主要有三个原因：

1. 选择器语法错误：你使用的.series0.chart-line-symbol没有空格，含义是匹配同时带有series0和chart-line-symbol两个类的同一节点，而实际chart-line-symbol是series0类节点的子元素，正确选择器应该是.series0 .chart-line-symbol（中间加空格）。
2. 节点查找时机错误：JavaFX的样式节点是在组件被添加到场景图、完成CSS布局渲染后才会生成，你在刚添加完数据就执行lookup操作，此时数据点对应的symbol节点还没有被创建，lookup会返回null，样式自然不会生效。
3. lookup方法匹配范围错误：lookup()方法仅返回第一个匹配的节点，而每个数据点都对应一个独立的symbol节点，就算前两个问题修复，也只能修改第一个数据点的样式，其余点不会生效。

解决方案 #

方案1：调整查找逻辑+延迟执行 #

使用Platform.runLater让样式修改逻辑在场景图渲染完成后执行，同时用lookupAll()获取所有匹配的symbol节点遍历修改，修改symbol大小需要调整-fx-padding属性（该属性控制symbol的尺寸，默认值为4px）：

import javafx.application.Platform;
import javafx.scene.Node;
import java.util.Set;

// ...你的原有代码...

// 样式修改逻辑放到Platform.runLater中
Platform.runLater(() -> {
    // 修改normalSeries（series0）所有数据点样式
    Set<Node> series0Symbols = myChart.lookupAll(".series0 .chart-line-symbol");
    for (Node symbol : series0Symbols) {
        symbol.setStyle("-fx-background-color: black, black; -fx-background-radius: 1px; -fx-padding: 1px;");
    }
    // 修改anomalySeries（series1）所有数据点样式
    Set<Node> series1Symbols = myChart.lookupAll(".series1 .chart-line-symbol");
    for (Node symbol : series1Symbols) {
        symbol.setStyle("-fx-background-color: red, red; -fx-padding: 3px;");
    }
});

方案2：创建数据时直接绑定样式（更稳定） #

不需要依赖节点查找，在创建XYChart.Data时监听节点生成事件，节点创建完成后直接绑定样式，不受渲染时机影响：

// 给normalSeries添加数据时直接绑定样式
for(int i=0;i<len;i++){
    XYChart.Data<Number, Number> data = new XYChart.Data<>(xValues.get(i),yValues.get(i));
    // 监听数据节点生成
    data.nodeProperty().addListener((obs, oldNode, newNode) -> {
        if (newNode != null) {
            newNode.setStyle("-fx-background-color: black, black; -fx-background-radius: 1px; -fx-padding: 1px;");
        }
    });
    normalSeries.getData().add(data);
}

// 给anomalySeries添加数据时直接绑定样式
for(int i=0;i<len;i++){
    XYChart.Data<Number, Number> data = new XYChart.Data<>(pointsX.get(i),pointsY.get(i));
    data.nodeProperty().addListener((obs, oldNode, newNode) -> {
        if (newNode != null) {
            newNode.setStyle("-fx-background-color: red, red; -fx-padding: 3px;");
        }
    });
    anomalySeries.getData().add(data);
}

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