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
Download
Việc đầu tiên, các bạn cần làm là download Chart.js .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 đó,