Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Cách vẽ các Biểu đồ sử dụng JavaScript và HTML5 Canvas

by
Difficulty:BeginnerLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Final product image
What You'll Be Creating

Trong hướng dẫn này tôi sẽ chỉ cho bạn cách sử dụng JavaScript và canvas như là một phương tiện để hiển thị thông tin số dưới hình thức của biểu đồ hình tròn và vành khuyên.

Có những cách dễ dàng hơn để tạo ra biểu đồ so với viết code từ đầu, ví dụ như cái này thư viện biểu đồ đầy đủ từ CodeCanyon.

Infographic charts and graphics HTML tags library
Thư viện biểu đồ từ CodeCanyon

Nhưng nếu bạn muốn biết những gì ở phía sau của một thư viện như thế này, hãy đọc tiếp.

Biểu đồ hình tròn là gì?

Một biểu đồ là một công cụ thống kê được sử dụng để biểu diễn dữ liệu số bằng đồ thị. Một biểu đồ hình tròn hiển thị dữ liệu số như một hình tròn được chia thành các lát cắt. Kích thước của mỗi lát cắt thì cân đối với giá trị số mà nó đại diện.

Một Biểu đồ Vành khuyên là gì?

Đơn giản, một biểu đồ vành khuyên là một biến thể của biểu đồ hình tròn. Sự khác biệt là các lát cắt được cắt về phía trung tâm của hình tròn vì vậy mà chỉ mép là có thể nhìn thấy. Bằng cách này, các biểu đồ trông giống như một vành khuyên và đó là tên gọi của nó.

Bắt đầu vẽ với Canvas

Trước khi vẽ biểu đồ hình tròn, chúng ta sẽ xem xét các phần của bản vẽ. Chúng ta sẽ xem cách sử dụng thành phần canvas và JavaScript để vẽ:

  • một đường
  • một hình cung (một phần của của hình tròn)
  • một hình dạng được tô màu

Để bắt đầu vẽ sử dụng HTML5 canvas, chúng ta sẽ cần tạo một vài thứ:

  • Một thư mục chứa các file của dự án; hãy gọi thư mục này là piechart-tutorial.
  • Một file HTML index.html bên trong thư mục piechart-tutorial. File này sẽ chứa mã HTML.
  • Một file JS script.js bên trong thư mục piechart-tutorial. File này sẽ chứa mã JavaScript.

Chúng ta sẽ giữ cho mọi thứ đơn giản và thêm các dòng code vào trong file index.html:

Chúng ta có thành phần <canvas> với ID là myCanvas vì thế mà chúng ta có thể tham chiếu tới nó trong mã JS của chúng ta. Sau đó chúng ta nạp mã JS thông qua thẻ <script>.

Bên trong file script.js, mã JS trước tiên sẽ lấy một tham chiếu tới canvas và sau đó thiết lập chiều rộng và chiều cao cho nó. Để vẽ trên một canvas, chúng ta chỉ cần tham chiếu tới ngữ cảnh 2D của nó chứa tất cả các phương thức vẽ.

Bây giờ thì chúng ta có canvas được thiết lập xong và cũng có một tham chiếu tới bản vẽ canvas, hãy định nghĩa vài hàm JavaScript mà chúng ta sẽ có thể sử dụng lại khi vẽ biểu đồ. Chúng ta sẽ thêm các hàm vào trong file script.js.

Hàm drawLine nhận năm tham số:

  1. ctx: tham chiếu tới ngữ cảnh vẽ
  2. startX: toạ độ X của điểm đầu trên trục hoành
  3. startY: toạ độ Y của điểm đầu trên trục tung
  4. endX: toạ độ X của điểm cuối trên trục hoành
  5. endY: toạ độ Y của điểm cuối trên trục tung

Chúng ta bắt đầu vẽ trục bằng cách gọi hàm beginPath(). Điều này thông báo cho ngữ cảnh vẽ rằng chúng ta bắt đầu vẽ thứ gì đó mới trên canvas. Chúng ta sử dụng moveTo() để thiết lập điểm đầu, gọi lineTo() để xác định điểm cuối, và sau đó vẽ thật sự bằng cách gọi stroke().

Bây giờ hãy xem chúng ta có thể vẽ một phần của một hình tròn, được gọi là một cung.

