Share Vẽ biểu đồ theo phong cách hoạt hình với thư viện Chart.xkcd

[filiallion]

Language

Tiếng Việt

Đa phần các website hiện nay đều được thiết kế theo phong cách hiện đại, chuyên nghiệp, rất đẹp mắt. Tuy nhiên cũng không ít website được thiết kế theo phong cách hoạt hình ngộ nghĩnh, dễ thương. Các thành phần trên website các bạn có thể thiết kế dễ dàng bằng CSS nhưng nếu các bạn cần thiết kế biểu đồ theo phong cách hoạt hình thì thật sự khó khăn. Bài viết này tôi giới thiệu với các bạn thư viện Chart.xkcd dùng để thiết kế biểu đồ theo phong cách hoạt hình một cách dễ dàng, tất cả các bạn lập trình viên đều có thể sử dụng thư viện Chart.xkcd để tạo biểu đồ hoạt hình nhanh chóng, đơn giản.

Điểm đặc biệt của biểu đồ được tạo bởi Chart.xkcd đó là các biểu đồ đều được chuyển thành dạng hình ảnh vector SVG. Vì vậy, các bạn có thể dễ dàng điều chỉnh kích thước tương thích với vùng nội dung cũng như dễ dàng hiển thị trên các thiết bị di động.

Các bạn tải thư viện Chart.xkcd tại địa chỉ https://github.com/timqian/chart.xkcd và tích hợp vào website với dòng mã lệnh HTML như sau:

<script src="path/to/chart.xkcd.min.js"></script>

Tiếp theo là tạo một thành phần HTML để chứa biểu đồ như sau:

<svg class="chart-xkcd"></svg>

Cuối cùng, các bạn cài đặt thư viện Chart.xkcd với nội dung JavaScript ví dụ như sau:

var chartXkcd = new chartXkcd.Line(
    document.querySelector('.chart-xkcd'),
    title: 'Example',
    xLabel: 'Month',
    yLabel: 'Dollars',
    data: {
        labels: ['1', '2', '3'],
        datasets: [{
            label: 'Plan',
            data: [30, 70, 200]
        }, {
            label: 'Reality',
            data: [0, 1, 30]
        }]
    }
);

Các bạn có thể xem thêm các ví dụ của thư viện Chart.xkcd tại địa chỉ https://timqian.com/chart.xkcd/example.html.