Thực hành: Vẽ đồ thị với HTML5 Canvas API
Trong phần trước chúng ta đã cùng nhau tìm hiểu về HTML5 Canvas API. Tuy nhiên, cách dễ nhất để biết lập trình là phải thực hành nó! Bài viết này sẽ trình bày cách ứng dụng Canvas API để thực hiện một công việc phổ biến: vẽ đồ thị.
Bước 1: khai báo một canvas trong HTML. Lưu ý thuộc tính id của tag <canvas> là cần thiết để dễ dàng tương tác sau này.
<!DOCTYPE html> <head> <meta charset="utf-8”/> <title>Worm Chart</title> </head> <body> <canvas id=“chart” width=“800” height=“600”></canvas> </body> </html>
Bước 2: JavaScript sẽ được sử dụng để làm việc với canvas. Do đó chúng ta cần thêm cặp tag <script> sau vào trong phần <head> của trang web.
<script type=“text/javascript”> </script>
Bước 3: khai báo biến để chứa dữ liệu cho đồ thị. Trong ví dụ này chúng ta sử dụng một mảng thể hiện thông tin về doanh thu của từng tháng. Đặt đoạn code sau trong tag <script>
var data = new Array(12); data[0] = “Jan,280”; data[1] = “Feb,320”; data[2] = “Mar,240”; data[3] = “Apr,470”; data[4] = “May,310”; data[5] = "Jun,260"; data[6] = "Jul,510"; data[7] = "Aug,310"; data[8] = "Sep,400"; data[9] = "Oct,270"; data[10] = "Nov,340"; data[11] = "Dec,440";
Bước 4: định nghĩa hàm vẽ đồ thị.
function graph() { // lấy về phần tử canvas để thao tác var canvas = document.getElementById(‘chart’); // kiểm tra phần tử canvas trả về là hợp lệ if (canvas && canvas.getContext) { var context = canvas.getContext(‘2d’); drawChart(context, data, 50, 50, (canvas.height - 20), 100); } }
Hàm graph() chỉ thực hiện một công việc đơn giản: lấy về phần tử canvas được khai báo trong trang web theo id của nó. Sau khi đảm bảo rằng canvas này là hợp lệ, graph() truy vấn context của canvas và chứa nó trong biến context. Đối tượng context này sẽ rất quan trọng trong các hoạt động vẽ sau này. Chi tiết về cách vẽ đồ thị được giao lại cho hàm tiện ích drawChart() xử lý.
function drawChart(context, data, startX, colWidth, chartHeight, interval) { // vẽ hai trục X, Y của đồ thị context.lineWidth = “1.0”; var startY = 580; drawLine(context, startX, startY, startX, 30); drawLine(context, startX, startY, 770, startY); context.lineWidth = "0.0”; var maxValue = 0;
// lấy dữ liệu từ mảng và vẽ các cột đồ thị for (var i = 0; i < data.length; i++) { var values = data[i].split(“,”); var name = values[0]; var height = parseInt(values[1]);
if (parseInt(height) > parseInt(maxValue))
maxValue = height;
context.fillStyle = “azure”; drawRectangle(context, startX + (i * colWidth) + i, (chartHeight - height), colWidth, height, true); // vẽ tên cột trên trục X context.textAlign = “left”; context.fillStyle = “#00F”; context.fillText(name, startX + (i * colWidth) + i, chartHeight + 10, 200); }
// vẽ các mốc trên trục Y var numMarkers = Math.ceil(maxValue / interval); context.textAlign = “right”; context.fillStyle = “#F0F”; var markerValue = 0;
for (var i = 0; i < numMarkers; i++)
{
context.fillText(markerValue, (startX - 5),(chartHeight - markerValue), 20);
markerValue += interval;
}
}
function drawLine(context, startx, starty, endx, endy)
{
context.beginPath();
context.moveTo(startx, starty);
context.lineTo(endx, endy);
context.closePath();
context.stroke();
}
function drawRectangle(context, x, y, w, h, fill)
{
context.beginPath();
context.rect(x, y, w, h);
context.closePath();
context.stroke();
if (fill)
context.fill();
}
Có lẽ cũng không cần giải thích gì thêm về đoạn code trên. Sau khi hoàn tất, công việc cuối cùng chỉ là gọi hàm graph() để vẽ đồ thị.
Bước 5: gọi hàm graph trong sự kiện OnLoad của trang web.
<body onLoad=“graph();”>
Thế là xong! Bây giờ bạn chỉ cần lưu trang web lại và mở nó lên với một trình duyệt hỗ trợ HTML5 (tôi sử dụng Google Chrome 8 để thử nghiệm). Kết quả nhận được sẽ tương tự như sau:
* Source code:
Download file HTML hoàn chỉnh chứa các đoạn code trong bài ở đây
* Mục lục:
