Trong gói javafx.scene.chart của JavaFX SDK gồm nhiều loại biểu đồ như Pie Chart, Line Chart, Area Chart, Bubble Chart, Scatter Chart và Bar Chart. Hướng dẫn này mô tả về biểu đồ cột (Bar Chart) trong JavaFX.
Biểu đồ trong JavaFX gồm biểu đồ hình tròn (Pie Chart), biểu đồ cột (Bar Chart), biểu đồ vùng (Area Chart), biểu đồ đường (Line Chart), biểu đồ tán xạ (Scatter Chart), biểu đồ bong bóng (Bubble Chart), biểu đồ vùng xếp chồng (Stacked Area Chart) và biểu đồ thanh xếp chồng (Stacked Bar Chart).
Biểu đồ cột trong JavaFX (Bar Chart) có hình cột gồm nhiều thành nhiều phần nhằm để hiển thị dữ liệu khi muốn so sánh tương quan giữa các thành phần. Nội dung tiếp sau đây sẽ là phần hướng dẫn sử dụng biểu đồ trong JavaFX với biểu đồ Bar Chart trong JavaFX.
1. Lớp Bar Chart trong JavaFX
Trong JavaFX thì biểu đồ hình cột được biểu diễn thông qua lớp BarChart thuộc gói javafx.scene.chart. Lớp Bar Chart trong JavaFX bao gồm một số thuộc tính cơ bản sau:
- setTitle(String): thiết lập tiêu đề mô tả biểu đồ.
- setData(Observable): thiết lập dữ liệu hiển thị biểu đồ.
- setLegendSide(Side): thiết lập vị trí đặt Legend.
2. Sử dụng BarChart trong JavaFX
Trong JavaFX thì biểu đồ hình cột là đồ thị hai chiều gồm có trục X và trục Y. Khởi tạo CategoryAxis và NumberAxis thêm vào BarChart.
CategoryAxis xAxis = new CategoryAxis();
xAxis.setLabel("Region");
NumberAxis yAxis = new NumberAxis();
yAxis.setLabel("Area (km²)");
BarChart barChart = new BarChart(xAxis, yAxis);
Thêm dữ liệu vào Bar Chart:
XYChart.Series dataSeries = new XYChart.Series();
dataSeries.setName("2018");
dataSeries.getData().add(new XYChart.Data("Label 1", 123));
dataSeries.getData().add(new XYChart.Data("Label 2", 456));
dataSeries.getData().add(new XYChart.Data("Label 3", 789);
barChart.getData().add(dataSeries);
Thêm BarChart vào Scene Graph:
package demo;
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;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
/**
*
* @author TVD
*/
public class BarChartJavaFX extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage stage) throws Exception {
stage.setTitle("JavaFX Bar Chart - Team Viet Dev (teamvietdev.com)");
StackPane pane = new StackPane();
pane.getChildren().add(createChart());
stage.setScene(new Scene(pane, 600, 400));
stage.show();
}
public BarChart createChart() {
CategoryAxis xAxis = new CategoryAxis();
xAxis.setLabel("Region");
NumberAxis yAxis = new NumberAxis();
yAxis.setLabel("Area (km²)");
XYChart.Series dataSeries = new XYChart.Series();
dataSeries.setName("Region");
dataSeries.getData().add(new XYChart.Data("Africa", 30370000));
dataSeries.getData().add(new XYChart.Data("Antarctica", 14000000));
dataSeries.getData().add(new XYChart.Data("Asia", 44579000));
dataSeries.getData().add(new XYChart.Data("Europe", 10180000));
dataSeries.getData().add(new XYChart.Data("North America", 24709000));
dataSeries.getData().add(new XYChart.Data("Australia", 8600000));
dataSeries.getData().add(new XYChart.Data("South America", 17840000));
BarChart chart = new BarChart(xAxis, yAxis);
chart.getData().add(dataSeries);
chart.setTitle("The chart summarizes the area of each continent.");
return chart;
}
}
Khởi chạy ứng dụng trên kết quả có thể như sau:
3. Tùy biến BarChart trong JavaFX
Hiển thị nhiều chuỗi dữ liệu trong cùng một BarChart:
public BarChart createChart() {
CategoryAxis xAxis = new CategoryAxis();
xAxis.setLabel("Region");
NumberAxis yAxis = new NumberAxis();
yAxis.setLabel("Area (km²)");
XYChart.Series dataSeries1 = new XYChart.Series();
dataSeries1.setName("2010");
dataSeries1.getData().add(new XYChart.Data("Africa", 20123000));
dataSeries1.getData().add(new XYChart.Data("Antarctica", 10230000));
dataSeries1.getData().add(new XYChart.Data("Asia", 32170000));
dataSeries1.getData().add(new XYChart.Data("Europe", 1000010));
dataSeries1.getData().add(new XYChart.Data("North America", 14702000));
dataSeries1.getData().add(new XYChart.Data("Australia", 8000100));
dataSeries1.getData().add(new XYChart.Data("South America", 12840000));
XYChart.Series dataSeries2 = new XYChart.Series();
dataSeries2.setName("2020");
dataSeries2.getData().add(new XYChart.Data("Africa", 30370000));
dataSeries2.getData().add(new XYChart.Data("Antarctica", 14000000));
dataSeries2.getData().add(new XYChart.Data("Asia", 44579000));
dataSeries2.getData().add(new XYChart.Data("Europe", 10180000));
dataSeries2.getData().add(new XYChart.Data("North America", 24709000));
dataSeries2.getData().add(new XYChart.Data("Australia", 8600000));
dataSeries2.getData().add(new XYChart.Data("South America", 17840000));
BarChart chart = new BarChart(xAxis, yAxis);
chart.getData().addAll(dataSeries1, dataSeries2);
chart.setTitle("The chart summarizes the area of each continent.");
return chart;
}
Khởi chạy ứng dụng trên kết quả có thể như sau:
Hiển thị biểu đồ cột (Bar Chart) trong JavaFX nằm ngang:
public BarChart createChart() {
NumberAxis xAxis = new NumberAxis();
xAxis.setLabel("Area (km²)");
CategoryAxis yAxis = new CategoryAxis();
yAxis.setLabel("Region");
XYChart.Series dataSeries = new XYChart.Series();
dataSeries.setName("2010");
dataSeries.getData().add(new XYChart.Data(20123000, "Africa"));
dataSeries.getData().add(new XYChart.Data(10230000, "Antarctica"));
dataSeries.getData().add(new XYChart.Data(32170000, "Asia"));
dataSeries.getData().add(new XYChart.Data(1000010, "Europe"));
dataSeries.getData().add(new XYChart.Data(14702000, "North America"));
dataSeries.getData().add(new XYChart.Data(8000100, "Australia"));
dataSeries.getData().add(new XYChart.Data(12840000, "South America"));
BarChart chart = new BarChart(xAxis, yAxis);
chart.getData().addAll(dataSeries);
chart.setTitle("The chart summarizes the area of each continent.");
return chart;
}
Khởi chạy ứng dụng trên kết quả có thể như sau:
Lời kết: Trong thời gian tới Team Việt Dev sẽ tiếp tục chia sẻ thêm nhiều bài viết về ngôn ngữ lập trình JavaFX miễn phí đến bạn đọc, các bạn nhớ theo dõi kênh để có được những chia sẻ mới nhất.
(Tác giả: Team Việt Dev)
