Biểu đồ tròn (Pie Chart) trong JavaFX

Trong JavaFX thuộc 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 đồ tròn (Pie Chart) trong JavaFX.

Biểu đồ trong JavaFX gồm biểu đồ hình tròn (Pie Chart), biểu đồ thanh (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 đồ tròn trong JavaFX (JavaFX Pie Chart) có hình dạng như chiếc bánh được chia thành nhiều phần nhằm để hiển thị dữ liệu khi muốn so sánh về tỷ lệ 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 đồ Pie Chart trong JavaFX.

1. Lớp PieChart trong JavaFX

Trong JavaFX thì biểu đồ hình tròn được biểu diễn thông qua lớp PieChart thuộc gói javafx.scene.chart. Lớp PieChart 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 đồ.
• setClockWise(boolean): thiết lập thành phần hiển thị theo cùng chiều kim đồng hồ hoặc ngược lại.
• setData(PieChart.Data): thiết lập dữ liệu hiển thị biểu đồ.
• setLabelLineLength(double): thiết lập độ dài mỗi Label đến biểu đồ.
• setLabelsVisible(boolean): hiển thị hoặc ẩn Label.
• setLegendVisible(boolean): hiển thị hoặc ẩn Legend.
• setStartAngle(double): thiết lập góc bắt đầu.
• setLegendSide(Side): thiết lập vị trí hiển thị Legend.

2. Sử dụng PieChart trong JavaFX

Tạo một thành phần JavaFX PieChart bằng cách khởi tạo lớp PieChart:

PieChart pieChart = new PieChart();

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

PieChart pieChart = new PieChart();

PieChart.Data p1 = new PieChart.Data("Legend 1", 123);
PieChart.Data p2 = new PieChart.Data("Legend 2", 345);
PieChart.Data p3 = new PieChart.Data("Legend 3", 567;

pieChart.getData().add(p1);
pieChart.getData().add(p2);
pieChart.getData().add(p3);

Thêm PieChart vào Scene Graph:

package demo;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Side;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

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

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

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

    public PieChart createChart() {
        ObservableList<PieChart.Data> data = FXCollections.observableArrayList();
        data.addAll(new PieChart.Data("Africa", 30370000),
                new PieChart.Data("Antarctica", 14000000),
                new PieChart.Data("Asia", 44579000),
                new PieChart.Data("Europe", 10180000),
                new PieChart.Data("North America", 24709000),
                new PieChart.Data("Australia", 8600000),
                new PieChart.Data("South America", 17840000));

        PieChart chart = new PieChart();
        chart.setData(data);
        chart.setTitle("The chart summarizes the area of each continent.");
        chart.setClockwise(true);
        chart.setLabelLineLength(30);
        chart.setLabelsVisible(true);
        chart.setLegendVisible(true);
        chart.setStartAngle(50);
        chart.setLegendSide(Side.RIGHT);
        
        return chart;
    }

}

3. Tùy biến PieChart trong JavaFX

Xử lý sự kiện trong Pie Chart:

final Label caption = new Label("");
caption.setTextFill(Color.DARKORANGE);
caption.setStyle("-fx-font: 24 arial;");

for (final PieChart.Data data : chart.getData()) {
    data.getNode().addEventHandler(MouseEvent.MOUSE_PRESSED,
        new EventHandler<MouseEvent>() {
            @Override public void handle(MouseEvent e) {
                caption.setTranslateX(e.getSceneX());
                caption.setTranslateY(e.getSceneY());
                caption.setText(String.valueOf(data.getPieValue()) + "%");
             }
        });
}

Khi bạn thêm đoạn mã trên vào mã ứng dụng và chạy thì khi nhấn chuột sẽ xử lý sự kiện.

Thêm CSS vào trong Pie Chart, đầu tiên chúng ta tạo tập tin style.css:

.default-color0.chart-pie { -fx-pie-color: #7fff00; }
.default-color1.chart-pie { -fx-pie-color: #ffff00; }
.default-color2.chart-pie { -fx-pie-color: #ff0000; }
.default-color3.chart-pie { -fx-pie-color: #7fff00; }
.default-color4.chart-pie { -fx-pie-color: #ffff00; }
.default-color5.chart-pie { -fx-pie-color: #ff0000; }
.default-color6.chart-pie { -fx-pie-color: deepskyblue; }
.default-color7.chart-pie { -fx-pie-color: cyan; }
.default-color8.chart-pie { -fx-pie-color: steelblue; }
.default-color9.chart-pie { -fx-pie-color: teal; }
.default-color10.chart-pie { -fx-pie-color: royalblue; }

.chart-pie-label-line {
    -fx-stroke: #8b4513;
    -fx-fill: #8b4513;
}

.chart-pie-label {
    -fx-fill: #8b4513;
    -fx-font-size: 1em;
} 
.chart-legend {
    -fx-background-color:  #fafad2;
    -fx-stroke: #daa520;
}

Tiếp theo bạn thêm tập tin style.css vào Pie Chart.

chart.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)