Cách xây dựng biểu đồ đơn giản với Chart.js

Cách xây dựng biểu đồ đơn giản với Chart.js
Những độc giả như bạn giúp ủng hộ MUO. Khi bạn mua hàng bằng các liên kết trên trang web của chúng tôi, chúng tôi có thể kiếm được hoa hồng liên kết. Đọc thêm.

Trực quan hóa dữ liệu theo cách mà mọi người có thể hiểu được là rất quan trọng trong thời đại ra quyết định dựa trên dữ liệu. Biểu đồ và đồ thị giúp chúng ta hiểu được dữ liệu, xu hướng và mẫu phức tạp một cách dễ dàng.





Video MUO trong ngày CUỘN ĐỂ TIẾP TỤC VỚI NỘI DUNG

Hãy cùng khám phá cách tạo biểu đồ đơn giản bằng Chart.js, một thư viện JavaScript phổ biến để trực quan hóa dữ liệu.



Chart.js là gì?

Chart.js là một công cụ miễn phí giúp các nhà phát triển tạo biểu đồ tương tác cho các ứng dụng web. Phần tử canvas HTML5 hiển thị biểu đồ, cho phép chúng hoạt động trên các trình duyệt hiện đại.





điện thoại của tôi có thể được theo dõi nếu dịch vụ vị trí tắt không

Các tính năng của Chart.js

Các tính năng bao gồm:

  • Chart.js nổi bật nhờ cách tiếp cận thân thiện với người dùng. Với mã tối thiểu, nhà phát triển có thể tạo biểu đồ tương tác và hấp dẫn trực quan.
  • Thư viện rất linh hoạt và hỗ trợ các loại biểu đồ khác nhau như đường, thanh, bánh nướng và radar. Nó có thể đáp ứng nhu cầu biểu diễn dữ liệu đa dạng.
  • Chart.js thiết kế biểu đồ để hoạt động tốt trên máy tính để bàn và thiết bị di động. Họ có khả năng đáp ứng và thích nghi.
  • Bạn có thể thay đổi biểu đồ Chart.js bằng cách sử dụng nhiều tùy chọn thay vì cài đặt mặc định. Nhà phát triển có thể tinh chỉnh biểu đồ để phù hợp với yêu cầu cụ thể.

Thiết lập môi trường

Bạn có thể thiết lập thư viện theo một trong hai cách:



  • Sử dụng CDN . Chỉ cần đưa thẻ tập lệnh sau vào phần đầu tài liệu HTML của bạn.
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  • Sử dụng Trình quản lý gói. Nếu bạn thích trình quản lý gói hơn, bạn có thể cài đặt Chart.js bằng cách sử dụng npm, Trình quản lý gói nút :
     npm install chart.js
    Hoặc Sợi: 
     yarn add chart.js

Cấu trúc HTML cơ bản

Để nhúng biểu đồ, bạn sẽ cần phần tử canvas trong HTML của mình. Đây là một cấu trúc cơ bản:

 <!DOCTYPE html> 
<html lang="en"> 
 <head> 
   <meta charset="UTF-8" /> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
   <title>Document</title> 
   <link rel="stylesheet" href="./style.css" /> 
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
 </head> 
 
 <body> 
   <h1>Welcome to My Data Representation</h1> 
   <canvas id="myChart" width="400" height="150"></canvas> 
  <script></script> 
 </body> 
</html>

Để tạo kiểu cho trang, hãy tạo một tệp, phong cách.css và thêm CSS sau vào nó:



 @import url("https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap"); 
 
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
html { 
  font-size: 62.5%; 
} 
 
body { 
  font-family: "Tilt Neon", sans-serif; 
  padding: 2rem 4rem; 
} 
 
h1 { 
  font-size: 3rem; 
  color: #333; 
  text-align: center; 
  padding: 3rem; 
}

Tạo biểu đồ đầu tiên của bạn: Ví dụ về biểu đồ thanh

