Tìm hiểu về Chart.js

Tìm hiểu về Chart.js

Anh NguyễnBạn nghĩ gì về bài viết này?

Giới thiệu

Đây là một template sử dụng Chart.js https://colorlib.com/polygon/gentelella/index.html, chắc hẳn các bạn cũng như mình đều sẽ thấy giao diện chart trong trang web của họ rất hiện đại và dễ hiểu. Đấy là nhìn về mặt giao diện, còn về mặt coding, ta cũng rất dễ dàng để tạo ra được những biểu đồ như thế, nhờ Chartjs. Chỉ cần vài tiếng đồng hồ là bạn có thể sử dụng thư viện này 1 cách thuần thục rồi. Để các bạn không mất thời gian đọc docs thì hôm nay mình xin giới thiệu cơ bản về Chartjs để các bạn có thể áp dụng vào trang web của mình.

Download/Installation

Có 2 cách để các bạn có thể sử dụng Chart.js đó là:

Ứng dụng demo của mình sử dụng Laravel 5.4 và npm thế nên mình chọn cách cài đặt qua npm như trên.

Sau khi cài đặt bạn cần phải sử dụng webpack để build nó ra public, truy cập vào webpack.mix.js và thêm dòng này ở phía dưới:

mix.copy('node_modules/chart.js/dist/Chart.js', 'public/js');
Code language: JavaScript (javascript)

rồi sau đó chạy lệnh npm run dev, bạn sẽ thấy file Chart.js trong thư mục public/js của mình. Tiếp đó bạn thêm dòng này vào trong views/layouts/app.blade.php:

<script src="{{ asset('js/Chart.js') }}"></script>
Code language: HTML, XML (xml)

Vậy là hoàn tất quá trình cài đặt để sử dụng Chart.js. Rất đơn giản phải không!

Sử dụng Chart.js

Mình xin phép viết 1 đoạn demo nhỏ kèm hình ảnh ngay trong file home.blade.php như sau: 6471c55d df38 41cc 88a8 50f34e07eae4

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>

                <div class="panel-body">
                    <canvas id="line-chart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<script type="text/javascript">
    window.onload = function () {
        Chart.defaults.global.defaultFontColor = '#000000';
        Chart.defaults.global.defaultFontFamily = 'Arial';
        var lineChart = document.getElementById('line-chart');
        var myChart = new Chart(lineChart, {
            type: 'line',
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "June"],
                datasets: [
                    {
                        label: 'PHP Activities',
                        data: [80, 30, 63, 20, 110, 3],
                        backgroundColor: 'rgba(0, 128, 128, 0.3)',
                        borderColor: 'rgba(0, 128, 128, 0.7)',
                        borderWidth: 1
                    },
                    {
                        label: 'Ruby Activities',
                        data: [18, 72, 10, 39, 19, 75],
                        backgroundColor: 'rgba(0, 128, 128, 0.7)',
                        borderColor: 'rgba(0, 128, 128, 1)',
                        borderWidth: 1
                    }
                ]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                },
            }
        });
    };
</script>
Code language: HTML, XML (xml)

Nhìn thì tưởng rắc rối nhưng thật ra rất đơn giản, bạn chỉ cần tạo 1 thẻ canvas để nhét chart của mình vào, như ví dụ của mình là thẻ <canvas id="line-chart"></canvas>, tiếp theo đó là 1 đoạn javascript để config việc hiển thị chart như thế nào. Đừng lo nếu bạn chưa hiểu những biến được set trong javascript kia để làm gì. Mình sẽ giải thích nó ngay dưới đây.

Cấu hình Chart

Chart Data

Để hiển thị được dữ liệu ra màn hình, chúng ta phải khai báo 1 object Chart chứa tất cả các thông tin cần thiết mà bạn muốn show ra. Dưới đây là một vài tham số cơ bản mà mình hay sử dụng:

TênLoạiMô tả
datasetsArray[object]Chứa dữ liệu cho mỗi tập dữ liệu, dữ liệu ở bên trong datasets phụ thuộc vào từng loại chart khác nhau
labelsArray[string]các nhãn hiển trên trục của chart, nó phụ thuộc vào việc bạn định nghĩa xLabels – trục Ox, yLabels – trục Oy (còn nếu không định nghĩa thì nó sẽ hiểu là trục Ox)
xLabelsArray[string]các nhãn hiển thị trên trục Ox của chart
yLabelsArray[string]các nhãn hiển thị trên trục Oy của chart

