<!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>
|
