Mình đã dùng thư viện Chart.js để vẽ biểu đồ trên website như thế nào?

Mình đã dùng thư viện Chart.js để vẽ biểu đồ trên website như thế nào?

Mình đã dùng thư viện Chart.js để vẽ biểu đồ trên website như thế nào? Trong bài viết này mình sẽ chia sẻ cách mà mình dùng một trong những thư viện phổ biến và nổi tiếng nhất trong việc vẽ biểu đồ trên website. 🚀

Đầu tiên, như mọi khi mình sẽ giới thiệu một chút về thứ mình sẽ dùng. Chart.js là gì? Đây là một trong những dự án mã nguồn mở giúp cho mọi người có thể vẽ những biểu đồ thể hiện số liệu trên website một cách dễ dàng và đẹp nhất. Dự án này hiện tại đã có đến hơn 41.000 stars và 2600 lượt commit trên Github và được cập nhật thường xuyên. 4 điểm mạnh nhất của Chart.js là:
– Dự án mã nguồn mở: cả cộng đồng phát triển và khắc phục lỗi.
– Tương thích tốt với HTML 5 😅cái này gần như bắt buộc ở hiện tại
– Hơn 8 kiểu biểu đồ phổ biến nhất hiện nay
– Reponsive: hiển thị đẹp nhất trên tất cả các thiết bị từ Desktop, Tablet, Mobile.

Mình không thường xuyên thể hiện biểu đồ trên website, tuy nhiên khi cần thì mình sẽ chọn Chart.js bởi nó chuyên nghiệp và dễ dàng nếu bạn đã sử dụng quen. Tất nhiên, bạn có thể sử dụng những plugin nếu dùng WordPress hoặc dùng các services nổi tiếng như Infogram hay Piktochart , những dịch vụ này thì làm được nhiều hơn nhưng phí thì cũng cao hơn (tầm $20/tháng trở lên) – Nếu bạn thường xuyên vẽ chart hàng ngày hoặc số liệu lớn cần liên kết SQL thì dùng nha 😄

Quay trở lại với Chart.js và câu hỏi ban đầu Mình đã dùng thư viện Chart.js để vẽ biểu đồ trên website như thế nào? Có 3 bước cơ bản trong việc tạo một biểu đồ bằng thư viện Chart.js.
Bước 1: khai báo thư viện Chart.js và BootrapCDN
Bước 2: Tạo một thẻ <Div> với <canvas> bên trong để hứng biểu đồ
Bước 3: Tùy biến biểu đồ và thay đổi số liệu

Bước 1: khai báo thư viện Chart.js và BootrapCDN

Trong bước đầu này, điều cần làm là khai báo đường dẫn đến thư viện Chart.js cũng như khai báo đường dẫn BootrapCDN. Nghe nó hơi phức tạp nếu như bạn không biết HTML. 😄Nói chứ chỉ đơn giản là việc copy 2 dòng code và bỏ nó vào thẻ <head></head> của một cấu trúc HTML thôi. Với WordPress thì bạn có thể dùng Plugin “Custom CSS & JSS” để chép 2 đoạn code này vào cho dễ, giống như mình dưới đây:

Mình đã dùng thư viện Chart.js để vẽ biểu đồ trên website như thế nào?

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Mình đã dùng thư viện Chart.js để vẽ biểu đồ trên website như thế nào?

Hiện tại 2 dòng code này đang sử dụng phiên bản 2.6.0 của Chart.js và phiên bản 3.3.7 của Bootstrap. Bạn có thể vào Documentation của Chart.js tại đây để cập nhật phiên bản mới nếu có nha.

Bước 2: Tạo một thẻ <Div> với <canvas> bên trong để hứng biểu đồ

Tạo một thẻ <div> chứa một thẻ <canvas> với id nhất định bên trong, đây sẽ là nơi hiển thị biểu đồ của chúng ta. Bạn có thể bỏ thẻ <div> này này vào bất kỳ đâu trong trang web nếu bạn muốn nó hiển thị ở vị trí đó.

