Thư viện dùng Canvas để tạo một môi trường có thể vẽ đồ họa được ngay trên nền web của máy khách, sử dụng thẻ Canvas trong HTML5 và JavaScript. Thư viện gồm các file đuôi “.js”, thư viện này sẽ gồm các hàm cho phép vẽ đồ thị một cách đơn giản, các hàm dễ sử dụng, có thể cấu hình cho đồ thị hoặc bớt các hàm trong thư viện nếu muốn. Dữ liệu đầu vào là các mảng nên thuận tiện cho người dùng. Các hàm trong thư viện được viết cho người sử dụng có thể đọc hiểu được, và có thể chỉnh sửa dễ dàng nhờ các ghi chú cho mỗi dòng lệnh. Thư Viện cho phép vẽ các đồ thị phổ biến hiện nay như đồ thị dạng column, pie, scatter, doughnut,
line...
3.2. Ý nghĩa của thư viện
Thư viện là một công cụ giúp người sử dụng tạo ra các đồ thị một cách dễ dàng hơn và chuyên nghiệp hơn. Với việc tạo đồ họa sử dụng Canvas và JavaScipt thì thư viện sẽ tối ưu được các ưu thế so với việc sử dụng các phần mềm vẽ đồ thị khác, cũng như có được ưu thế so với cách tạo đồ thị truyền thống như trước đây. Là việc sử dụng công nghệ mới, công nghệ của tương lai nên hạn chế được rủi ro do lỗi thời, và có điều kiện phát triển thư viện. Chính những sự khác biệt khi vẽ đồ thị ngay trên máy khách tạo ra một ý nghĩa to lớn đối với người sử dụng, giúp tiết kiệm được các chi phí về dung lượng và băng thông, tối ưu về hình ảnh cũng như đồ họa khi sử dụng thư viện này.
3.3. Mục đích hướng tới
Mục đích hướng tới của ứng dụng này là giảm bớt khó khăn và nhược điểm khi vẽ đồ thị từ máy chủ, phần mềm vẽ đồ thị. Tạo ra một ứng dụng tốt khi vẽ đồ thị trên nền web. Một ứng dụng tận dụng tối đa các tiện ích của một công nghệ mới, đưa đến cho người sử dụng nhưng ưu điểm tốt phù hợp với sự phát triển của các công nghệ có trong HTML5.
3.4. Các kĩ thuật và chức năng của thư viện
Thư viện với chức năng vẽ đồ bằng cách sử dụng thẻ <canvas> trong HTML5. Vì
thư viện gọn nhẹ, chỉ bao gồm các file. js nên có thể dễ dàng trong khâu cài đặt. Ngoài ra nó cũng là một các ứng dụng mở, để hoàn toàn có thể chỉnh sửa các thông số, cũng như các đoạn mã trong thư viện theo ý của người sử dụng.
Các kĩ thuật đã sử dụng trong thư viện:
3.4.1. Thu Nhỏ kích cỡ nếu kích thước canvas không phù hợp với đồ thị
Trong khi sử dụng đồ thị, có thể do một số lý do mà đồ thị hiển thị không đúng như yêu cầu. Các kích thước của đồ thị so với kích thước mà Canvas tạo ra vùng vẽ đồ họa bị sai lệch, có thể dẫn tới việc đồ thị không hiện thị được, hoặc hiển thị không hết các thành phần của nó. Vì thế nên chức năng tự thu nhỏ kích thước đồ thị, khi có sự sai lệnh về kích thước của vùng môi trường vẽ đồ họa, sẽ làm giảm thiểu các lỗi khi hiển thị đồ thị. Đây chỉ là biện pháp để giảm thiểu rủi ro cho việc vẽ đồ thị, chứ không phải là biện pháp nên sử dụng. Vì để đồ thị được hiển thị đúng và đẹp, đồ họa rõ nét thì kích thước của vùng môi trường do Canvas tạo ra phải lớn hơn các kích thước của đồ thị. Nếu kích thước đó nhỏ hơn thì chức năng này sẽ được kích hoạt, nhưng khi đó chất lượng của đồ thị được tạo ra sẽ không còn tốt bằng chất lượng hình ảnh đồ thị khi được đặt trong kích thước phù hợp.
Để có thể thu nhỏ kích thước của đồ thị khi có sai lệch về kích thước vùng tạo đồ họa thì trong đồ thị có tích hợp sẵn hàm scale() . Hàm này có tác dụng đo giá trị lớn nhất mà đồ thị tạo ra (về cả chiều cao lẫn chiều rộng) nếu có sự chênh lệch về kích thước, thì hàm sẽ gán giá trị lớn nhất đó vào một biến. Sau đó sẽ có một biến rate là một biến tỷ lệ giữa kích thước của vùng tạo đồ họa của canvas và kích thước của đồ thị. Sau đó hàm scale() sẽ làm nhiệm vụ co đồ thị lại dựa trên biến rate này. Các lệnh dùng để thu nhỏ kích thước đồ thị cho phù hợp với vùng tạo đồ họa do thẻ canvas tạo ra như sau:
rate=(canvas.width/ (2*R+ (patternWidth+2*textWidth+10))) ; ctx.scale(rate,rate) ; if (canvas.height < maxheight) { rate = (canvas.height/maxheight) ; ctx.scale(rate,rate) ; } }; if (canvas.height < maxheight) { rate = (canvas.height/maxheight) ; ctx.scale(rate,rate) ; };
Hàm câu lệnh ctx.scale(rate,rate) cho phép thu nhỏ các kích thước của đồ thị theo tỷ lệ của biến rate (rate<1) . Như vậy sau thi thực hiện câu lệnh scale(rate,rate) thì đồ thị sẽ được thu nhỏ lại phù hợp với kích thước ban đầu mà canvas đã tạo ra.
Hình18: Hình ảnh trước và sau khi sử dụng hàm scale(rate,rate) .
3.4.2. Thay đổi các giá trị mặc định trong thư viện.
Trong thư viện có sẵn các giá trị mặc định cho việc hiển thị đồ thị. Các giá trị đó có thể thay đổi được cho phù hợp với từng hoàn cảnh, từng người sử dụng. Các giá trị để thiếp lập đó được đặt trong một mảng dữ liệu đầu vào, với mỗi đồ thị thì các thiết lập này lại thay đổi cho phù hợp. Như ví dụ đối với đồ thị dạng Line, thì các
mốc dữ liệu sẽ là các điểm, người sử dụng có thể lựa chọn để tạo kiểu cho các mốc dữ liệu này là: hình tròn, hình vuông hoặc là dấu *. Các lựa chọn này sẽ nằm trong dữ liệu của mảng myConfig.
Hình 19: Các kiểu kí hiệu cho mốc dữ liệu.
Với hình ảnh mình họa trên thì các kí tự cho mốc dữ liệu sẽ thay đổi theo các cấu 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 đó: (adsbygoogle = window.adsbygoogle || []).push({});
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.
Hình minh họa trên là lỗi do tham số TextWidth quá nhỏ, để hiện thị tốt nên đặc tham số này ở khoảng giá trị 80 – 100.
3.4.3. Xây dựng các hàm dùng trong thư viện.
Trong thư viện này có xây dựng sẵn một số hàm dùng để vẽ các đường cơ bản và thường dùng. Các hàm này giúp rút ngắn các đoạn mã, tạo tính chuyên nghiệp, giúp người dùng dễ sử dụng.
• Hàm vẽ đường thẳng: drawLine(context, startx, starty, endx, endy) Trong đó:
o context: đối tượng vẽ lấy từ phần tử thẻ canvas.
o startx: hoành độ điểm bắt đầu.
o starty: tung độ điểm bắt đầu.
o endx: hoành độ điểm kết thúc.
o endy: tung độ điểm kết thúc.
Hàm drawLine() dùng để vẽ một đường thẳng với điểm khởi đầu và điểm kết thúc. function drawLine(context, startx, starty, endx, endy) { context.beginPath() ; context.moveTo(startx, starty) ; context.lineTo(endx, endy) ; context.closePath() ; context.stroke() ; }
Hàm được tích hợp sẵn phương thức beginPath() nên vẽ được đường thẳng độc lập mà không phụ thuộc hay ảnh hướng tới các đường vẽ khác. Hàm cũng có phương thức stroke() nên sẽ tự viền màu cho đường thẳng đó nếu đặt màu, hoặc làm màu mặc định.
• Hàm vẽ hình chữ nhật: drawRectangle(context, x, y, w, h, fill) Trong đó:
o context: đối tượng vẽ lấy từ phần tử thẻ canvas.
o x: tọa độ trục hoành của điểm là góc trên bên trái của hình chữ nhật
o y: tọa độ trục tung 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: là chiều rộng của hình chữ nhật muốn vẽ. (adsbygoogle = window.adsbygoogle || []).push({});
o h: là chiều cao của hình chữ nhật muốn vẽ.
o fill: là tham số cho phép phủ màu cho hình chữ nhật (có hai giá trị true và false) .
Cũng giống như hàm vẽ đường thẳng, hàm vẽ hình chữ nhật cho phép vẽ mà không ảnh hưởng tới các hình vẽ khác trong thư viện. Nếu có tham số fill là true thì hình chữ nhật sẽ được phủ màu hiện tại, còn false thì hình chữ nhật sẽ chỉ có đường viền là màu viền hiện tại.
• Hàm vẽ từng phần của đường tròn:
drawPie(context,x,y,R,startangle,angle,clockwise)
Trong đó:
o context: đối tượng vẽ lấy từ phần tử thẻ canvas.
o x, y: là tọa độ của tâm đường tròn.
o R: bán kính của đường tròn.
o startangle: góc bắt đầu vẽ.
o angle: góc sẽ vẽ.
o clockwise: quay theo chiều kim đồng hồ hay ngược lại.
Với hàm này cho phép vẽ từng phần của đường tròn, vẽ một cách độc lập tương tự giống các hàm drawLine và drawRectangle.
3.5. Cài đặt và sử dụng thư viện
Thư viện đồ họa nhỏ gọn và rất dễ cài đặt sử dụng. Thư viện gồm các file Script, mỗi một đồ thị sẽ sử dụng file script riêng. Việc cài đặt đơn giản, chỉ cần gắn một
file “.js” của đồ thị muốn vẽ vào tài liệu muốn dùng để hiện thị đồ thị trên đó. Và thêm phần dữ liệu đầu vào nằm trong thẻ <head>, cùng với hàm gọi đến chức năng tạo đồ thị là thư viện có thể hoạt động dựa trên dữ liệu đầu vào đó. Dưới đây là ví dụ sử dụng đồ thị ChartPie:
Ví dụ: <script language = ”javascript” src=”line.js”></script> <script language = ”javascript”>
var myConfig = [10,20,60,1,"CHART-PIE"]; var myC = ["#ECD078","#D95B43","#C02942","#542437","#53777A"]; var myD = [10.5,30,20,60,40]; var myN = ["TTK","NVMEDIA","GALLERYVIET","SOUNDVIET","NVEVENT"]; </script>
Phần hàm gọi chức năng vẽ đồ thị: Draw_chartpie('canvas',150,myConfig,
myD,myN,myC) ;
Trong đó:
• Canvas: là id của thẻ canvas muốn sử dụng để tạo đồ thị.
• 150 là bán kính của hình tròn đồ thị.
• myConfig: là mảng cấu hình cho đồ thị.
• myD, myN, myC: là các mảng dữ liệu đầu vào. 3.6. Các loại đồ thị khác
Hiện tại thư viện chưa cung cấp đầy đủ tất cả các loại đồ thị, còn một số đồ thị hiện đang trong giai đoạn phát triển. Ngoài các loại đồ thị đã nêu ở trong thư viện thì con một số các loại đồ thị khác nữa đang được phát triển và sẽ có trong thư viện trong tương lai như là: bubble, surface, radar…
3.7. Chiến lược phát triển
Thư viện đồ họa đơn giản và dễ sử dụng, với mã nguồn mở, nên chiến lược để quảng bá cũng như phát triển trong gian đoạn đầu tiên này là hướng tới việc cấp phát miễn phí, sử dụng như một thư viện mở. Quảng bá trên các kênh thông tin, các forum trực tuyến. Đối tượng sử dụng mà thư viện đồ họa này hướng tới phục vụ là:
• Học sinh, sinh viên • Giáo viên, giảng viên
• Người biên tập các bài viết thông kê • Các nhà kinh tế (adsbygoogle = window.adsbygoogle || []).push({});
• Các nhà điều tra thị trường…
Thư viện vẫn còn trong giai đoạn phát triển và hoàn thiện đầy đủ nên cũng có chiến lược phổ biến, nhân rộng theo mô hình nguồn mở, tận dụng nguồn lực lập trình viên mã nguồn mở để cùng phát triển thư viện hơn nữa. Mục tiêu hướng tới là trở thành nguồn cung cấp công cụ để vẽ đồ thị trên nền web phổ biến nhất ở việt nam và trên thế giới.
3.8. Đánh giá và so sánh 3.8.1. Ưu điểm:
• Thư viện đồ họa tạo ra một môi trường vẽ đồ thị trên nền web hiệu quả. Tận dụng được công nghệ mới cũng như tối ưu tiết kiệm các tài nguyên mạng. • Là một thư viện mở và miễn phí
• Mã nguồn nhẹ và tối ưu sử dụng • Cài đặt và sử dụng dễ dàng • Thân thiện với người sử dụng
3.8.2. Nhược điểm:
• Là một thư viện mới, tuổi đời trẻ nên chưa phổ biến với người dùng • Do cá nhân phát triển nên còn tồn tại một số lỗi cá nhân.
• Chưa có sự góp sức của cộng đồng • Chưa đầy đủ tất cả các loại đồ thị
3.9. Thử nghiệm trên các trình duyệt.
Thư viện chạy tốt trên các trình duyệt mới hỗ trợ HTML5 hiện nay như: Chrome
9, 10, Safari 5. Đối với trình duyệt FireFox4 tuy cũng hỗ trợ khá đầy đủ nhưng
cũng gây là một số các lỗi hiển thị.
Hình 21: Thử nghiệm hiển thị trên các trình duyệt.
Xem trên hình minh họa có thể thấy Safari hiển thị hình ảnh rất tốt, hình ảnh được hiển thị với màu sắc nổi bật, các đường nét cũn rõ ràng không bị mờ hay đứt nét. Hình ảnh được hiển thị trong Safari rõ ràng và nét hơn Chrome, Chrome và FireFox hiện thị hình ảnh nó có một độ mờ và lòe màu nhất định.
Đối với trình duyệt Opera hiện nay cũng đã hỗ trợ rất tốt cho Canvas và HTML5, hỗ trợ hầu như đầy đủ các phương thức của HTML5. Nhưng trong thư viện này thì trình duyệt Opera vẫn có xuất hiện một số các lỗi.
Hình 22: So sánh trình duyệt Opera với Chrome
Qua hình minh họa so sánh ở trên thấy rõ trình duyệt opera có mắc lỗi hiển thị thiếu dấu mốc dữ liệu trên đồ thị. Và hình ảnh các đường thẳng hiển thị trên trình duyệt này cũng không được thẳng và đẹp so với chrome và safari. Riêng trình duyệt IE
các phiên bản cũ do không hỗ trợ các công nghệ trong HTML5 nên không chạy được. muốn sử dụng được cần có thêm thư viện “excanvas.compiled.js” trong tài liệu. Nhưng thư viện cũng chỉ hỗ trợ phần nào, trong thư viện đồ họa này, IE không thể hỗ trợ hiển thị được, hình ảnh đồ thị không thể hiển thị tốt với IE.
Hình 23: Đồ thị hiển thị với IE8
Để đồ thị hiển thị tốt nhất thì người dùng nên sử dụng hai trình duyệt hỗ trợ Canvas và HTML5 tốt nhất hiện nay là Chrome và Safari.
Kết Luận