Hàm drawArc nhận sáu tham số:

  1. ctx: tham chiếu tới ngữ cảnh vẽ
  2. centerX: toạ độ X của trung tâm đường tròn.
  3. centerY: toạ độ Y của trung tâm đường tròn
  4. radius: toạ độ X của điểm cuối trên trục hoành
  5. startAngle: góc khởi đầu nơi mà một phần của hình tròn bắt đầu
  6. endAngle: góc kết thúc nơi mà một phần của hình tròn kết thúc

Chúng ta đã thấy cách để vẽ một đường thẳng và cách để vẽ một vòng cung, vì vậy bây giờ chúng ta hãy xem làm thế nào để vẽ một hình dạng có màu sắc. Vì mục tiêu của chúng ta là để vẽ một biểu đồ hình tròn được tạo thành từ các lát cắt, chúng ta hãy tạo ra một hàm vẽ một lát cắt của hình tròn.

Hàm drawPieSlice nhận bảy tham số:

  1. ctx: tham chiếu đến ngữ cảnh vẽ
  2. centerX: toạ độ X của tâm đường tròn
  3. centerY: toạ độ Y của tâm đường tròn
  4. radius: toạ độ X của điểm cuối trên trục
  5. startAngle: góc khởi đầu nơi mà một phần của đường tròn bắt đầu
  6. endAngle: góc kết thúc nơi mà một phần của hình tròn kết thúc
  7. color: màu được sử dụng để sơn lát cắt

Dưới đây là một ví dụ cho việc gọi ba hàm này:

Nó sẽ cho ra kết quả này:

Canvas line arc and pie slice

Bây giờ chúng ta có tất cả các công cụ cần thiết để vẽ một biểu đồ hình tròn, vì vậy hãy xem cách chúng ta sử dụng chúng với nhau như thế nào.

Vẽ Biểu đồ Hình tròn

Về khái niệm, bất kỳ biểu đồ nào cũng có hai phần chính:

  • Mẫu dữ liệu chứa dữ liệu số để được biểu đạt. Cái này được cấu trúc trong một định dạng cụ thể đối với kiểu biểu đồ.
  • Biễu diễn bằng đồ hoạ là cách dữ liệu số ở trong mẫu dữ liệu được biểu đạt bằng các thành phần đồ hoạ tuỳ thuộc vào một số quy luật theo hình thức của các hàm toán học.

Mẫu dữ liệu của Biểu đồ Hình tròn

Cách phổ biến nhất để cấu trúc mẫu dữ liệu cho biểu đồ hình tròn là một loạt các thể loại và giá trị tương ứng, nơi mà mỗi thể loại và giá trị được kết nối đến một lát cắt của hình tròn.

Ví dụ, mô hình dữ liệu của một biểu đồ hình tròn hiển thị số đĩa nhạc mà tôi đã nhóm theo thể loại sẽ trông giống như thế này:

  • Classical music: 10
  • Alternative rock: 14
  • Pop: 2
  • Jazz: 12

Chúng ta có thể thêm một đối tượng JS vào trong file script.js để lưu mô hình dữ liệu giống thế này:

Biểu diễn đồ hoạ Biểu đồ Hình tròn

Biểu đồ hình tròn sử dụng một hình tròn để hiển thị thông tin trong mẫu dữ liệu bằng cách chia nó thành các lát cắt. Mỗi lát cắt tương ứng với một thể loại từ mẫu dữ liệu, và kích thước của lát cắt là tỷ lệ với giá trị của thể loại.

Bộ sưu tập nhỏ gồm 38 đĩa nhạc của tôi có bốn thể loại. Mỗi thể loại sẽ nhận một lát cắt của biểu đồ hình tròn tỉ lệ với số lượng đĩa trong thể loại đó.

Nhưng làm thế nào chúng ta đo kích thước của một lát cắt? Rất dễ—chúng ta làm điều đó bằng góc tại đầu mút của lát cắt. Tất cả những gì chúng ta phải biết là vòng tròn đầy đủ tương ứng với một góc 360 độ hoặc 2 * PI. Vì vậy một nửa vòng tròn sẽ là 180 độ hay PI, một phần tư là 90 độ hay PI/2, và vân vân.

Xác định góc cho mỗi lát cắt thể loại, chúng ta sử dụng công thức:

góc lát cắt = 2 * PI * giá trị thể loại / tổng giá trị

