Tạo Biểu Đồ HTML5 Đơn Giản

Chào mọi người, hôm nay đã là mùng 4 tết rồi. Sau những ngày vui mình không quên viết blog để chia sẽ những thứ mình tìm hiểu đâu :D, mong sẽ đến nhiều hữu ích cho người dùng internet hiện tại.

Bài viết này mình sẽ chia sẽ cho mọi người tạo biểu đồ đơn giản mà đẹp mặt, không bị gò bó hay bị lỗi người dùng xem ở nhiều trình duyệt khách nhau, và nó sẽ hiển thị bố cục phù hợp với nhiều sở thích khác nhau.

Chúng ta bắt đầu nhé.

Biểu đồ HTML5 Canvas được triển khai bằng thư viện Chart.js , trong đó đối tượng JSON được cung cấp làm nguồn dữ liệu.

Tiện ích ChartJS

Vui lòng tham khảo liên kết sau để biết tài liệu về plugin jQuery Chart.
https://www.chartjs.org/

Đánh dấu HTML

Mã đánh dấu HTML bao gồm các thành phần sau:
canvas – Để hiển thị biểu đồ.

< canvas id ="dvChart"></ canvas >

Điền biểu đồ bằng dữ liệu JSON

Bên trong HTML Markup, các tệp tập lệnh sau được kế thừa.

1. jquery.min.js

2. biểu đồ.umd.min.js

Bên trong trình xử lý sự kiện jQuery document ready, một Mảng được tạo ra để chứa các đối tượng JSON và nhiều đối tượng JSON được thêm vào Mảng.

Mỗi đối tượng JSON bao gồm

1. Tên - Giá trị này sẽ được hiển thị trong chú thích.

2. Mức độ phổ biến - Giá trị này sẽ được sử dụng để điền vào Biểu đồ hình tròn.

3. Màu sắc – Giá trị này sẽ được sử dụng để thêm màu cho biểu đồ hình tròn. 

Sau đó, hàm JavaScript PopulateChart được gọi, chấp nhận hai tham số:

1. Đối tượng JSON – Chuỗi JSON nhận được từ Server-Side (Code-Behind) được chuyển đổi thành đối tượng JSON.

2. Loại biểu đồ – Loại biểu đồ.

Hàm JavaScript PopulateChart

Bên trong hàm này, phần tử canvas được tham chiếu và truyền dưới dạng tham số cho đối tượng Chart của thư viện Chart.js .

Sau đó, kiểu và dữ liệu được gán và dữ liệu được định nghĩa bằng nhãn và tập dữ liệu.

Bên trong nhãn, thuộc tính Name của đối tượng JSON được thiết lập.

Đối với các tập dữ liệu, các thuộc tính sau được thiết lập, tức là data, backgroundColor, borderColor, borderWidth.

Lưu ý : Để biết thêm thông tin, vui lòng tham khảo tài liệu Chart.js: Tài liệu về biểu đồ tròn .

Cuối cùng, chú thích được xác định và Biểu đồ được điền thông tin.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<script type="text/javascript">
    $(function () {
        // Array of Fruits
        var fruits = new Array();
 
        var fruit = {};
        fruit.Name = "Mango";
        fruit.Popularity = 20;
        fruit.Color = "#FEBD01";
        fruits.push(fruit);
 
        fruit = {};
        fruit.Name = "Orange";
        fruit.Popularity = 40;
        fruit.Color = "#FF8C00";
        fruits.push(fruit);
 
        fruit = {};
        fruit.Name = "Peach";
        fruit.Popularity = 55;
        fruit.Color = "#FFCBA6";
        fruits.push(fruit);
 
        PopulateChart(fruits, 'pie');
    });
 
    function PopulateChart(chartData, chartType) {
        var dvChart = $('#dvChart');
        var chart = new Chart(dvChart, {
            type: chartType,
            data: {
                labels: chartData.map(fruit => fruit.Name),
                datasets: [{
                    data: chartData.map(fruit => fruit.Popularity),
                    backgroundColor: chartData.map(fruit => fruit.Color),
                    borderColor: ['#FFF'],
                    borderWidth: 1
                }]
            },
            options: {
                plugins: {
                    legend: {
                        labels: {
                            boxWidth: 10, // Width of legend box
                            boxHeight: 10 // Height of legend box
                        },
                        display: true, // Show hide legends
                        position: 'right', //'left', 'right', 'top', 'bottom'
                        align: 'center', // 'start', 'center', 'end'
                        reverse: false // Reverse order
                    }
                }
            }
        });
    };
</script>

DOWNLOAD SOURCE CODE

Chúc mọi người thành công với tiện ích trên.