Question

我正在尝试设置我的JavaFX线图，但找不到任何方法将颜色设置为特定系列。我知道，我可以通过CSS设置样式，但是我找不到如何将ID或CLASS设置为我的系列。

任何人都可以给我一个线索：

如何将颜色设置为折线图？
如何将css类设置为系列？

Answer 1

一般来说，样式图表的首选方式是没有代码，只使用jschoen推荐的css样式表。此外，如果需要进一步自定义，您可以使用代码中的css查找来深入挖掘从系列数据生成的节点，并应用各种额外的CSS样式。

以下是有关动态更改JavaFX line chart style和sample program以获得答案的信息。在示例应用程序中，所有额外的css样式都是通过代码中的setStyle调用完成的。使用类似的查找技术，您可以访问系列节点以应用适当的样式表样式而不是setStyle调用。

Answer 2

如何将颜色设置为折线图？

这是 AreaChart 或 LineChart

的简单方法

XYChart chart = new AreaChart();
Series series = new Series();
chart.getData().add(series);

Node fill = series.getNode().lookup(".chart-series-area-fill"); // only for AreaChart
Node line = series.getNode().lookup(".chart-series-area-line");

Color color = Color.RED; // or any other color

String rgb = String.format("%d, %d, %d",
        (int) (color.getRed() * 255),
        (int) (color.getGreen() * 255),
        (int) (color.getBlue() * 255));

fill.setStyle("-fx-fill: rgba(" + rgb + ", 0.15);");
line.setStyle("-fx-stroke: rgba(" + rgb + ", 1.0);");

Answer 3

我在Styling charts with CSS上找到了这个Oracle文档，并在该页面上向下滚动到Setting Chart Colors，了解您的具体内容。

如何将颜色设置为折线图？

最简单的方法是以下CSS代码段：

.default-color0.chart-series-line { -fx-stroke: #e9967a; }
.default-color1.chart-series-line { -fx-stroke: #f0e68c; }
.default-color2.chart-series-line { -fx-stroke: #dda0dd; }

遗憾的是，这不适用于id或哪个系列，而是系列放置在图表中的顺序。您也可以通过执行以下操作来设置线条样式：

.chart-series-line {    
    -fx-stroke-width: 2px;
    -fx-effect: null;
}

如何将css类设置为系列？

不幸的是我没有办法做到这一点。能够基于XYChart.Series名称属性创建CSS规则会很高兴，但我认为这不可行。

Answer 4

jewelsea的回答似乎表明你必须在该系列的每个节点上放置一个样式类。我正在使用以下代码来设置区域图系列的样式，并仅将类分配给与该系列关联的节点。示例代码在Scala中，但应该很容易翻译。

创建系列时，我添加了一个特定于系列的样式类：

        val s = new XYChart.Series[Number, Number]()   //create a new series
        s.setName(seriesName)                          //set its name (display in legend)
        s.getNode.getStyleClass.add("series-" + seriesName)  //add specific style class

然后在css - 文件中我执行以下操作来更改系列'butterwings'的填充颜色：

.series-butterwings *.chart-series-area-fill{
    -fx-fill: #aab597; 
}

这是有效的，因为系列区域的节点在系列节点下面（在面积图的情况下是一个组）。

Answer 5

要将 getNode() 放置在代码中的某处可能会导致 NullPointerException，请覆盖 XYChart（AreaChart、BarChart、BubbleChart、LineChart、ScatterChart、StackedAreaChart、StackedBarChart）中的 layoutPlotChildren() 抽象方法。无需使用 CSS 样式表即可更改线条和形状的最小图表示例：

public class MyChart extends LineChart {

Series s1;

public MyChart() {
    this(new NumberAxis(), new NumberAxis());
    this.getXAxis().setLabel("X");
    this.getYAxis().setLabel("Y");
}

public MyChart(Axis axis, Axis axis1) {
    super(axis, axis1);
    s1 = new XYChart.Series();
    getData().add(s1);
}

public void adddata() {
    s1.setName("Demo");
    s1.getData().add(new XYChart.Data(0, 1));
    s1.getData().add(new XYChart.Data(1, 2));        
    s1.getData().add(new XYChart.Data(2, 0));
    s1.getData().add(new XYChart.Data(3, 1));
}

// Override the abstract class
public void layoutPlotChildren() {
    // call super so you don't have to do all the work
    super.layoutPlotChildren();
    // not really necessary check
    if (s1 != null && s1.getNode() != null) {
        //(optional) get all the possible CSS styles you can change
        List<String> styles = s1.getNode().getStyleClass();
        //get the line from the series
        Node line = s1.getNode().lookup(".chart-series-line");
        //set some styles
        line.setStyle("-fx-stroke: black; -fx-stroke-width: 1px; -fx-effect: null; -fx-stroke-dash-array: 10 10 10 10;");
        //change the shapes
        for (Object data : s1.getData()) {
            if (data != null) {
                //only display the last data point, change the style same way as shown with the line
                if (s1.getData().indexOf(data) != s1.getData().size()-1) {
                    StackPane stackPane = (StackPane) ((XYChart.Data) data).getNode();
                    stackPane.setVisible(false);
                }
            }
        }
    }

}

}

以及启动它的执行代码：

public class RunJavaFX extends Application {

public static void main(String[] args) {
    launch(args);
}

@Override
public void start(Stage primaryStage) throws Exception {
    MyChart chart = new MyChart();
    chart.adddata();
    Scene scene = new Scene(chart);
    primaryStage.setScene(scene);
    primaryStage.show();
}

}

如何为JavaFX XYChart.Series设置特定颜色？

5 个答案: