Home »

Chart.js - Plugin hỗ trợ tạo biểu đồ

12 thg 9, 2013

Chart.js là một plugin để hỗ trợ tạo biểu đồ dựa trên HTML5 Canvas. Miễn phí, dung lượng nhỏ và hỗ trợ tùy biến cao. Y2Graphic giới thiệu cách đưa biểu đồ vào website thông qua plugin trên.

Chart.js hỗ trợ đến 6 biểu đồ khác nhau, bao gồm:
Các bạn tham khảo tại đây : http://www.chartjs.org/

Line chart

Bar chart

Radar chart

Polar area chart

Pie chart

Doughnut chart
 
Và mình sẽ hướng dẫn tổng quát cách đưa biểu đồ Line chartvào website. Việc đầu tiên là đưa đoạn script và đặt trong thẻ <head>
?
1
<script src="/path/Chart.js"></script>

HTML

Khai báo biểu đồ:
?
1
<canvas id="canvas" height="450" width="600"></canvas>
Cuối cùng là khai báo các số liệu của biểu đồ. Đặt trong thẻ <body>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
</script>

Tags:

Comments[ 0 ]


Đăng nhận xét