Theo công thức này, mười đĩa nhạc cổ điển sẽ nhận được một góc cắt có cự ly khoảng 0.526 * PI hay 94 độ

Hãy bắt đầu vẽ nào. Đối với điều này, chúng ta sẽ sử dụng một lớp JavaScript, chúng ta sẽ đặt tên nó là Piechart. Hàm xây dựng sẽ nhận một đối số options, một đối tượng có chứa những thứ sau đây:

  • canvas: tham chiếu tới canvas nơi mà chúng ta muốn vẽ biểu đồ.
  • data: tham chiếu tới một đối tượng nắm giữ mẫu dữ liệu
  • colors: một mảng nắm giữ các màu sắc mà chúng ta muốn sử dụng cho mỗi lát cắt

Lớp Piechart cũng chứa một phương thức draw() mà thực hiện công việc vẽ biểu đồ thật sự.

Lớp bắt đầu bằng cách lưu trữ options được truyền như là các tham số. Nó lưu trữ canvas tham chiếu và tạo ra một ngữ cảnh vẽ đồng thời được lưu như là một thành viên của lớp. Sau đó, nó lưu trữ mảng colors truyền vào qua options.

Phần tiếp theo là nhất quán nhất, hàm draw(). Hàm này sẽ kéo dữ liệu từ mẫu dữ liệu. Đầu tiên, nó tính toán tổng của tất cả các giá trị trong mẫu dữ liệu. Sau đó, với mỗi mục trong mẫu dữ liệu chúng ta áp dụng công thức nêu trên để tính toán góc của lát cắt. Cuối cùng, chúng ta sử dụng hàm drawPieSlice()sử dụng tâm của canvas như là tâm của lát cắt. Vì một bán kính mà chúng ta sử dụng giá trị tối thiểu giữa một nửa chiều rộng của canvas và một nửa chiều cao của canvas vì chúng ta không muốn biểu đồ của chúng ta lọt ra ngoài canvas.

Chúng ta cũng thêm khoảng cách các góc bắt đầu và kết thúc của các lát cắt mỗi lần chúng ta vẽ một thể loại, nếu không các lát sẽ chồng chéo lên nhau.

Để sử dụng lớp, chúng ta phải tạo một thể hiện của nó và sau đó gọi phương thức draw() trên đối tượng tạo ra.

Và kết quả sẽ như thế này

Drawing a pie chart using HTML5 canvas

Vẽ Biểu đồ Vành khuyên

Chúng ta đã biết cách vẽ biểu đồ hình tròn. Chúng ta cũng biết rằng một biểu đồ vành khuyên chỉ khác ở chỗ nó có một lỗ ở giữa của biểu đồ. Làm thế nào để chúng ta có thể vẽ cái lỗ? Chúng ta có thể vẽ một vòng tròn màu trắng trên biểu đồ hình tròn.

Hãy thay đổi code của lớp Piechart để làm điều đó.

Code được thêm nhìn vào tham số options để tìm một biến thành viên doughnutHoleSize. Nếu nó không tồn tại trong options thì sau đó code sẽ vẽ biểu đồ hình tròn như trước, nhưng nếu nó tồn tại thì một vòng tròn màu trắng được vẽ với tâm tương tự như của biểu đồ hình tròn.

Bán kính của hình tròn được xác định bằng cách nhân bán kính của biểu đồ hình tròn và giá trị của doughnutHoleSize. Đây nên là một số giữa 0 và 1, nơi 0 sẽ cho kết quả trong một biểu đồ hình tròn và bất kỳ giá trị nào cao hơn 0 sẽ cho kết quả trong một cái hình vành khuyên với cái lỗ ngày càng lớn, 1 làm cho biểu đồ biến mất.

Để vẽ biểu đồ vành khuyên với một lỗ nửa kích thước của biểu đồ, chúng ta sẽ cần phải sử dụng một doughnutHoleSize là 0,5 và thực hiện việc gọi hàm sau đây:

Và đây là kết quả:

drawing a doughnut chart with HTML5 canvas

Thêm các nhãn và một chú thích cho Biểu đồ

Biểu đồ hình tròn và vành khuyên trông khá ổn, nhưng chúng ta có thể làm cho chúng tốt hơn bằng cách thêm hai thứ:

  • các nhãn giá trị: biểu diễn giá trị phần trăm tương ứng với mỗi lát cắt
  • Một chú thích: biểu diễn các thể loại và các màu sắc tương ứng trong biểu đồ

