Question

我正在尝试动态更改图例的颜色，所以我的css类中没有任何线条和符号样式。我可以动态地更改图表中的所有行和符号，但不能遗憾地改变图例。他们保持默认。有没有办法动态地做到这一点？

所以，我试过的：

1）

for (int index = 0; index < series.getData().size(); index++) {
    XYChart.Data dataPoint = series.getData().get(index);
    Node lineSymbol = dataPoint.getNode().lookup(".chart-legend");
    lineSymbol.setStyle("-fx-background-color: #00ff00, #000000; -fx-background-insets: 0, 2;\n" +
            "    -fx-background-radius: 3px;\n" +
            "    -fx-padding: 3px;");
}

根据下面的caspian.css和链接的问题，这应该可行，但它给了我 NullPointerException ，因为无法找到.chart-legend，即使它在那里。

2）

for (Node n : lineChart.getChildrenUnmodifiable())
{
    if (n instanceof Legend)
    {
        final Legend legend = (Legend) n;

        // remove the legend
        legend.getChildrenUnmodifiable().addListener(new ListChangeListener<Object>()
        {
            @Override
            public void onChanged(Change<?> arg0)
            {
                for (Node node : legend.getChildrenUnmodifiable())
                {
                    if (node instanceof Label)
                    {
                        final Label label = (Label) node;
                        label.getChildrenUnmodifiable().addListener(new ListChangeListener<Object>()
                        {
                            @Override
                            public void onChanged(Change<?> arg0)
                            {
                                //make style changes here
                            }

                        });
                    }
                }
            }
        });
    }
}

这也没有做任何事情，并且像地狱一样放慢了程序。

第3）

   int index = 2;
Platform.runLater(new Runnable() {
    @Override
    public void run() {
        myChart.lookupAll(".chart-legend-item-symbol").toArray()[index].setStyle("-fx-border-color: rgba(200,0,0,1)");
}});

这要么没有做任何事情。

任何帮助都会得到满足。

我看了所有这些，但他们没有帮助：

JavaFX StackedBarChart legend color don't follow chart color CSS styled

JavaFX 2.0 - How to change legend color of a LineChart dynamically?

JavaFX LineChart legend style

编辑：这是我找到的解决方案

这对我没有任何影响，我找到了另一个解决方案。无论是答案还是Platform.runLater方法。

XYChart.Series<Number,Number> value  //is our serie value.

for(int index = 0; index<value.getData().size(); index++){
    // we're looping for each data point, changing the color of line symbol
    XYChart.Data dataPoint = value.getData().get(index);
    Node lineSymbol = dataPoint.getNode().lookup(".chart-line-symbol");
    lineSymbol.setStyle("-fx-background-color: #0000FF, white;");
}
// and this is for the color of the line
value.getNode().setStyle("-fx-border-style: solid; -fx-stroke: #0000FF; -fx-background-color: #0000FF;");

对于图例颜色更改：

for(Node n : chart.getChildrenUnmodifiable()){
   if(n instanceof Legend){
      for(Legend.LegendItem legendItem : ((Legend)n).getItems()){
        legendItem.getSymbol().setStyle("-fx-background-color: #0000ff, white;");
      }
   }
}

希望这适用于任何寻找此事的人。

Answer 1

我只是更改查找的颜色名称CHART_COLOR_x，其中x是该系列的（从1开始）索引。

即。只是做

chart.setStyle("CHART_COLOR_1: #ff0000 ; CHART_COLOR_2: #0000FF ;");

将第一个系列（线，点和图例）的颜色设置为红色，将第二个系列的颜色设置为蓝色。

这是一个SSCCE：

import java.util.Random;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.geometry.Insets;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.scene.control.ColorPicker;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class DynamicLinechart extends Application {

    @Override
    public void start(Stage primaryStage) {
        LineChart<Number, Number> chart = new LineChart<>(new NumberAxis(), new NumberAxis());

        Series<Number, Number> series1 = new Series<>();
        series1.setName("Data set 1");

        Series<Number, Number> series2 = new Series<>();
        series2.setName("Data set 2");

        chart.getData().add(series1);
        chart.getData().add(series2);

        Random rng = new Random();
        for (int i = 0 ; i <= 20 ; i++) {
            series1.getData().add(new Data<>(i, rng.nextInt(100)));
            series2.getData().add(new Data<>(i, rng.nextInt(100)));
        }

        ColorPicker picker1 = new ColorPicker();
        ColorPicker picker2 = new ColorPicker();

        ChangeListener<Color> listener = (obs, oldColor, newColor) -> 
            updateStyles(chart, picker1.getValue(), picker2.getValue());

        picker1.valueProperty().addListener(listener);
        picker2.valueProperty().addListener(listener);

        picker1.setValue(Color.RED);
        picker2.setValue(Color.BLUE);

        BorderPane root = new BorderPane(chart);
        HBox controls = new HBox(5, picker1, picker2);
        controls.setPadding(new Insets(5));

        root.setTop(controls);

        Scene scene = new Scene(root);

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private void updateStyles(Node node, Color color1, Color color2) {
        node.setStyle(String.format("CHART_COLOR_1: %s ; CHART_COLOR_2: %s ;", format(color1), format(color2))); 
    }

    private String format(Color c) {
        int r = (int) (255 * c.getRed()) ;
        int g = (int) (255 * c.getGreen()) ;
        int b = (int) (255 * c.getBlue()) ;

        return String.format("#%02x%02x%02x", r, g, b);
    }

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

如果你想要更多的控制（也许更强大一些），定义你自己的查找颜色，并修改它们。即在外部CSS文件中，执行类似

的操作

.root {
    -data-color-1: red ;
    -data-color-2: blue ;
}
.default-color0.chart-line-symbol { -fx-background-color: -data-color-1, white; }
.default-color1.chart-line-symbol { -fx-background-color: -data-color-2, white; }
.default-color0.chart-series-line { -fx-stroke: -data-color-1; }
.default-color1.chart-series-line { -fx-stroke: -data-color-2; }

现在只需更新您定义的查找颜色的值：

private void updateStyles(Node node, Color color1, Color color2) {
    node.setStyle(String.format("-data-color-1: %s ; -data-color-2: %s ;", format(color1), format(color2))); 
}

JavaFX LineChart动态更改图例颜色

1 个答案: