[英]JavaFX 14, Stacked Bar chart does not display negative values
例子:
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();
}
}
結果:
以前關於這個問題的堆棧溢出問題都沒有在 JavaFX14 中工作(無論如何對我來說),有人知道解決方案嗎?
以前的問題:
解決它:必須覆蓋條形圖行為才能解決錯誤,必須將系列添加到條形圖中,然后可以將數據添加到系列中。
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 答案中的補丁對我不起作用,但它引導我朝着正確的方向前進; 我不得不在 StackedBarChart 中重寫一個不同的方法。
官方實現( GitHub )使用bar.getStyleClass().setAll()
,它從 bar 中刪除negative
CSS class ,導致渲染不正確。
以下 Java class 修補了 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);
}
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.