Hướng dẫn dùng vcharts JavaScript
|
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. Show 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.  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 CanvasTrướ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ẽ:
Để bắt đầu vẽ sử dụng HTML5 canvas, chúng ta sẽ cần tạo một vài thứ:
Chúng ta sẽ giữ cho mọi thứ đơn giản và thêm các dòng code vào trong file
Chúng ta có thành phần
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. function drawPieSlice(ctx,centerX, centerY, radius, startAngle, endAngle, color ){
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(centerX,centerY);
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.closePath();
ctx.fill();
}Hàm
Dưới đây là một ví dụ cho việc gọi ba hàm này: drawLine(_ctx,100,100,200,200); drawArc(_ctx, 150,150,150, 0, Math.PI/3); drawPieSlice(_ctx, 150,150,150, Math.PI/2, Math.PI/2 + Math.PI/4, '#ff0000'); Nó sẽ cho ra kết quả này: 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ònVề khái niệm, bất kỳ biểu đồ nào cũng có hai phần chính:
Mẫu dữ liệu của Biểu đồ Hình trònCá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:
Chúng ta có thể thêm một đối tượng JS vào trong file var myVinyls = {
"Classical music": 10,
"Alternative rock": 14,
"Pop": 2,
"Jazz": 12
};Biểu diễn đồ hoạ Biểu đồ Hình trònBiể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 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:
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à
Lớp var Piechart = function(options){
this.options = options;
this.canvas = options.canvas;
this.ctx = this.canvas.getContext("2d");
this.colors = options.colors;
this.draw = function(){
var total_value = 0;
var color_index = 0;
for (var categ in this.options.data){
var val = this.options.data[categ];
total_value += val;
}
var start_angle = 0;
for (categ in this.options.data){
val = this.options.data[categ];
var slice_angle = 2 * Math.PI * val / total_value;
drawPieSlice(
this.ctx,
this.canvas.width/2,
this.canvas.height/2,
Math.min(this.canvas.width/2,this.canvas.height/2),
start_angle,
start_angle+slice_angle,
this.colors[color_index%this.colors.length]
);
start_angle += slice_angle;
color_index++;
}
}
}
Lớp bắt đầu bằng cách lưu trữ Phần tiếp theo là nhất quán nhất, hàm 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 var myPiechart = new Piechart(
{
canvas:myCanvas,
data:myVinyls,
colors:["#fde23e","#f16e23", "#57d9ff","#937e88"]
}
);
myPiechart.draw();Và kết quả sẽ như thế này Vẽ Biểu đồ Vành khuyênChú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 var Piechart = function(options){
this.options = options;
this.canvas = options.canvas;
this.ctx = this.canvas.getContext("2d");
this.colors = options.colors;
this.draw = function(){
var total_value = 0;
var color_index = 0;
for (var categ in this.options.data){
var val = this.options.data[categ];
total_value += val;
}
var start_angle = 0;
for (categ in this.options.data){
val = this.options.data[categ];
var slice_angle = 2 * Math.PI * val / total_value;
drawPieSlice(
this.ctx,
this.canvas.width/2,
this.canvas.height/2,
Math.min(this.canvas.width/2,this.canvas.height/2),
start_angle,
start_angle+slice_angle,
this.colors[color_index%this.colors.length]
);
start_angle += slice_angle;
color_index++;
}
//drawing a white circle over the chart
//to create the doughnut chart
if (this.options.doughnutHoleSize){
drawPieSlice(
this.ctx,
this.canvas.width/2,
this.canvas.height/2,
this.options.doughnutHoleSize * Math.min(this.canvas.width/2,this.canvas.height/2),
0,
2 * Math.PI,
"#ff0000"
);
}
}
}
Code được thêm nhìn vào tham số 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 Để 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 var myDougnutChart = new Piechart(
{
canvas:myCanvas,
data:myVinyls,
colors:["#fde23e","#f16e23", "#57d9ff","#937e88"],
doughnutHoleSize:0.5
}
);
myDougnutChart.draw();Và đây là kết quả: 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ứ:
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 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 Làm thế nào chúng ta tính toán toạ độ
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 ...
start_angle = 0;
for (categ in this.options.data){
val = this.options.data[categ];
slice_angle = 2 * Math.PI * val / total_value;
var pieRadius = Math.min(this.canvas.width/2,this.canvas.height/2);
var labelX = this.canvas.width/2 + (pieRadius / 2) * Math.cos(start_angle + slice_angle/2);
var labelY = this.canvas.height/2 + (pieRadius / 2) * Math.sin(start_angle + slice_angle/2);
if (this.options.doughnutHoleSize){
var offset = (pieRadius * this.options.doughnutHoleSize ) / 2;
labelX = this.canvas.width/2 + (offset + pieRadius / 2) * Math.cos(start_angle + slice_angle/2);
labelY = this.canvas.height/2 + (offset + pieRadius / 2) * Math.sin(start_angle + slice_angle/2);
}
var labelText = Math.round(100 * val / total_value);
this.ctx.fillStyle = "white";
this.ctx.font = "bold 20px Arial";
this.ctx.fillText(labelText+"%", labelX,labelY);
start_angle += slice_angle;
}
...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 Và đây là kết quả các biểu đồ với các nhãn giá trị: Để 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 Sau đó trong file Code sẽ tìm kiếm một phần tử 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: 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. |
