Biểu đồ miền (Area Chart) trong JavaFX

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 đồ miền (Area 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 đồ miền trong JavaFX (Area Chart) giống với biểu đồ đường thẳng nhưng khu vực dưới đường được lấp đầy. thường được sử dụng để làm nổi bật độ lớn của các giá trị theo thời gian giữa các dữ liệu với nhau. 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 đồ Area Chart trong JavaFX.

1. Lớp Area Chart trong JavaFX

Trong JavaFX thì biểu đồ hình cột được biểu diễn thông qua lớp AreaChart thuộc gói javafx.scene.chart. Lớp Area 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 đồ.
• setCreateSymbols(boolean): thiết lập đánh dấu ở nút.

2. Sử dụng AreaChart trong JavaFX

Biểu đồ miền là biểu đồ hai chiều gồm có trục X và trục Y, trục số được biểu diễn bởi lớp NumberAxis.

CategoryAxis xAxis = new CategoryAxis();
xAxis.setLabel("Programming Languages");

NumberAxis yAxis = new NumberAxis();
yAxis.setLabel("Ratings (%)");

AreaChart areaChart = new AreaChart(xAxis, yAxis);

Thêm dữ liệu vào Area Chart:

XYChart.Series dataSeries1 = new XYChart.Series();
dataSeries1.setName("Java");
dataSeries1.getData().add(new XYChart.Data("2010", 17.05));
dataSeries1.getData().add(new XYChart.Data("2015", 16.06));
dataSeries1.getData().add(new XYChart.Data("2020", 23.22));
        
XYChart.Series dataSeries2 = new XYChart.Series();
dataSeries2.setName("C");
dataSeries2.getData().add(new XYChart.Data("2010", 20.33));
dataSeries2.getData().add(new XYChart.Data("2015", 15.05));
dataSeries2.getData().add(new XYChart.Data("2020", 4.45));

AreaChart chart = new AreaChart(xAxis, yAxis);
chart.getData().addAll(dataSeries1, dataSeries2);

Thêm AreaChart vào Scene Graph:

package chart;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.AreaChart;
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 AreaChartJavaFX extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {
        stage.setTitle("JavaFX Area Chart - Team Viet Dev (teamvietdev.com)");
        StackPane pane = new StackPane();
        pane.getChildren().add(createChart());
        stage.setScene(new Scene(pane, 768, 470));
        stage.show();
    }

    public AreaChart createChart() {
        CategoryAxis xAxis = new CategoryAxis();
        xAxis.setLabel("Programming Languages");

        NumberAxis yAxis = new NumberAxis();
        yAxis.setLabel("Ratings (%)");

        XYChart.Series dataSeries1 = new XYChart.Series();
        dataSeries1.setName("Java");
        dataSeries1.getData().add(new XYChart.Data("2010", 16.01));
        dataSeries1.getData().add(new XYChart.Data("2012", 18.90));
        dataSeries1.getData().add(new XYChart.Data("2014", 17.05));
        dataSeries1.getData().add(new XYChart.Data("2016", 16.06));
        dataSeries1.getData().add(new XYChart.Data("2018", 20.22));
        dataSeries1.getData().add(new XYChart.Data("2020", 23.22));
        
        XYChart.Series dataSeries2 = new XYChart.Series();
        dataSeries2.setName("C");
        dataSeries2.getData().add(new XYChart.Data("2010", 16.41));
        dataSeries2.getData().add(new XYChart.Data("2012", 20.33));
        dataSeries2.getData().add(new XYChart.Data("2014", 15.05));
        dataSeries2.getData().add(new XYChart.Data("2016", 10.26));
        dataSeries2.getData().add(new XYChart.Data("2018", 6.56));
        dataSeries2.getData().add(new XYChart.Data("2020", 4.45));
        
        XYChart.Series dataSeries3 = new XYChart.Series();
        dataSeries3.setName("Python");
        dataSeries3.getData().add(new XYChart.Data("2010", 5.41));
        dataSeries3.getData().add(new XYChart.Data("2012", 3.20));
        dataSeries3.getData().add(new XYChart.Data("2014", 2.25));
        dataSeries3.getData().add(new XYChart.Data("2016", 3.22));
        dataSeries3.getData().add(new XYChart.Data("2018", 5.77));
        dataSeries3.getData().add(new XYChart.Data("2020", 8.12));

        AreaChart chart = new AreaChart(xAxis, yAxis);
        chart.getData().addAll(dataSeries1, dataSeries2, dataSeries3);
        chart.setTitle("Top Programming Languages");
        return chart;
    }

}

Khởi chạy ứng dụng trên kết quả có thể như sau:

3. Tùy biến AreaChart trong JavaFX

Thêm CSS vào AreaChart trong JavaFX, bạn tạo tập tin style.css

.default-color0.chart-area-symbol { -fx-background-color: #e9967a, #ffa07a; }
.default-color1.chart-area-symbol { -fx-background-color: #dda0dd, #d8bfd855; }
 
.default-color0.chart-series-area-line { -fx-stroke: #e9967a; }
.default-color1.chart-series-area-line { -fx-stroke: #dda0dd; }
 
.default-color0.chart-series-area-fill { -fx-fill: #ffa07a55; }
.default-color1.chart-series-area-fill { -fx-fill: #d8bfd855; }

Sau đó thêm CSS vào Scene như sau:

scene.getStylesheets().add("/css/style.css");

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)