Ở đoạn code trên của mình thì mình chỉ cần đặt labels là 1 mảng các nhãn được hiển thị ở trục Ox và các tham số bên trong datasets (vì biểu đồ của mình có 2 line nên mình khai báo 2 object bên trong datasets).

Tạo chart với các Options

options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },

Đoạn code trên của mình chỉ đơn giản là cho trục Oy của chart bắt đầu từ 0, còn nếu bạn không set giá trị này thì chart của bạn sẽ lấy mặc định bắt đầu từ số nhỏ nhất trong data mà bạn set. Đây là ví dụ đơn giản sử dụng options trong chart.

Cấu hình global

Nghe cái tên global thì chắc các bạn cũng hình dung được nhiệm vụ của việc cấu hình này, nó dùng để cấu hình cho tất cả các loại chart trong trang của bạn để mỗi khi thay đổi bạn khỏi phải tìm kiếm nó trong options ở từng chart. Nó không khác gì biến global sử dụng trong các ngôn ngữ lập trình.

Chartjs hay ở chỗ là nếu bạn không xác định những tham số này, thì nó sẽ cho bạn các giá trị mặc định của từng loại biểu đồ và cân bằng chúng một cách hợp lí nhất. Việc bạn khai báo chỉ là bạn muốn thay đổi một giá trị mặc định nào đó. Như trong demo mình làm, mình có khai báo 2 giá trị global:

Chart.defaults.global.defaultFontColor = '#000000';
Chart.defaults.global.defaultFontFamily = 'Arial';
Code language: PHP (php)

Đơn giản là mình sẽ thay đổi màu chữ và font chữ cho chart, và nó được áp dụng cho tất cả các loại chart khác nếu mình muốn vẽ thêm. Bạn có thể tham khảo bảng setting về font dưới đây để hiểu hơn:

TênLoạiGiá trị mặc địnhMô tả
defaultFontColorColor‘#666’Xác định font color cho tất cả các text
defaultFontFamilyString“‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”Xác định font chữ cho tất cả các text
defaultFontSizeNumber12Xác định font chữ cho tất cả các text
defaultFontStyleString‘normal’Xác định font style cho tất cả các text, không áp dụng cho tooltip title hay footer và không áp dụng cho title của Chart

Các cấu hình chung khác của Chart

Các options dưới đây, các bạn có thể sử dụng được cho tất cả các loại Chart. Bạn có thể set nó thông qua global, hoặc viết nó bên trong options của từng Chart

TênLoạiGiá trị mặc địnhMô tả
responsiveBooleantrueTùy chọn giúp bạn thay đổi kích thước của canvas khi vùng chứa của nó thay đổi
responsiveAnimationDurationNumber0Thời lượng tính bằng mili giây cần để hoạt hình với kích thước mới sau sự kiện thay đổi kích cỡ
maintainAspectRatioBooleantrueDuy trì tỷ lệ khung hình ban đầu (chiều rộng / chiều cao) khi thay đổi kích cỡ
eventsArray[String][“mousemove”, “mouseout”, “click”, “touchstart”, “touchmove”, “touchend”]Sự kiển mà Chart lắng nghe, sử dụng cho các tooltips và hovering
onClickFunctionnullĐược gọi nếu event ở đây là mouseup hoặc click, nó thông qua 1 event và 1 mảng các phần tử active
legendCallbackFunctionfunction (chart) { }Chức năng tạo ra một legend. Nhận đối tượng chart để tạo ra một legend từ nó. Thực hiện mặc định trả về một chuỗi HTML.
onResizeFunctionnullĐược gọi khi việc thay đổi kích cỡ xảy ra. Nhận được thông qua hai đối số: thực thể của chart và kích thước mới.

Bài viết của mình khá dài rồi nên mình sẽ tiếp tục giới thiệu về Chart ở bài viết sau. Chú thích:

  • legends: phần chú thích của chart 375a35df b8ce 4521 aa70 ce09751278f4
  • tooltips: chú thích từng point trên chart ccbba86b e857 4a4e b7e3 1f562a22d0b8

Nguồn: https://viblo.asia/p/tim-hieu-ve-chartjs-Qbq5Qqvw5D8

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Bình luận