Trong bài viết này, chúng ta sẽ nghiên cứu và tìm hiểu về một trong những cách xây dựng biểu đồ sử dụng thường xuyên nhất cung cấp đồ thị JavaScript mịn và đồ họa tuyệt đẹp được gọi là "
High Charts".
Biểu đồ với kiểu bar
Highcharts là một thư viện biểu đồ viết bằng HTML5 và JavaScript cung cấp biểu đồ tương tác và trực quan để biểu diễn dữ liệu.
Biểu đồ với kiểu pie
Hiện tại, hỗ trợ line, spline, area, areaspline, bar, pie, scatter và angular gauges...
Biểu đồ với kiểu line
Hãy xem thực hiện từng bước.
Bước 1: Cài đặt
Highcharts yêu cầu hai tập tin (Highchart.js) và jQuery
Sử dụng mã này để include Highcharts với jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
Bước 2: Tạo bảng xếp hạng
Ví dụ này, chúng ta sẽ tạo ra biểu đồ bar với thành phần tham dự.
1. Tạo thẻ <div> trong trang web của bạn
<div id="empcontainer" style="width:100%; height:400px;"></div>
2. Biểu đồ sẽ được khởi tạo trong các thẻ script.
$(function () {
$('#empcontainer').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'So sánh Lương hướng'
},
xAxis: {
categories: ['Tháng 2', 'Tháng 3', 'Tháng 4']
},
yAxis: {
title: {
text: 'Lương hướng (# theo tháng)'
}
},
credits:{
enabled: false
},
series: [{
name: 'DOTNET GROUP',
data: [2500, 2550, 2800]
}, {
name: 'FPT',
data: [1500, 2200, 3000]
}],
});
});
Biểu đồ với kiểu area
Biểu đồ với kiểu scatter