Question

我正在尝试设置我的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);

这对笔画很好，但我怎么能为传奇做同样的事情呢？

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

enter image description here

Answer 1

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

我在图表图例的“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
                                }

                            });
                        }
                    }
                }
            });
        }
    }

Answer 2

为了将来参考，可以通过将相关代码包含在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;");
});

Answer 3

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

Answer 4

此解决方案基于@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;");
        });
 }

JavaFX 2.0 - 如何动态更改折线图的图例颜色？

4 个答案: