6

我正在尝试设置我的 JavaFX 折线图的样式，但我在图例方面遇到了一些麻烦。

我知道如何更改 css 文件中折线图的图例颜色：

.default-color0.chart-series-line { -fx-stroke: #FF0000, white; }
.default-color1.chart-series-line { -fx-stroke: #00FF00, white; }
.default-color2.chart-series-line { -fx-stroke: #0000FF, white; }

.default-color0.chart-line-symbol { -fx-background-color: #FF0000, white; }
.default-color1.chart-line-symbol { -fx-background-color: #00FF00, white; }
.default-color2.chart-line-symbol { -fx-background-color: #0000FF, white; }

但这对我的目的来说还不够。我有三个或更多彩色切换按钮和每个按钮的一系列数据。选择按钮后，数据应以与按钮相同的颜色显示。这应该可以通过多选按钮来实现，以便可以同时显示多个系列的数据。

对于图表线，我在单击按钮后通过更改样式来管理它：

..
dataList.add(series);
..
series.getNode().setStyle("-fx-stroke: rgba(" + rgba + ")");

如果我取消选择按钮，我会从列表中删除数据。

dataList.remove(series);

这对于笔画来说效果很好，但我怎样才能为图例做同样的事情呢？

您可以在下面看到一个示例。首先我点击了红色按钮，因此笔触和图例是红色的（默认颜色 0）。之后，我单击了蓝色按钮。在这里你可以看到问题。笔划是蓝色的，但图例是绿色的，因为使用了默认颜色 1，我不知道如何更改图例颜色。

在此处输入图像描述

4

4 回答 4

4

我也遇到了这个问题。问题似乎是当数据系列添加到图表时，图例不会同时更新，因此当您查找具有该 seriesN 样式类的组件时，它们还不存在。提出了一种解决方法，可以检测图例项的创建时间，以便可以向它们添加动态样式。

我在图表图例的“getChildrenUnmodifiable()”ObservableList 中添加了一个 ListChangeListener，当图例的每个子项被添加时，它又向每个子项添加一个 ListChangeListener。从这个监听器中，我们可以知道新项目何时被添加到图例中（或删除）。这使我们可以进行动态样式更改。

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
                                }

                            });
                        }
                    }
                }
            });
        }
    }
于 2013-05-01T21:03:21.990 回答
3

为了将来参考，可以通过将相关代码包装在对Platform.runLater(). 例如：

LineChart<Number, Number> plot;
....
Platform.runLater(() -> {
    Node nl = plot.lookup(".default-color0.chart-series-line");
    Node ns = plot.lookup(".default-color0.chart-line-symbol");

    nl.setStyle("-fx-stroke: #333;");
    ns.setStyle("-fx-background-color: #333, white;");
});
于 2017-09-26T21:15:43.043 回答
0

似乎这个人能够使用他们的类查找用于图例的节点，然后在这些节点上调用 setStyle() 。（我认为他的问题与您的问题无关）

于 2013-01-02T16:00:19.767 回答
0

此解决方案基于@Chris 的解决方案

 if (checkCombo.getCheckModel().isChecked(0)) {
    lineChart.getData().add(seriesTest1);
    changeColorSeries(lineChart.getData().size() - 1, "darkgreen");
 }

 if (checkCombo.getCheckModel().isChecked(3)) {
    lineChart.getData().add(seriesTest2);
    changeColorSeries(lineChart.getData().size() - 1, "darkred");
 }

 private void changeColor(int position, String color) {
        Platform.runLater(() -> {
            Node nl = lineChart.lookup(".default-color" + position + ".chart-series-line");
            Node ns = lineChart.lookup(".default-color" + position + ".chart-line-symbol");
            Node nsl = lineChart.lookup(".default-color" + position + ".chart-legend-item-symbol");

            nl.setStyle("-fx-stroke: " + color + ";");
            ns.setStyle("-fx-background-color: " + color + ", white;");
            nsl.setStyle("-fx-background-color: " + color + ", white;");
        });
 }
于 2018-12-22T19:34:22.873 回答