JavaFX 2.0-如何动态更改LineChart的图例颜色? [英] JavaFX 2.0 - How to change legend color of a LineChart dynamically?

问题描述

我正在尝试设置JavaFX线图的样式，但图例有一些麻烦.

I am trying to style my JavaFX linechart but I have some trouble with the legend.

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

I know how to change the legend color of a line chart in the css file:

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

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

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

But this is not enough for my purposes. I have three or more colored toggle buttons and a series of data for every button. The data should be displayed in the same color the button has after I have selected the button. This should be possible with a multiselection of the buttons, so that more than one series of data can be displayed simultaneously.

对于图表线，我通过单击按钮后更改样式来对其进行管理:

For the chart lines I have managed it by changing the style after I clicked the button:

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

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

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

If I deselect the button I remove the data from the list.

dataList.remove(series);

对于笔画来说这很好用，但是我如何为图例做同样的事情?

That is working fine for the strokes, but how can I do the same for the legend?

您可以在下面看到一个示例.首先，我单击了红色按钮，因此笔触和图例为红色(default-color0).之后，我单击了蓝色按钮.在这里您可以看到问题.笔触为蓝色，但图例为绿色，因为使用了默认的color1，我不知道如何更改图例的颜色.

You can see an example below. First I clicked the red button, thus the stroke and the legend is red (default-color0). After that I clicked the blue button. Here you can see the problem. The stroke is blue but the legend is green, because default color1 is used and I do not know how to change the legend color.

推荐答案

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

I ran into this issue as well. The issue seems to be that when data series are added to the chart, the legend isn't updated at the same time, so when you lookup components with that seriesN style class they don't exist yet. Came up with a work-around that detects when the legend items are created so that dynamic styling can be added to them.

我向图表图例的"getChildrenUnmodifiable()" ObservableList添加了一个ListChangeListener，这反过来又为添加图例的每个子级添加了一个ListChangeListener.从此侦听器中，我们可以知道何时将新项目添加到图例(或删除).这样，我们便可以进行动态样式更改.

I added a ListChangeListener to the chart legend's "getChildrenUnmodifiable()" ObservableList, which in turn adds a ListChangeListener to each of the legend's children as they get added. From within this listener, we can tell when new items are being added to the legend (or removed). This allow us to then make the dynamic style changes.

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
                                }

                            });
                        }
                    }
                }
            });
        }
    }

这篇关于JavaFX 2.0-如何动态更改LineChart的图例颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！