JavaFX LineChart 动态改变图例颜色

Question

这个问题已经有答案了:

JavaFX BarChart, Set Series Color by Series Name (1 个回答)

已关闭 5 年前。

此帖子已于 7 个月前编辑并提交审核，但未能重新打开帖子:

原始关闭原因未解决

我正在尝试动态更改图例的颜色，因此我的 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;");
      }
   }
}

希望这也适用于搜索此内容的任何人。

编辑给版主:这被标记为重复，但这个问题主要是关于 LineChart 的图例，因为尽管系列颜色正在变化，但它们没有按应有的方式更新。重复的问题只是关于更改系列的颜色。这个问题是关于这些元素的传说。

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);
    }
}

如果您想要更多的控制(也许还需要更多的稳健性)，请定义您自己的查找颜色，然后修改它们。 IE。在外部 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))); 
}