Share Tạo biểu đồ chuyên nghiệp với thư viện Chart.js

[filiallion]

Language

Tiếng Việt

Để tạo các biểu đồ trên website các bạn có nhiều thư viện để làm việc này từ thư viện PHP cho tới thư viện JavaScript. Với tôi, tôi thường sử dụng các thư viện JavaScript để tạo ra các biểu đồ chuyên nghiệp với nhiều mẫu phổ biến từ đơn giản cho tới phức tạp. Thư viện Chart.js là một trong số những thư viện tôi thường sử dụng để tạo biểu đồ nhất vì Chart.js cung cấp rất nhiều mẫu biểu đồ thông dụng cũng như việc sử dụng thư viện này khá dễ dàng.

Để cài đặt thư viện Chart.js các bạn sử dụng công cụ composer. Các bạn có thể tìm hiểu về công cụ composer tại địa chỉ http://getcomposer.org.

Các bạn chạy lệnh composer sau để tải thư viện Chart.js:

composer require nnnick/chartjs

Trong gói thư viện này sẽ có thư mục dist là nơi chứa các tập tin JavaScript cần thiết để các bạn tích hợp vào website. Các bạn sẽ sử dụng tập tin Chart.bundle.min.js.

Các bạn tích hợp tập tin Chart.bundle.min.js vào website với dòng lệnh như sau:

<script src="path/to/Chart.bundle.min.js"></script>

Các bạn tham khảo nội dung mã lệnh sau để biết cách sử dụng:

<canvas id="chart-js" width="500" height="500"></canvas>

<script>
    var chartjsElement = document.getElementById('chart-js');
    var chartjs = new Chart(chartjsElement, {
        type: 'bar',
        data: {
            labels: ['Đỏ', 'Xanh', 'Vàng', 'Xanh lá', 'Tím', 'Cam'],
            datasets: [{
                label: '# bình chọn',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>

Các bạn có thể tìm hiểu thêm về thư viện Chart.js tại địa chỉ http://www.chartjs.org.