Chart.js를 이용해 막대 그래프 그리기

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> 
<script type="text/javascript"> 
var barChartData = {        
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: 'Pass',
            backgroundColor: "#1E90FF",
            data: [
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000
           ]
        }, {
            label: 'NG',
            backgroundColor: "#F7464A",
            data: [
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000
            ]
        }]
    };
 window.onload = function() {
    var ctx = $('#chart').get(0).getContext("2d"); 
    window.theChart = new Chart(ctx, {
         type: 'bar',
         data: barChartData,
         options: {
            
         }
 });
}
</script>
<canvas id="chart"></canvas> 

 

위 코드를 실행하면 아래와 같은 차트가 화면에 꽉 차게 그려지는데

canvas를 감싸는 div를 만들어 그 div에 크기를 정해주면 차트 크기를 조정할 수도 있고 

options를 이용해 이미 정의된 방법으로 차트를 조정할 수도 있고

Chart.plugins.register를 이용해 필요한 차트 option을 만들 수도 있다.