Thông thường, các giá trị liên kết với các lát cắt được biểu diễn như là các giá trị phần trăm được tính toán như sau 100 * giá trị liên kết với một lát cắt / tổng giá trị, với toàn bộ vòng tròn biểu diễn 100%.

Ví dụ, trong trường hợp của chúng ta dữ liệu mẫu, các đĩa nhạc với âm nhạc cổ điển sẽ biểu diễn cho khoảng 26%. Sẽ rất tuyệt nếu có thể ghi giá trị đó trên lát cắt tương ứng. Để làm điều đó, chúng ta sẽ sử dụng hàm fillText(text,x,y) trong ngữ cảnh vẽ. Hàm này nhận ba tham số: văn bản và toạ độ xy.

Làm thế nào chúng ta tính toán toạ độ xy mà tại đó ta đặt các văn bản? Chúng ta phải vận dụng một số kiến thức hình học và một thứ gì đó gọi là tọa độ cực. Về cơ bản, tọa độ cực sử dụng bán kính và một góc để xác định vị trí của một điểm. Hai công thức mà chúng ta sẽ sử dụng là:

x = R * cos(góc)

y = R * sin(góc)

Chúng ta sẽ áp dụng hai công thức này để đặt văn bản ở nửa đường dọc theo bán kính của biểu đồ hình tròn và phân nửa xung quanh các góc cho từng lát cắt. Để làm điều này, chúng ta cần phải chỉnh sửa lớp Piechart của chúng ta và thêm các code sau đây ngay sau khối if (this.options.doughnutHoleSize) {...}:

Code duyệt qua mỗi lát cắt, tính toán tỷ lệ phần trăm, tính toán các vị trí và sử dụng phương thức fillText() để vẽ nó lên biểu đồ. Chúng ta đã sử dụng thuộc tính fillStyle để thiết lập văn bản màu trắng và thuộc tính font để thiết lập kích thước, phong cách và phông chữ của nhãn. Điều quan trọng cần lưu ý là nếu biểu đồ là một biểu đồ vành khuyên và doughnutHoleSize được thiết lập, thì nhãng sẽ được đẩy về phía các cạnh của biểu để canh nó vào giữa lát cắt.

Và đây là kết quả các biểu đồ với các nhãn giá trị:

Pie chart and doughnut chart with value labels

Để hoàn thành biểu đồ của chúng ta, điều cuối cùng chúng ta sẽ thêm là phần chú thích cho biểu đồ. Chú thích cho biểu đồ sẽ hiện thị các mục của mẫu dữ liệu và màu sắc được sử dụng tương ứng với lát cắt. Trước tiên, chúng ta phải thực hiện một số sửa ở file index.html của chúng ta bằng cách thêm một thẻ <div> sẽ lưu trữ các phần tử chú thích của chúng ta.

Sau đó trong file script.js chúng ta thêm code tạo nội dung của phần tử ghi chú. Chúng ta thêm code này ở phần cuối của hàm draw() của lớp Piechart:

Code sẽ tìm kiếm một phần tử legend được truyền thông qua tham số options. Nếu có một cái, thì phần tử này được tô màu với các mã HTML có chứa một hộp màu và tên của các thể loại trong mẫu dữ liệu.

Chúng ta cũng cần tạo ra một sự thay đổi về cách chúng ta gọi hàm để vẽ biểu đồ hình tròn của chúng ta như thế này:

Và dưới đây là biểu đồ kết quả và chú thích:

Pie chart with value labels and chart legend

Chúc mừng

Chúng ta đã thấy rằng việc vẽ biểu đồ bằng cách sử dụng HTML5 canvas thực sự không phải là khó. Nó chỉ đòi hỏi một chút về toán học và một chút kiến thức JavaScript. Bây giờ bạn có tất cả mọi thứ bạn cần để vẽ biểu đồ hình tròn và vành khuyên của riêng bạn.

Nếu bạn muốn một giải pháp nhanh chóng và dễ dàng cho việc tạo ra không chỉ biểu đồ hình tròn và vành khuyên mà còn vô số các loại biểu đồ khác, thì bạn có thể tải về Infographic Charts and Graphics HTML Tags Library hoặc bản sao của nó cho plugin WordPress Charts and Graphs WordPress Visual Designer.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.