<div class="container">
    <canvas id="myChart"></canvas>
  </div>

Vậy là xong bước 2 🎉 Tất nhiên, có thể custom các thẻ <div> theo những cấu trúc tùy ý. Trong một vài trường hợp, những biểu đồ sẽ cần bố trí theo một thiết kế nhất định.

Bước 3: Tùy biến biểu đồ và thay đổi số liệu

Trong bước này, tùy vào mục đích của mỗi người mà chúng ta tùy biến biểu đồ cho phù hợp với nhu cầu. Chart.js hiện tại hỗ trợ tới 8 dạng biểu đồ phổ biến nhất hiện nay nên chúng ta có thể hoàn toàn tự tin sử dụng và tùy chỉnh theo ý một cách dễ dàng. Dưới đây là một đoạn <script> tùy chỉnh một biểu đồ cột.

<script>
    let myChart = document.getElementById('myChart').getContext('2d');

    // Global Options
    Chart.defaults.global.defaultFontFamily = 'Lato';
    Chart.defaults.global.defaultFontSize = 18;
    Chart.defaults.global.defaultFontColor = '#777';

    let massPopChart = new Chart(myChart, {
      type:'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
      data:{
        labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
        datasets:[{
          label:'Population',
          data:[
            617594,
            181045,
            153060,
            106519,
            105162,
            95072
          ],
          //backgroundColor:'green',
          backgroundColor:[
            'rgba(255, 99, 132, 0.6)',
            'rgba(54, 162, 235, 0.6)',
            'rgba(255, 206, 86, 0.6)',
            'rgba(75, 192, 192, 0.6)',
            'rgba(153, 102, 255, 0.6)',
            'rgba(255, 159, 64, 0.6)',
            'rgba(255, 99, 132, 0.6)'
          ],
          borderWidth:1,
          borderColor:'#777',
          hoverBorderWidth:3,
          hoverBorderColor:'#000'
        }]
      },
      options:{
        title:{
          display:true,
          text:'Largest Cities In Massachusetts',
          fontSize:25
        },
        legend:{
          display:true,
          position:'right',
          labels:{
            fontColor:'#000'
          }
        },
        layout:{
          padding:{
            left:50,
            right:0,
            bottom:0,
            top:0
          }
        },
        tooltips:{
          enabled:true
        }
      }
    });
  </script>

Kết quả là chúng ta sẽ thu được như sau:

https://codepen.io/huuphongnguyen/pen/zyjwam

Để tùy chỉnh biểu đồ theo ý thích, bạn cần phải đọc qua một xíu về Documentation của Chart.js để hiểu phải ghi cú pháp như thế nào cho đúng. 😆Đừng lo, tài liệu này được Chart.js viết rất tốt nên nó khá dễ đọc cho những người bắt đầu.

Documentation Chart.js: https://www.chartjs.org/docs/latest/

Đấy. Chỉ vậy thôi. Mình chỉ cần 30 phút để hiểu cách dùng và làm thế nào để sử dụng nó một cách theo ý 😄. Bù lại chúng ta sẽ giúp cho việc thể hiện biểu đồ chuyên nghiệp hơn rất nhiều mà không phải xài các bên dịch vụ với một chi phí không thực sự nhỏ.

Nguồn tham khảo:

  • Traversy Media (2017) Getting Started With Chart.js, Available at: https://www.youtube.com/watch?v=sE08f4iuOhA (Accessed: 7 January 2019)
  • Chart.js (2019) Documentation, Available at: https://www.chartjs.org/docs/latest/ (Accessed: 7 January 2019)
  • Chart.js (2019) Simple, clean and engaging charts for designers and developers, Available at: https://github.com/chartjs (Accessed: 7 January 2019)

Bài viết bạn nên đọc thêm:

Đánh giá bài viết:

Twitter
Facebook
LinkedIn
Email
Print