Biểu đồ đường (Line 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 đồ cột (Line 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).

1. Lớp Line Chart trong JavaFX

Trong JavaFX thì biểu đồ đường được biểu diễn thông qua lớp LineChart thuộc gói javafx.scene.chart. Lớp Line 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 ký hiệu tại điểm nút.

2. Sử dụng LineChart trong JavaFX

Biểu đồ đường trong JavaFX (Line Chart) là một đồ thị hai chiều với hai trục X và trục Y, biểu diễn bởi lớp JavaFX NumberAxis.

NumberAxis xAxis = new NumberAxis();
xAxis.setLabel("Năm");
 
NumberAxis yAxis = new NumberAxis();
yAxis.setLabel("Tốc độ tăng trưởng (%)");
        
LineChart lineChart = new LineChart(xAxis, yAxis);

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

XYChart.Series dataSeries = new XYChart.Series();
dataSeries.setName("2018");

dataSeries.getData().add(new XYChart.Data(10, 123));
dataSeries.getData().add(new XYChart.Data(15, 345));
dataSeries.getData().add(new XYChart.Data(20, 456));
dataSeries.getData().add(new XYChart.Data(25, 789));
dataSeries.getData().add(new XYChart.Data(30, 457));
dataSeries.getData().add(new XYChart.Data(35, 765));

lineChart.getData().add(dataSeries);

Thêm LineChart vào Scene Graph:

package demo;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

/**
 *
 * @author TVD
 */
public class LineChartJavaFX extends Application {

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

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

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

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

        XYChart.Series dataSeries = new XYChart.Series();
        dataSeries.setName("Java");
        dataSeries.getData().add(new XYChart.Data("2010", 16.01));
        dataSeries.getData().add(new XYChart.Data("2012", 18.90));
        dataSeries.getData().add(new XYChart.Data("2014", 17.05));
        dataSeries.getData().add(new XYChart.Data("2016", 16.06));
        dataSeries.getData().add(new XYChart.Data("2018", 20.22));
        dataSeries.getData().add(new XYChart.Data("2020", 23.22));
        
        LineChart chart = new LineChart(xAxis, yAxis);
        chart.getData().addAll(dataSeries);
        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 LineChart trong JavaFX

Hiển thị nhiều chuỗi dữ liệu trong cùng một LineChart:

public LineChart 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));

        LineChart chart = new LineChart(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:

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)