chart js) 사이즈 조절(+ 샘플 데이터)

$(function() {

    var ctx = document.getElementById('projectinfo_DonutChart').getContext('2d');

            var myDoughnutChart = new Chart(ctx, {

                     type: 'doughnut',

                     data: {

                                     datasets: [{

                                             data: [10,20,30,20,10],

                                             backgroundColor: [

                                                                             'rgba(190, 190, 190, 1)',

                                                                             'rgba(241, 196, 15, 1)',

                                                                             'rgba(244, 7, 7, 1)',

                                                                             'rgba(52, 152, 219, 1)',

                                                                             'rgba(46, 204, 113, 1)'

                                                                     ],

                                     }],

                                     labels:

                            [

                                '미지정','다음주 이후','이번주 까지','완료','기한 만료'

                            ]

                             },

                     options: {

                        maintainAspectRatio: false,

                        cutoutPercentage: 50,

                        legend: {

                             display: true,

                             position: 'left',

                             labels: {

                                     fontSize: 12,

                                     fontFamily: 'sans-serif',

                                     fontColor: '#000000',

                                     fontStyle: 'bold'

                                         }

                             }

                 }

             });

});

options 에서

                        maintainAspectRatio: false,

를 false로 해주면 상위 div를 무시한 채 창 크기에 따라 크기가 크기가 마음대로 바뀌던 것이 상위 div에 구속된다

+ a

chart js는 따로 샘플 데이터를 제공해주거나 doc 에서 자세하게 풀어내지 않고 있다. 따라서 샘플 페이지에서 '소스보기'로 데이터를 뽑아와서 나에게 맞게 변화를 시켜야 한다. 제공하고 있는 doc은 주로 그래프에 변화를 줄 옵션 항목들을 이해하는데 사용해야 한다