Tạo biểu đồ trên web với Chart.js

Danh mục: Html & Javascript
 

Các biểu đồ thường được dùng để thống kê theo một số liệu nào đó, và nó thường rất hay được sử dụng ở những trang admin, dùng để tổng kết lại dữ liệu thu nhập từ người dùng. Hôm nay, mình sẽ chia sẻ cho các bạn cách hiển thị những biểu đồ hình cột , hình tròn… rất đơn giản với sự hỗ trợ của Chart.js

bieu do, Chart, Javascript,thu thuat javascript, javascript tips

 

Việc đầu tiên, các bạn cần làm là   .Các bạn copy Chart.min.js và chèn vào web như sau.

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Chart.js demo</title>

        <script src='Chart.min.js'></script>

    </head>

    <body>

    </body>

</html>

Biểu đồ đường (Line Chart)

Để vẽ theo dạng này, thì các bạn chèn thêm đoạn html để hiển thị biểu đồ như sau :

<canvas id="buyers" width="600" height="400"></canvas>

Kế tiếp ,các bạn cần một đoạn script để nhận giá trí từ phần tử canvas, các bạn chèn thêm đoạn script sau vào bên dưới trước thẻ </body>

<script>

// line chart data

    var buyerData = {

    labels : ["January","February","March","April","May","June"],

    datasets : [

        {

            fillColor : "rgba(172,194,132,0.4)",

            strokeColor : "#ACC26D",

            pointColor : "#fff",

            pointStrokeColor : "#9DB86D",

            data : [203,156,99,251,305,247]

        }

    ]

}

    var buyers = document.getElementById('buyers').getContext('2d');

    new Chart(buyers).Line(buyerData);

</script>

Biểu đồ hình tròn (Pie Chart)

Các bạn cũng cần chèn thêm đoạn html như sau :

<canvas id="countries" width="600" height="400"></canvas>

Kế đến là khai báo dữ liệu và hiển thị nó bằng đoạn script sau :

// pie chart data

    var pieData = [

        {

            value: 20,

            color:"#878BB6"

        },

        {

            value : 40,

            color : "#4ACAB4"

        },

        {

            value : 10,

            color : "#FF8153"

        },

        {

            value : 30,

            color : "#FFEA88"

        }

    ];



    // pie chart options

    var pieOptions = {

        segmentShowStroke : false,

        animateScale : true

    }



    // get pie chart canvas

    var countries= document.getElementById("countries").getContext("2d");



    // draw pie chart

    new Chart(countries).Pie(pieData, pieOptions);

Biểu đồ hình cột (Bar chart)

Tương tự như các biểu đồ bên trên, chúng ta làm lần lượt với việc đầu tiên là chèn phần tử canvas để hiển thị biểu đồ.

<canvas id="income" width="600" height="400"></canvas>

Kế đến là chèn đoạn script.

// bar chart data

    var barData = {

    labels : ["January","February","March","April","May","June"],

    datasets : [

        {

            fillColor : "#48A497",

            strokeColor : "#48A4D1",

            data : [456,479,324,569,702,600]

        },

        {

            fillColor : "rgba(73,188,170,0.4)",

            strokeColor : "rgba(72,174,209,0.4)",

            data : [364,504,605,400,345,320]

        }

        ]

    }



    // get bar chart canvas

    var income = document.getElementById("income").getContext("2d");



    // draw bar chart

    new Chart(income).Bar(barData);

Thế là xong, mình đã giới thiệu cho các bạn 3 dạng biểu đồ chính, các bạn có thể áp dụng ngay vào cho chính website hay blog của mình rồi đó,

 



BÀI VIẾT KHÁC
CODE GỢI Ý CHO BẠN
BÌNH LUẬN

BẢN QUYỀN ®
Mọi chia sẻ nội dung thuộc tác quyền của MANGUON.COM phải ghi rõ "Nguồn MANGUON.COM"