Liên hệ
Đăng nhập Hỗ trợ online

Hướng dẫn tạo biểu đồ từ CSS3 và JavaScript

  • 15/07/2014
  • 2119
  • 0
Đối với chức năng thống kê của website, không gì tiện lợi và trực quan hơn một biểu đồ dựng theo dữ liệu.

Trong hướng dẫn này, chúng tôi sẽ code một biểu đồ tương tác sử dụng jQuery và CSS3. Chúng tôi sử dụng một plugin vẽ phổ biến của jQuery là “Flot”. Flot là một thư viện đồ họa của JavaScript cho jQuery. Nó tạo ra một cơ sở đồ họa dựa theo bộ dữ liệu được cung cấp. Plugin này khá đơn giản nhưng thực sự mạnh mẽ, đủ để tạo ra một số kiểu biểu đồ tương tác đẹp.

Các bạn có thể tham khảo về jQuery qua bài viết này: Tổng quan về JQuery cho người mới bắt đầu

Bước 1 - HTML Markup

Để bắt đầu, chúng ta sẽ viết một đoạn code HTML đơn giản cho biểu đồ. Chúng ta sẽ tạo ra một <div> với lớp “graph-wrapper”. Bên trong <div> này, chúng ta cần bổ sung thêm 2 <div> con. Đầu tiên sẽ là lớp “graph-info”, div này sẽ chứa chú thích cho biểu đồ và các nút cho phép chúng ta chuyển đổi những những biểu đồ khác nhau. Div thứ hai là "graph-container" sẽ bao gồm 2 kiểu đồ họa, đường và khối.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!-- 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 - jQuery và Flot Plugin

Chúng ta cần thêm JavaScript vào. Đầu tiên thì chúng ta cần thêm thư viện jQuery đã. Tôi sẽ đặt liên kêt tới một máy chủ của Google. Bạn có thể liên kết đến máy chủ khác hoặc tải nó về và đặt trên máy chủ của bạn. Sau đó, tải về plugin “Plot” bao gồm "jquery.flot.min.js". Chúng ta bỏ tất cả vào thẻ <script>, tới đây biểu đồ của chúng ta đã được chuẩn bị sẵn sàng để làm việc.

1
2
3
4
5
6
7
<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 () {
    // Graph scripts here
});
</script>

Bước 3 - Biểu đồ dữ liệu

Dữ liệu cho biểu đồ là một mảng với hàng loạt dữ liệu. Một hàng có thể là dữ liệu thô hoặc một đối tượng với các thuộc tính. Chúng ta cũng cần thiết lập một số tùy chỉnh cho mỗi loại dữ liệu

1
2
3
4
5
6
7
8
9
10
11
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 - Nạp biểu đồ

Bây giờ chúng ta sẽ nạp vào 2 loại biểu đồ là đường và khối. Cả hai đều có mộ số tùy biến như màu sắc, đổ bóng...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// 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 – Styles của biểu đồ

Chúng ta cài đặt một số reset styles để xóa đi giá trị mặc định của trình duyệt.

1
2
3
4
5
6
7
8 
/* Resets */
.graph-container,
.graph-container div,
.graph-container a,
.graph-container span {
    margin: 0;
    padding: 0;
}

Tiếp đó, chúng ta sẽ thêm vào độ dốc cũng như các góc tròn. Như các bạn có thể thấy, chúng tôi đang lặp lại rất nhiều với cùng một properties. Chúng ta cần làm điều này vì trong thử nghiệm của chúng tôi, tính năng này của CSS3 có thể sẽ không hoạt động đối với một số properties mặc định. Vì vậy chúng ta cần thêm properties cho từng trình duyệt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 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;
}

Để kết thúc bước này, chúng ta sẽ xác định vị trí cho các biểu đồ, thiết lập chiều rộng, chiều cao, padding... Thay đổi các kích thước này theo nhu cầu của bạn.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 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;
} 

graph 1

Bước 6 – Ghi chú cho biểu đồ và các nút

Chúng tôi sẽ bắt đầu thêm những phong cách cơ bản cho các liên kết.

1
2
3
4
5
6
7
8
9
10
.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;
}

Đối với các ghi chú dữ liệu của biểu đồ, chúng ta sẽ tạo ra một vòng tròn nhỏ với màu sắc tương tự như các dòng/khối trên biểu đồ. Để tạo ra vòng tròn này, chúng ta sử dụng :before pseudo. Tùy chỉnh này cho phép chúng ta thêm nội dung vào trước phần tử này.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 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; }

Sau đó, chúng ta thiết lập styles cho hai nút này để cho phép chúng ta chuyển đổi giữa đồ thị lines/bars. Chúng ta cũng cần đặt chiều rộng và chiều cao cố định, thêm vào hình ảnh biểu tượng và một biểu tượng màu xanh lá cây cho trạng thái hoạt động.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/* 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'); }

 

Kết thúc bước này bằng việc clear float của biểu đồ.

1
2
3
4
5
6
7
/* Clear Floats */
.graph-info:before, .graph-info:after,
.graph-container:before, .graph-container:after {
    content: '';
    display: block;
    clear: both;
}

graph 2

Bước 7 - Chuyển đổi biểu đồ

Trong bước này, chúng ta sẽ thêm sự kiện click cho nút “Lines” và ”Bars”. Khi tải biểu đồ, chúng ta sẽ ẩn đi đồ thị dạng khối, sau đó nó sẽ được hiển thị nếu người dùng ấn vào nút “Bars”. Tương tự để hiện và ẩn đối với đồ thị đường.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('#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 - Typography

Chúng ta cần xử lý về kiểu chữ, styles liên kết, chú thích, chú giải...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#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;
}

 

graph 3

Bước 9 – Chú giải

Để thêm phần chú giải, chúng tôi sẽ thêm vào

với id = "tooltip". Vị trí của tooltip này sẽ được tính toán dựa trên vị trí của các điểm dao động của đồ thị.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
function showTooltip(x, y, contents) {
    $('
' + contents + '
').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;
    }
});

Sau đó chúng ta sẽ thêm một vị trí tuyệt đối, giấu nó đi bằng cách sử dụng property hiển thị và thêm vào padding và biên.

1
2
3
4
5
6
#tooltip {
    position: absolute;
    display: none;
    padding: 5px 10px;
    border: 1px solid #e1e1e1;
}

graph 4

Chúc các bạn thành công trong việc tạo biểu đồ bằng CSS3 và jQuery.

  Ý kiến bạn đọc

Bạn cần trở thành thành viên của nhóm để có thể bình luận bài viết này. Nhấn vào đây để đăng ký làm thành viên nhóm!

Bài viết liên quan

Hỗ trợ online
Mr Việt Mr Việt
0902.168.001
hoangvietdhcn@gmail.com
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây