Hình 19: Các kiểu kí hiệu cho mốc dữ liệu

Một phần của tài liệu nghiên cứu về canvas trong html5 và xây dựng thư viện vẽ đồ thị sử dụng canvas (Trang 45)

hình của người sử dụng. Ở trên hình còn minh họa cho chức năng bật và tắt lưới của đồ thị. Với các cấu hình cho kiểu kí tự hiển thị ở mốc dữ liệu như hình mình họa, ứng với các giá trị đã cấu hình ở mảng đầu vào myConfig[2] = 1 là hình tròn, myConfig[2] = 2 là hình vuông, và các giá trị khác là hình *. Để tạo được các hình minh họa đúng theo cấu hình thì trong phần mã của thư viện sẽ sử dụng các câu lệnh if () để xét các trường hợp xảy ra khi cấu hình.

if (myConfig[2]==1) {

context.arc(startX + j*colWidth, (chartHeight - myData[i][j]) ,5,Math.PI*2,false) ;}

để tạo nên hình dạng của các mốc dữ liệu như trên phải cần tới cấu trúc các câu lệnh để tạo hình dáng như sau:

• Vẽ kí tự là hình tròn. Cấu trúc: arc(x, y, R, Startangle, Angle, Alockwise) Trong đó:

o x, y là tọa độ của tâm hình tròn.

o R là bán kinh hình tròn.

o Startangle là góc bắt đầu vẽ

o Angle là góc cần vẽ

o Alockwise là hướng của kim đồng hồ (gồm 2 giá trị là true và false) .

• Vẽ kí tự là hình vuông. Cấu trúc: rect(x, y, w, h) Trong đó:

o x, y là tọa độ của điểm là góc trên bên trái của hình chữ nhật cần vẽ.

o w, h là chiều rộng và chiều cao của hình chữ nhật muốn vẽ. Ở đây là

w = h.

• Vẽ kí tự là hình *. Để vẽ kí tự biểu diễn là hình sao thì ở trong thư viện sử dụng cấu trúc của biểu diễn kí tự. context.fillText(text, x, y, length)

Trong đó:

o text là kí tự * cần điền.

o x, y là tọa độ của điểm đầu tiên cần điền kí tự

o Length là chiều dài mà kí tự được hiển thị.

Do font mặc định trong canvas là 10px san-serif, nên kí tự * hiển thị được rất bé và không đáp ứng được việc hiển thi trên đồ thị, nên trong thư viện đã sử dụng thêm phương thức chuyển font để điển kí tự * rồi sau đó chuyển lại về dạng mặc định.

Cấu trúc chuyển font: context.font = “40pt Arial”. Với 40pt là cỡ chữ hiển thị và

Arial là phông chữ sẽ hiển thị.

Các đồ thị đều có thể chỉnh sửa theo yêu cầu của người sử dụng, tùy thuộc theo từng đồ thị. Nhưng có một số các đồ thị có tham số có thể chỉnh sửa nhưng cần chú ý giới hạn có thể chỉnh sửa của các tham số đó. Nếu quá lạm dụng sự chỉnh sửa các tham số, để dẫn đến sự chênh lệch giữa các tham số với nhau sẽ phá vỡ bố cục của đồ thị và dẫn tới đồ thị có thể hiển thị không như mong muốn của người sử dụng. Ví dụ cụ thể ở đồ thị ChartPie, với tham số cấu hình đầu vào là TextWidth: là chiều dài cho phép của chuối kí tự hiển thị trong đồ thị, nếu tham số này quá nhỏ sẽ dần tới chuối kí tự sẽ bị có và không thể đọc được.

Hình20: Tham số TextWidth = 20, quá nhỏ nên gây ra lỗi.

Một phần của tài liệu nghiên cứu về canvas trong html5 và xây dựng thư viện vẽ đồ thị sử dụng canvas (Trang 45)