Trong ví dụ này, chúng tôi sẽ sử dụng biểu đồ thanh, lý tưởng để so sánh các điểm dữ liệu riêng lẻ theo danh mục.

  1. bên trong kịch bản ở cuối HTML của bạn, hãy bắt đầu bằng cách chọn phần tử canvas bằng thuộc tính id của nó:
     let canvas = document.getElementById('myChart');
  2. Tiếp theo, tìm hiểu bối cảnh về cách hiển thị biểu đồ của bạn. Trong trường hợp này, đó là bối cảnh vẽ 2D.
     let ctx = canvas.getContext('2d');
  3. Tiếp theo, khởi tạo biểu đồ mới trên khung vẽ bằng cách sử dụng Đồ thị() chức năng. Hàm này lấy bối cảnh canvas làm đối số đầu tiên, sau đó là đối tượng của các tùy chọn bao gồm dữ liệu sẽ hiển thị trong biểu đồ.
     let options = {}; 
    let myChart = new Chart(canvas, options);
  4. Tiếp theo, điền vào đối tượng tùy chọn để chỉ định loại biểu đồ, dữ liệu và nhãn bạn muốn trong biểu đồ của mình.
     let options = { 
      type: "bar", 
     
      data: { 
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     
        datasets: [{ 
          label: "Total number of votes on favourite color", 
          data: [12, 19, 3, 5, 2, 3], 
        }], 
      }, 
    };

Hiện tại, biểu đồ của bạn trông như thế này:



biểu đồ không có kiểu dáng tùy chỉnh

Tạo kiểu và tùy chỉnh biểu đồ

Chart.js cung cấp vô số tùy chọn để tùy chỉnh biểu đồ như:

  • Màu sắc : Tùy chỉnh màu biểu đồ, từ nền thanh đến đường viền đường, với Chart.js.
  • Truyền thuyết : Đặt chú giải ở trên cùng, dưới cùng, bên trái hoặc bên phải cho rõ ràng.
  • Chú giải công cụ : Sử dụng chú giải công cụ để biết thông tin chi tiết trên các điểm dữ liệu xuất hiện khi di chuột.
  • Hoạt hình : Đặt kiểu và tốc độ của hoạt ảnh biểu đồ để hiển thị động.

Ví dụ đơn giản, bạn có thể đặt một số kiểu cơ bản cho tập dữ liệu của mình bằng cách thay đổi đối tượng tùy chọn như sau:

cách khôi phục ảnh đã xóa từ android 
 let options = { 
  type: "bar", 
 
  data: { 
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
 
    datasets: [{ 
      label: "Total number of votes on favourite color", 
      data: [12, 19, 3, 5, 2, 3], 
      backgroundColor: "rgba(75, 192, 192, 0.2)", 
      borderColor: "rgba(75, 192, 192, 1)", 
      borderWidth: 1, 
    }], 
  }, 
};

Biểu đồ của bạn bây giờ sẽ trông như thế này:

biểu đồ với kiểu css tùy chỉnh

Các phương pháp hay nhất và mẹo về hiệu suất

Để đảm bảo hiệu suất tối ưu khi hiển thị biểu đồ:

  • Giới hạn các điểm dữ liệu được sử dụng trong Chart.js để hiển thị nhanh hơn và trải nghiệm người dùng tốt hơn.
  • Nếu bạn cập nhật biểu đồ thường xuyên, hãy sử dụng phương thức destroy() để xóa biểu đồ cũ trước khi hiển thị biểu đồ mới.

Lời khuyên để tránh những cạm bẫy thường gặp

Dưới đây là một số cạm bẫy cần tránh:

  • Đảm bảo dữ liệu của bạn luôn được định dạng theo cùng một cách để tránh mọi bất ngờ.
  • Để cải thiện hiệu suất, tốt nhất nên hạn chế hoạt ảnh. Mặc dù chúng có thể giúp nâng cao trải nghiệm người dùng nhưng sử dụng quá nhiều có thể gây ra vấn đề.

Chart.js: Trao quyền trực quan hóa dữ liệu web

Chart.js là một công cụ hữu ích khi bạn muốn hiển thị dữ liệu tương tác một cách hấp dẫn. Bạn có thể dễ dàng tạo trực quan hóa dữ liệu đẹp mắt để cung cấp thông tin chuyên sâu và đưa ra quyết định sáng suốt.

Chart.js cung cấp một giải pháp mạnh mẽ để trực quan hóa dữ liệu, cho dù bạn là người có kinh nghiệm hay mới bắt đầu phát triển.