<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>chartJS</title> <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script> <script type="text/javascript" src="./js/Chart.js"></script> </head> <!-- Body 넓이를 98%를 준 이유는 위와같은 설정을 주지 않으면 브라우저 창의 크기에 맞추어 출력이 좀처럼 이루어지지 않기 때문이다. --> <body style="width:98%;"> <canvas id="myChart"></canvas> </body> <script type="text/javascript"> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type : "bar", data : { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"] , datasets : [{ label: "#BarChart" , data: [12, 19, 3, 5, 2, 3] , backgroundColor : [ "rgba(255, 99, 132, 0.2)" , "rgba(54, 162, 235, 0.2)" , "rgba(255, 206, 86, 0.2)" , "rgba(75, 192, 192, 0.2)" , "rgba(153, 102, 255, 0.2)" , "rgba(255, 159, 64, 0.2)" ] , borderColor: [ "rgba(255, 99, 132, 1)" , "rgba(54, 162, 235, 1)" , "rgba(255, 206, 86, 1)" , "rgba(75, 192, 192, 1)" , "rgba(153, 102, 255, 1)" , "rgba(255, 159, 64, 1)" ] , borderWidth : 1 }] } , options : { scales : { yAxes : [{ ticks : { beginAtZero : true } }] } } }); </script> </html>
|