- JavaFX 教程
- JavaFX - 首页
- JavaFX - 概览
- JavaFX 安装和架构
- JavaFX - 环境
- JavaFX - 使用 Netbeans 安装
- JavaFX - 使用 Eclipse 安装
- JavaFX - 使用 Visual Studio Code 安装
- JavaFX - 架构
- JavaFX - 应用程序
- JavaFX 2D 形状
- JavaFX - 2D 形状
- JavaFX - 绘制线条
- JavaFX - 绘制矩形
- JavaFX - 绘制圆角矩形
- JavaFX - 绘制圆形
- JavaFX - 绘制椭圆
- JavaFX - 绘制多边形
- JavaFX - 绘制折线
- JavaFX - 绘制三次贝塞尔曲线
- JavaFX - 绘制二次贝塞尔曲线
- JavaFX - 绘制弧形
- JavaFX - 绘制 SVGPath
- JavaFX 2D 对象的属性
- JavaFX - 描边类型属性
- JavaFX - 描边宽度属性
- JavaFX - 描边填充属性
- JavaFX - 描边属性
- JavaFX - 描边线连接属性
- JavaFX - 描边斜接限制属性
- JavaFX - 描边线端点属性
- JavaFX - 平滑属性
- JavaFX 路径对象
- JavaFX - 路径对象
- JavaFX - LineTo 路径对象
- JavaFX - HLineTo 路径对象
- JavaFX - VLineTo 路径对象
- JavaFX - QuadCurveTo 路径对象
- JavaFX - CubicCurveTo 路径对象
- JavaFX - ArcTo 路径对象
- JavaFX 颜色和纹理
- JavaFX - 颜色
- JavaFX - 线性渐变图案
- JavaFX - 径向渐变图案
- JavaFX 文本
- JavaFX - 文本
- JavaFX 特效
- JavaFX - 特效
- JavaFX - 颜色调整特效
- JavaFX - 颜色输入特效
- JavaFX - 图像输入特效
- JavaFX - 混合特效
- JavaFX - 光晕特效
- JavaFX - 辉光特效
- JavaFX - 方框模糊特效
- JavaFX - 高斯模糊特效
- JavaFX - 运动模糊特效
- JavaFX - 反射特效
- JavaFX - 棕褐色特效
- JavaFX - 阴影特效
- JavaFX - 投影阴影特效
- JavaFX - 内部阴影特效
- JavaFX - 照明特效
- JavaFX - Light.Distant 特效
- JavaFX - Light.Spot 特效
- JavaFX - Point.Spot 特效
- JavaFX - 位移映射
- JavaFX - 透视变换
- JavaFX 动画
- JavaFX - 动画
- JavaFX - 旋转过渡
- JavaFX - 缩放过渡
- JavaFX - 平移过渡
- JavaFX - 淡入淡出过渡
- JavaFX - 填充过渡
- JavaFX - 描边过渡
- JavaFX - 顺序过渡
- JavaFX - 并行过渡
- JavaFX - 暂停过渡
- JavaFX - 路径过渡
- JavaFX 图像
- JavaFX - 图像
- JavaFX 3D 形状
- JavaFX - 3D 形状
- JavaFX - 创建立方体
- JavaFX - 创建圆柱体
- JavaFX - 创建球体
- 3D 对象的属性
- JavaFX - 剔除面属性
- JavaFX - 绘制模式属性
- JavaFX - 材质属性
- JavaFX 事件处理
- JavaFX - 事件处理
- JavaFX - 使用便捷方法
- JavaFX - 事件过滤器
- JavaFX - 事件处理程序
- JavaFX UI 控件
- JavaFX - UI 控件
- JavaFX - 列表视图
- JavaFX - 手风琴
- JavaFX - 按钮栏
- JavaFX - 选择框
- JavaFX - HTML 编辑器
- JavaFX - 菜单栏
- JavaFX - 分页
- JavaFX - 进度指示器
- JavaFX - 滚动窗格
- JavaFX - 分隔符
- JavaFX - 滑块
- JavaFX - 微调器
- JavaFX - 分割窗格
- JavaFX - 表格视图
- JavaFX - 选项卡窗格
- JavaFX - 工具栏
- JavaFX - 树视图
- JavaFX - 标签
- JavaFX - 复选框
- JavaFX - 单选按钮
- JavaFX - 文本字段
- JavaFX - 密码字段
- JavaFX - 文件选择器
- JavaFX - 超链接
- JavaFX - 工具提示
- JavaFX - 警报
- JavaFX - 日期选择器
- JavaFX - 文本区域
- JavaFX 图表
- JavaFX - 图表
- JavaFX - 创建饼图
- JavaFX - 创建折线图
- JavaFX - 创建面积图
- JavaFX - 创建条形图
- JavaFX - 创建气泡图
- JavaFX - 创建散点图
- JavaFX - 创建堆叠面积图
- JavaFX - 创建堆叠条形图
- JavaFX 布局窗格
- JavaFX - 布局窗格
- JavaFX - HBox 布局
- JavaFX - VBox 布局
- JavaFX - BorderPane 布局
- JavaFX - StackPane 布局
- JavaFX - TextFlow 布局
- JavaFX - AnchorPane 布局
- JavaFX - TilePane 布局
- JavaFX - GridPane 布局
- JavaFX - FlowPane 布局
- JavaFX CSS
- JavaFX - CSS
- JavaFX 中的媒体
- JavaFX - 处理媒体
- JavaFX - 播放视频
- JavaFX 有用资源
- JavaFX - 快速指南
- JavaFX - 有用资源
- JavaFX - 讨论
JavaFX - 条形图
条形图用于使用矩形条表示分组数据。这些条的长度表示值。条形图中的条可以垂直或水平绘制。
以下是一个条形图,比较了各种汽车品牌。
JavaFX 中的条形图
在 JavaFX 中,条形图由名为 BarChart 的类表示。此类属于包 javafx.scene.chart。通过实例化此类,您可以在 JavaFX 中创建条形图节点。
要在 JavaFX 中生成条形图,请按照以下步骤操作。
步骤 1:定义轴
在 Application 类的 start() 方法中,定义条形图的 X 轴和 Y 轴,并为其设置标签。在我们的示例中,X 轴表示比较的类别,Y 轴表示分数。
public class ClassName extends Application { @Override public void start(Stage primaryStage) throws Exception { //Defining the x axis CategoryAxis xAxis = new CategoryAxis(); xAxis.setCategories(FXCollections.<String>observableArrayList(Arrays.asList( "Speed", "User rating", "Milage", "Safety"))); xAxis.setLabel("category"); //Defining the y axis NumberAxis yAxis = new NumberAxis(); yAxis.setLabel("score"); } }
步骤 2:创建条形图
通过实例化名为 BarChart 的类(位于包 javafx.scene.chart 中)来创建折线图。将表示在上一步骤中创建的 X 轴和 Y 轴的对象传递给此类的构造函数。
//Creating the Bar chart BarChart<String, Number> barChart = new BarChart<>(xAxis, yAxis); barChart.setTitle("Comparison between various cars");
步骤 3:准备数据
实例化 XYChart.Series 类并将数据(一系列 x 和 y 坐标)添加到此类的 Observable 列表中,如下所示:
//Prepare XYChart.Series objects by setting data XYChart.Series<String, Number> series1 = new XYChart.Series<>(); series1.setName("Fiat"); series1.getData().add(new XYChart.Data<>("Speed", 1.0)); series1.getData().add(new XYChart.Data<>("User rating", 3.0)); series1.getData().add(new XYChart.Data<>("Milage", 5.0)); series1.getData().add(new XYChart.Data<>("Safety", 5.0)); XYChart.Series<String, Number> series2 = new XYChart.Series<>(); series2.setName("Audi"); series2.getData().add(new XYChart.Data<>("Speed", 5.0)); series2.getData().add(new XYChart.Data<>("User rating", 6.0)); series2.getData().add(new XYChart.Data<>("Milage", 10.0)); series2.getData().add(new XYChart.Data<>("Safety", 4.0)); XYChart.Series<String, Number> series3 = new XYChart.Series<>(); series3.setName("Ford"); series3.getData().add(new XYChart.Data<>("Speed", 4.0)); series3.getData().add(new XYChart.Data<>("User rating", 2.0)); series3.getData().add(new XYChart.Data<>("Milage", 3.0)); series3.getData().add(new XYChart.Data<>("Safety", 6.0));
步骤 4:将数据添加到条形图
将上一步中准备好的数据系列添加到条形图中,如下所示:
//Setting the data to bar chart barChart.getData().addAll(series1, series2, series3);
步骤 5:创建 Group 对象
在 start() 方法中,通过实例化名为 Group 的类来创建一个组对象。这属于包 javafx.scene。
将上一步中创建的条形图(节点)对象作为参数传递给 Group 类的构造函数。这应该按如下方式完成,以便将其添加到组中:
Group root = new Group(barChart);
步骤 6:启动应用程序
最后,请按照以下步骤正确启动应用程序:
首先,通过将 Group 对象作为参数值传递给其构造函数来实例化名为 Scene 的类。在此构造函数中,您还可以将应用程序屏幕的尺寸作为可选参数传递。
然后,使用 Stage 类的 setTitle() 方法设置舞台的标题。
现在,使用名为 Stage 的类的 setScene() 方法将 Scene 对象添加到舞台。
使用名为 show() 的方法显示场景的内容。
最后,在 launch() 方法的帮助下启动应用程序。
示例
以下示例使用条形图描绘了各种汽车统计数据。以下是汽车品牌及其不同特征的列表,我们将使用条形图显示:
汽车 | 速度 | 用户评分 | 里程 | 安全性 |
---|---|---|---|---|
菲亚特 | 1.0 | 3.0 | 5.0 | 5.0 |
奥迪 | 5.0 | 6.0 | 10.0 | 4.0 |
福特 | 4.0 | 2.0 | 3.0 | 6.0 |
以下是一个 Java 程序,它使用 JavaFX 生成一个条形图,描绘了上述数据。
将此代码保存在名为 BarChartExample.java 的文件中。
import java.util.Arrays; import javafx.application.Application; import javafx.collections.FXCollections; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.chart.BarChart; import javafx.scene.chart.CategoryAxis; import javafx.stage.Stage; import javafx.scene.chart.NumberAxis; import javafx.scene.chart.XYChart; public class BarChartExample extends Application { @Override public void start(Stage stage) { //Defining the axes CategoryAxis xAxis = new CategoryAxis(); xAxis.setCategories(FXCollections.<String> observableArrayList(Arrays.asList("Speed", "User rating", "Milage", "Safety"))); xAxis.setLabel("category"); NumberAxis yAxis = new NumberAxis(); yAxis.setLabel("score"); //Creating the Bar chart BarChart<String, Number> barChart = new BarChart<>(xAxis, yAxis); barChart.setTitle("Comparison between various cars"); //Prepare XYChart.Series objects by setting data XYChart.Series<String, Number> series1 = new XYChart.Series<>(); series1.setName("Fiat"); series1.getData().add(new XYChart.Data<>("Speed", 1.0)); series1.getData().add(new XYChart.Data<>("User rating", 3.0)); series1.getData().add(new XYChart.Data<>("Milage", 5.0)); series1.getData().add(new XYChart.Data<>("Safety", 5.0)); XYChart.Series<String, Number> series2 = new XYChart.Series<>(); series2.setName("Audi"); series2.getData().add(new XYChart.Data<>("Speed", 5.0)); series2.getData().add(new XYChart.Data<>("User rating", 6.0)); series2.getData().add(new XYChart.Data<>("Milage", 10.0)); series2.getData().add(new XYChart.Data<>("Safety", 4.0)); XYChart.Series<String, Number> series3 = new XYChart.Series<>(); series3.setName("Ford"); series3.getData().add(new XYChart.Data<>("Speed", 4.0)); series3.getData().add(new XYChart.Data<>("User rating", 2.0)); series3.getData().add(new XYChart.Data<>("Milage", 3.0)); series3.getData().add(new XYChart.Data<>("Safety", 6.0)); //Setting the data to bar chart barChart.getData().addAll(series1, series2, series3); //Creating a Group object Group root = new Group(barChart); //Creating a scene object Scene scene = new Scene(root, 600, 400); //Setting title to the Stage stage.setTitle("Bar Chart"); //Adding scene to the stage stage.setScene(scene); //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } }
使用以下命令从命令提示符编译并执行保存的 java 文件。
javac --module-path %PATH_TO_FX% --add-modules javafx.controls BarChartExample.java java --module-path %PATH_TO_FX% --add-modules javafx.controls BarChartExample
输出
执行上述程序后,会生成一个 JavaFX 窗口,其中显示了一个面积图,如下所示。
示例
下表显示了 John 和 Jane 一周内食用的水果数量。
星期几 | John 食用的水果 | Jane 食用的水果 |
---|---|---|
星期一 | 3 | 1 |
星期二 | 4 | 3 |
星期三 | 3 | 4 |
星期四 | 5 | 3 |
星期五 | 4 | 3 |
星期六 | 10 | 5 |
星期日 | 12 | 4 |
以下是一个 Java 程序,它使用 JavaFX 生成一个条形图,描绘了上述数据。
将此代码保存在名为 BarChartFruits.java 的文件中。
import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.chart.BarChart; import javafx.scene.chart.CategoryAxis; import javafx.stage.Stage; import javafx.scene.chart.NumberAxis; import javafx.scene.chart.XYChart; public class BarChartFruits extends Application { @Override public void start(Stage stage) { //Defining the X axis CategoryAxis xAxis = new CategoryAxis(); //defining the y Axis NumberAxis yAxis = new NumberAxis(0, 15, 2.5); yAxis.setLabel("Fruit units"); //Creating the Area chart BarChart<String, Number> barChart = new BarChart(xAxis, yAxis); barChart.setTitle("Average fruit consumption during one week"); //Prepare XYChart.Series objects by setting data XYChart.Series series1 = new XYChart.Series(); series1.setName("John"); series1.getData().add(new XYChart.Data("Monday", 3)); series1.getData().add(new XYChart.Data("Tuesday", 4)); series1.getData().add(new XYChart.Data("Wednesday", 3)); series1.getData().add(new XYChart.Data("Thursday", 5)); series1.getData().add(new XYChart.Data("Friday", 4)); series1.getData().add(new XYChart.Data("Saturday", 10)); series1.getData().add(new XYChart.Data("Sunday", 12)); XYChart.Series series2 = new XYChart.Series(); series2.setName("Jane"); series2.getData().add(new XYChart.Data("Monday", 1)); series2.getData().add(new XYChart.Data("Tuesday", 3)); series2.getData().add(new XYChart.Data("Wednesday", 4)); series2.getData().add(new XYChart.Data("Thursday", 3)); series2.getData().add(new XYChart.Data("Friday", 3)); series2.getData().add(new XYChart.Data("Saturday", 5)); series2.getData().add(new XYChart.Data("Sunday", 4)); //Setting the XYChart.Series objects to area chart barChart.getData().addAll(series1,series2); //Creating a Group object Group root = new Group(barChart); //Creating a scene object Scene scene = new Scene(root, 600, 400); //Setting title to the Stage stage.setTitle("Bar Chart"); //Adding scene to the stage stage.setScene(scene); //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } }
使用以下命令从命令提示符编译并执行保存的 java 文件。
javac --module-path %PATH_TO_FX% --add-modules javafx.controls BarChartFruits.java java --module-path %PATH_TO_FX% --add-modules javafx.controls BarChartFruits
输出
执行上述程序后,会生成一个 JavaFX 窗口,其中显示了一个面积图,如下所示。