我是 javafx 的新手,我不知道如何解决我的 css 代码问题以使我的 BarChart 组件在背景中透明。任何解决方案将不胜感激。
这是我的CSS代码:
.chart{
-fx-background-color: null;
-fx-alternative-column-fill-visible: false;
-fx-alternative-row-fill-visible: false;
-fx-content-display:bottom;
}
.axis {
-fx-tick-mark-visible: false;
-fx-minor-tick-visible: false;
-fx-minor-tick-length: 0;
}
.axis-label {
-fx-text-fill: null;
}
输出图像:
最佳答案
以下 CSS 将使 BarChart
中的所有内容不可见/透明,除了条形本身。
.bar-chart {
-fx-alternative-row-visible: false;
-fx-alternative-column-visible: false;
-fx-horizontal-grid-lines-visible: false;
-fx-vertical-grid-lines-visible:false;
-fx-horizontal-zero-line-visible: false;
-fx-vertical-zero-line-visible: false;
-fx-legend-visible: false;
}
.chart-plot-background {
-fx-background-color: transparent;
}
.axis {
-fx-border-color: transparent;
-fx-tick-mark-visible: false;
-fx-minor-tick-visible: false;
-fx-tick-labels-visible: false;
}
下面是一个使用上述内容的示例(假设文件名为 Main.css
):
import java.util.Random;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Screen;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
var scene = new Scene(new StackPane(createBarChart()), Color.TRANSPARENT);
scene.getStylesheets().add("Main.css");
primaryStage.initStyle(StageStyle.TRANSPARENT);
primaryStage.setScene(scene);
primaryStage.addEventHandler(KeyEvent.KEY_PRESSED, event -> {
if (event.getCode() == KeyCode.ESCAPE) {
primaryStage.close();
}
});
var bounds = Screen.getPrimary().getVisualBounds();
primaryStage.setX(bounds.getMinX());
primaryStage.setY(bounds.getMinY());
primaryStage.setWidth(bounds.getWidth());
primaryStage.setHeight(bounds.getHeight());
primaryStage.show();
}
private BarChart<?, ?> createBarChart() {
var chart = new BarChart<>(new CategoryAxis(), new NumberAxis(0, 20, 1));
var random = new Random();
var series = new Series<String, Number>();
for (int i = 0; i < 20; i++) {
var category = Integer.toString(i);
series.getData().add(new Data<>(category, random.nextInt(15)));
((CategoryAxis) chart.getXAxis()).getCategories().add(category);
}
chart.getData().add(series);
return chart;
}
}
这是结果的图片:
现在,我确实需要稍微修改 CSS 文件,使 Scene
的根部透明,并让条形图具有图像中的线性渐变外观。我所做的只是……
修改这个:
.root,
.chart-plot-background {
-fx-background-color: transparent;
}
然后添加:
.chart-bar {
-fx-background-color: linear-gradient(to bottom, transparent 0%, gray 45%);
}
关于java - 如何使条形图透明,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56205089/