Đây là một bài viết hướng dẫn sử dụng thư viện jQuery Plugin kết hợp với CSS3 để tạo một biểu đồ tương tác (Interactive Graph) trong vài bước. Bước 1: Tạo khung HTML Để bắt đầu chúng ta sẽ tạo khung HTML cho biểu đồ. Chúng ta sẽ tạo 1 thẻ div với class là “graph-wrapper”. Bên trong thẻ div này chúng ta sẽ tạo thêm 2 thẻ div nữa thẻ div đầu tiên sẽ được gắn class là "graph-info" nhiệm vụ của div này sẽ chứa các chú thích của biểu đồ và các button cho phép chuyển đổi qua lại giữa các dạng biểu đồ.Thẻ div thứ 2 sẽ chứa thêm 2 div con lần lượt có class là "graph-bars" và "graph-line" HTML: <!-- Graph HTML --> <div id="graph-wrapper"> <div class="graph-info"> <a href="javascript:void(0)" class="visitors">Visitors</a> <a href="javascript:void(0)" class="returning">Returning Visitors</a> <a href="#" id="bars"><span></span></a> <a href="#" id="lines" class="active"><span></span></a> </div> <div class="graph-container"> <div id="graph-lines"></div> <div id="graph-bars"></div> </div> </div> <!-- end Graph HTML --> Bước 2: Thêm jQuery and Flot Plugin Bây giờ chúng ta sẽ thêm jQuery vào. Có nhiều nguồn để thêm thư viện jQuery ở đây tôi sẽ link trực tiếp đến host của Google . Tiếp theo bạn download Flot Plugin và tiếp tục thêm nó vào bằng cách sau đây: Mã: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="/js/jquery.flot.min.js"></script> <script> $(document).ready(function () { // Doan du lieu cua buoc 3 o day }); </script> Bước 3: Tạo dữ liệu cho biểu đồ (Graph Data) Dữ liệu của biểu đồ chúng ta là một mảng có dạng như (ex: [series1, series2, … ]). Các chuỗi này bạn có thể viết như 1 đối tượng dạng (ex: [ [x1, y1], [x2, y2], … ]) hoặc 1 dữ liệu đơn thuần như đề cập ở trước. Mã: var graphData = [{ // Visits data: [ [6, 1300], [7, 1600], [8, 1900], [9, 2100], [10, 2500], [11, 2200], [12, 2000], [13, 1950], [14, 1900], [15, 2000] ], color: '#71c73e' }, { // Returning Visits data: [ [6, 500], [7, 600], [8, 550], [9, 600], [10, 800], [11, 900], [12, 800], [13, 850], [14, 830], [15, 1000] ], color: '#77b7c5', points: { radius: 4, fillColor: '#77b7c5' } } ]; Bước 4: Hiện thị đồ thị Bây giờ chúng ta sẽ tiến hành hiện thị 2 biểu đồ lên một dạng lines và một dạng bars. Cả 2 điều có các tùy chỉnh tùy chọn như màu sắc, đổ bóng (shadow) ... Và cả 2 biểu đồ này sử dụng dữ liệu tương tự nhau từ biếng graphData (tạo ở bước 3) Mã: // Lines $.plot($('#graph-lines'), graphData, { series: { points: { show: true, radius: 5 }, lines: { show: true }, shadowSize: 0 }, grid: { color: '#646464', borderColor: 'transparent', borderWidth: 20, hoverable: true }, xaxis: { tickColor: 'transparent', tickDecimals: 2 }, yaxis: { tickSize: 1000 } }); // Bars $.plot($('#graph-bars'), graphData, { series: { bars: { show: true, barWidth: .9, align: 'center' }, shadowSize: 0 }, grid: { color: '#646464', borderColor: 'transparent', borderWidth: 20, hoverable: true }, xaxis: { tickColor: 'transparent', tickDecimals: 2 }, yaxis: { tickSize: 1000 } }); Bước 5: Tùy chỉnh CSS cho biểu đồ Biểu đồ của chúng ta đã được tạo tuy nhiên chúng ta cần hiệu chỉnh lại các các kiểu (Styles) cho biểu đồ điều này giúp cho biểu đồ hiện thị một cách chuyên nghiệp hơn. Trước tiên, bạn cần thiết lập lại các giá trị mặc định cho trình duyệt bởi mỗi trình duyệt sẽ có cách hiểu riêng đối với các thẻ HTML dẫn đến các trình duyệt sẽ hiện thị không giống nhau. Đó là lý do tại sao chúng ta cần thiết lập lại giá trị ban đầu cho tất cả trình duyệt. Mã: /* Resets */ .graph-container, .graph-container div, .graph-container a, .graph-container span { margin: 0; padding: 0; } Tiếp theo chúng ta sẽ tiến hành tạo Gradient và bo gốc cho các class sau: .graph-container, #tooltip, .graph-info Mã: /* Gradinet and Rounded Corners */ .graph-container, #tooltip, .graph-info a { background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f9f9f9)); background: -webkit-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: -o-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: linear-gradient(to bottom, #ffffff 0%,#f9f9f9 100%); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } Đến đây lý do tại sao tôi lại phải tạo nhiều dòng lệnh như vậy. Bởi vì Gradient là một thuộc tính mới trong CSS 3 vì vậy nó sẽ không làm việc trong 1 số trường hợp, ở đây bạn chú ý đến các tiếp đầu ngữ -moz: Firefox, -o: Opera, -ms: IE và cuối cùng là -webkit: được dùng cho trình duyệt Chrome. Để hoàn thành bước này chúng ta cần tạo vị trí, chiều rộng, chiều cao... cho các nút trên biểu đồ bằng đoạn CSS dưới đây: Mã: /* Graph Container */ .graph-container { position: relative; width: 550px; height: 300px; padding: 20px; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.1); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,.1); box-shadow: 0px 1px 2px rgba(0,0,0,.1); } .graph-container > div { position: absolute; width: inherit; height: inherit; top: 10px; left: 25px; } .graph-info { width: 590px; margin-bottom: 10px; } Bước 6: Tạo chú thích và các button Chúng ta sẽ tiến hành thiết lập kiểu cho các liên kết (thẻ a) bằng đoạn CSS sau: Mã: .graph-info a { position: relative; display: inline-block; float: left; height: 20px; padding: 7px 10px 5px 30px; margin-right: 10px; text-decoration: none; cursor: default; } Cho mỗi chú thích chúng ta sẽ tạo một một vòng tròn nhỏ với màu sắc tương tự như lines/bars trên biểu đồ. Để tạo các vòng tròn này chúng ta sẽ sử dụng bộ chọn giả (pseudo-selector) :before. Bộ chọn này này cho phép ta thêm tiếp thuộc tính vào đối tượng đã được định nghĩa trước đó Mã: /* Color Circles */ .graph-info a:before { position: absolute; display: block; content: ''; width: 8px; height: 8px; top: 13px; left: 13px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .graph-info .visitors { border-bottom: 2px solid #71c73e; } .graph-info .returning { border-bottom: 2px solid #77b7c5; } .graph-info .visitors:before { background: #71c73e; } .graph-info .returning:before { background: #77b7c5; } Tiếp theo, chúng ta sẽ tạo các Style cho các nút chuyển (switcher) giữa biểu đồ dạng lines và dạng bars. Đoạn CSS dưới này chúng ta sẽ thiết lập lại chiều rộng, chiều cao, thêm icon và tạo gradient màu xanh lá cho nút đang được kích hoạt. Mã: /* Lines & Bars Buttons */ #lines, #bars { width: 34px; height: 32px; padding: 0; margin-right: 0; margin-left: 10px; border-bottom: 2px solid #71c73e; float: right; cursor: pointer; } #lines.active, #bars.active { background: #82d344; background: -moz-linear-gradient(top, #82d344 0%, #71c73e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d344), color-stop(100%,#71c73e)); background: -webkit-linear-gradient(top, #82d344 0%,#71c73e 100%); background: -o-linear-gradient(top, #82d344 0%,#71c73e 100%); background: -ms-linear-gradient(top, #82d344 0%,#71c73e 100%); background: linear-gradient(to bottom, #82d344 0%,#71c73e 100%); } #lines span, #bars span { display: block; width: 34px; height: 32px; background: url('../img/lines.png') no-repeat 9px 12px; } #bars span { background: url('../img/bars.png') no-repeat center 10px; } #lines.active span { background-image: url('../img/lines_active.png'); } #bars.active span { background-image: url('../img/bars_active.png'); } Để hoàn tất bước này chúng ta sẽ xóa các phần tử trôi nổi đi (float) bằng đoạn CSS sau Mã: /* Clear Floats */ .graph-info:before, .graph-info:after, .graph-container:before, .graph-container:after { content: ''; display: block; clear: both; } Bước 7: Xử lý sự kiện chuyển biểu đồ Bước này chúng ta sẽ xử lý sự kiện khi người dùng click vào các nút "bars" và "lines" thì nhiệm vụ ở bước này chúng sẽ hiện thị biểu đồ tương ứng với từng nút. bằng đoạn jQuery sau: Mã: $('#graph-bars').hide(); $('#lines').on('click', function (e) { $('#bars').removeClass('active'); $('#graph-bars').fadeOut(); $(this).addClass('active'); $('#graph-lines').fadeIn(); e.preventDefault(); }); $('#bars').on('click', function (e) { $('#lines').removeClass('active'); $('#graph-lines').fadeOut(); $(this).addClass('active'); $('#graph-bars').fadeIn().removeClass('hidden'); e.preventDefault(); }); Bước 8: Định dạng kiểu chữ Trong bước này chúng ta se định dạng lại kiểu chữ , đường link , chú thích và tooltips Mã: #tooltip, .graph-info a { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; font-size: 12px; line-height: 20px; color: #646464; } .tickLabel { font-weight: bold; font-size: 12px; color: #666; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } Tiếp theo chúng ta sẽ ẩn đi các nhãn "Label" ở mục vị trí đầu tiên và vị trí cuối trên trục Y. Để thực hiện điều này chúng ta sẽ sử dụng bộ chọn giả là :first và :last Mã: .yAxis .tickLabel:first-child, .yAxis .tickLabel:last-child { display: none; } Bước 9: Tạo Toottip Để tạo Tooltip chúng ta sẽ gắn 1 thẻ DIV với class là tooltip vào BODY và tính toán cho vị trí hiện thị của Tooltip khi chúng ta di chuyển chuột qua trên đồ thị Mã: function showTooltip(x, y, contents) { $('<div id="tooltip">' + contents + '</div>').css({ top: y - 16, left: x + 20 }).appendTo('body').fadeIn(); } var previousPoint = null; $('#graph-lines, #graph-bars').bind('plothover', function (event, pos, item) { if (item) { if (previousPoint != item.dataIndex) { previousPoint = item.dataIndex; $('#tooltip').remove(); var x = item.datapoint[0], y = item.datapoint[1]; showTooltip(item.pageX, item.pageY, y + ' visitors at ' + x + '.00h'); } } else { $('#tooltip').remove(); previousPoint = null; } }); Chúng ta sẽ sử dụng thuộc tính tuyệt đối cho vị trí, canh chỉnh lề và ẩn class tooltip đi nếu chưa hover qua đối tượng các nút Mã: #tooltip { position: absolute; display: none; padding: 5px 10px; border: 1px solid #e1e1e1; } Như vậy, Với 9 bước đơn giản này bạn đã có thể tự tay tạo cho 1 mình một biểu đồ để dùng cho các mục đích khác nhau của bạn chẳng hạn như thống kê số liệu ... Bạn có thể download code của bài hướng dẫn này tại đây (20 kb). Chúc các bạn thành công. nguồn:joomlabasic.com
