Cấp bậc tác giả:

HTML

Xây dựng Biểu đồ chỉ với JavaScript

Được viết bởi webmaster ngày 23/04/2013 lúc 02:26 PM
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".
  • 0
  • 3174
Tải tệp tin: Click ở đây

Xây dựng Biểu đồ chỉ với JavaScript


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". 

chart.jpg
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. 

chart02.jpg
Biểu đồ với kiểu pie

Hiện tại, hỗ trợ line, spline, area, areaspline, bar, pie, scatter và angular gauges...

chart03.jpg
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]
        }],
    });
});

chart04.jpg
Biểu đồ với kiểu area

chart05.jpg
Biểu đồ với kiểu scatter

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML