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ẽ.
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 (adsbygoogle = window.adsbygoogle || []).push({});
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ế
• 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.
(adsbygoogle = window.adsbygoogle || []).push({});