JavaFX 14中，堆积条形图不显示负值。

Question

例子：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.StackedBarChart;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

public class Main extends Application {

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

    // Start the javafx application
    @Override
    public void start(Stage stage) {

        CategoryAxis xAxis = new CategoryAxis();
        NumberAxis yAxis = new NumberAxis();

        XYChart.Series<String, Number> series = new XYChart.Series<String, Number>();
        series.getData().add(new XYChart.Data<String, Number>(0 + "", 5));
        series.getData().add(new XYChart.Data<String, Number>(1 + "", -5));
        series.getData().add(new XYChart.Data<String, Number>(2 + "", 3));
        series.getData().add(new XYChart.Data<String, Number>(3 + "", -2));

        StackedBarChart<String, Number> weightChangeChartBar = new StackedBarChart<String, Number>(xAxis, yAxis);
        weightChangeChartBar.getData().addAll(series);

        Scene scene = new Scene(weightChangeChartBar, 500, 500);
        stage.setScene(scene);
        stage.show();
    }

}

结果：

之前在此问题上的 Stack Overflow 的问题都不适用于 JavaFX14（至少对我来说是这样），有人知道解决方案吗？

之前的问题：

1. JavaFX：13 Stacked Bar Chart 负值不显示
2. JavaFx StackedBar Chart 问题
3. Javafx StackedBarChart 错误

- wyit

Answer 1

问题已解决： 必须重写条形图的行为才能解决此错误，必须将系列添加到条形图中，然后才能向系列添加数据。

 package example;

    import javafx.application.Application;
    import javafx.scene.Node;
    import javafx.scene.Scene;
    import javafx.scene.chart.CategoryAxis;
    import javafx.scene.chart.NumberAxis;
    import javafx.scene.chart.StackedBarChart;
    import javafx.scene.chart.XYChart;
    import javafx.stage.Stage;

    public class Main extends Application {

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

        // Start the javafx application
        @Override
        public void start(Stage stage) {

            CategoryAxis xAxis = new CategoryAxis();
            NumberAxis yAxis = new NumberAxis();

            XYChart.Series<String, Number> series = new XYChart.Series<String, Number>();

             // modify behavior to counter bug
             StackedBarChart<String, Number> barChart = new StackedBarChart<String, Number>(xAxis, yAxis) {
                @Override
                protected void dataItemAdded(XYChart.Series<String,Number> series, int itemIndex, XYChart.Data<String,Number> item) {
                    super.dataItemAdded(series, itemIndex, item);

                    Node bar = item.getNode();
                    double barVal = item.getYValue().doubleValue();

                    if (barVal < 0) {
                        bar.getStyleClass().add("negative");
                    }   
                }       
            };

            // add series
            barChart.getData().addAll(series);

            // THEN add data
            series.getData().add(new XYChart.Data<String, Number>(0 + "", 5));
            series.getData().add(new XYChart.Data<String, Number>(1 + "", -5));
            series.getData().add(new XYChart.Data<String, Number>(2 + "", 3));
            series.getData().add(new XYChart.Data<String, Number>(3 + "", -2));


            Scene scene = new Scene(barChart, 500, 500);
            stage.setScene(scene);
            stage.show();
        }

    }

负节点也必须与正节点的CSS分开处理。

/* ====== BAR CHART =========================================================== */
/* TODO flip gradient vertical for negative bars */
.chart-bar {
    -fx-bar-fill: #22bad9;
    -fx-background-color: linear-gradient(derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)),
                          linear-gradient(derive(-fx-bar-fill,80%), derive(-fx-bar-fill, 0%)),
                          linear-gradient(derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%));
    -fx-background-insets: 0,1,2;
    -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
}

.negative.chart-bar {
   -fx-background-color: linear-gradient(to top, derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)),
                          linear-gradient(to top, derive(-fx-bar-fill, 80%), derive(-fx-bar-fill,0%)),
                          linear-gradient(to top, derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%));
   -fx-background-radius: 0 0 5 5, 0 0 4 4, 0 0 3 3;
}
.bar-chart:horizontal .chart-bar, .stacked-bar-chart:horizontal .chart-bar {
    -fx-background-color: linear-gradient(to left, derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)),
                          linear-gradient(to left, derive(-fx-bar-fill,80%), derive(-fx-bar-fill, 0%)),
                          linear-gradient(to left, derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%));
    -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
}
.bar-chart:horizontal .negative.chart-bar, .stacked-bar-chart:horizontal .negative.chart-bar {
    -fx-background-color: linear-gradient(to right, derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)),
                          linear-gradient(to right, derive(-fx-bar-fill, 80%), derive(-fx-bar-fill, 0%)),
                          linear-gradient(to right, derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%));
    -fx-background-radius: 5 0 0 5, 4 0 0 4, 3 0 0 3;
}

- wyit

Answer 2

wyit's answer中的补丁对我没有用，但它让我朝着正确的方向前进；我必须覆盖StackedBarChart中的另一个方法。

官方实现（GitHub）使用bar.getStyleClass().setAll()，这会从条形图中删除negative CSS类，导致不正确的渲染。

以下Java类修补了StackedBarChart中有问题的方法。

/**
 * Fixes StackedBarChart can't display negative numbers.
 */
public class PatchedStackedBarChart<X, Y> extends StackedBarChart<X, Y> {
    public PatchedStackedBarChart(@NamedArg("xAxis") Axis<X> xAxis, @NamedArg("yAxis") Axis<Y> yAxis) {
        super(xAxis, yAxis);
    }

    /**
     * Override the method that breaks the graph, patch to add missing "negative" CSS class.
     */
    @Override
    protected void dataItemAdded(Series<X, Y> series, int itemIndex, Data<X, Y> item) {
        super.dataItemAdded(series, itemIndex, item);

        Number val = (Number) (item.getYValue() instanceof Number ? item.getYValue() : item.getXValue());
        if (val.doubleValue() < 0) {
            // add missing CSS class
            item.getNode().getStyleClass().add("negative");
        }
    }

    /**
     * Override the method that breaks the graph, patch so it doesn't override styles.
     */
    @Override
    protected void seriesChanged(ListChangeListener.Change<? extends Series> c) {
        for (int i = 0; i < getData().size(); i++) {
            List<Data<X, Y>> items = getData().get(i).getData();
            for (int j = 0; j < items.size(); j++) {
                Node bar = items.get(j).getNode();
                // change .setAll to .addAll to avoid overriding styles
                bar.getStyleClass().removeIf(s -> s.matches("chart-bar|(series|data)\\d+"));
                bar.getStyleClass().addAll("chart-bar", "series" + i, "data" + j);
            }
        }
    }
}

- DarkMatterMatt