如何在 JavaFX 图表中设置背景图片?


javafx.scene.chart 包提供了创建各种图表(例如:线形图、区域图、柱状图、饼图、气泡图、散点图等)的类。

您可以通过实例化相应的类来创建所需的图表。

设置背景图片和颜色

  • JavaFX CSS 的 -fx-background-image 类用于将图片设置为图表的背景。

  • JavaFX CSS 的 -fx-background-color(区域 chart-plot-background)类用于设置背景颜色。

  • JavaFX 的 Scene 类有一个可观察列表来保存所有所需的样式表。您可以使用 getStylesheets() 方法获取此列表。

要将图片设置为图表的背景:

  • 在项目的当前包中创建一个 CSS 文件(例如 LineChart.css)。

  • 使用 -fx-background-image CSS 类设置背景图片:

.chart-plot-background {
   -fx-background-image: url("cat.jpg");
}
  • 使用 -fx-background-color CSS 类将绘图颜色设置为透明:

.chart-plot-background {
   -fx-background-color: transparent;
}
  • 在程序中,使用 getStylesheets() 方法获取样式表的可观察列表。

  • 使用 add() 方法将创建的 CSS 文件添加到列表中。

示例

LineChart.CSS:

.chart {
   -fx-padding: 10px;
   -fx-background-image: url("cat.jpg");
}
.chart-plot-background {
   -fx-background-color: transparent;
}
.chart-vertical-grid-lines {
   -fx-stroke: #dedddc; -fx-stroke-width: 2;
}
.chart-horizontal-grid-lines {
   -fx-stroke: #dedddc; -fx-stroke-width: 2;
}

Example.java:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BubbleChart;
import javafx.stage.Stage;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.StackPane;
public class Example extends Application {
   public void start(Stage stage) {
      //Defining the axes
      NumberAxis xAxis = new NumberAxis(0, 100, 10);
      xAxis.setLabel("Age");
      NumberAxis yAxis = new NumberAxis(20, 100, 10);
      yAxis.setLabel("Weight");
      //Creating the Bubble chart
      BubbleChart bubbleChart = new BubbleChart(xAxis, yAxis);
      //Prepare XYChart.Series objects by setting data
      XYChart.Series series = new XYChart.Series();
      series.setName("work");
      series.getData().add(new XYChart.Data(10,30,4));
      series.getData().add(new XYChart.Data(25,40,5));
      series.getData().add(new XYChart.Data(40,50,9));
      series.getData().add(new XYChart.Data(55,60,7));
      series.getData().add(new XYChart.Data(70,70,9));
      series.getData().add(new XYChart.Data(85,80,6));
      //Setting the data to bar chart
      bubbleChart.getData().add(series);
      //Creating a Group object
      StackPane root = new StackPane(bubbleChart);
      //Setting a scene
      Scene scene = new Scene(root, 595, 300);
      stage.setTitle("Bubble Chart");
      scene.getStylesheets().add("styles/LineChart.css");
      stage.setScene(scene);
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

输出

更新于:2020年5月19日

4K+ 次浏览

启动您的 职业生涯

完成课程获得认证

开始学习
广告