#90 Java Script chart.js로 차트 그리기

 2019.09.23

 

 chart.js 페이지에 설명이 잘 나와있다

 

https://www.chartjs.org

Chart.js | Open source HTML5 Charts for your website

 

 

 

차트 예시

 

 

 

 

차트가 그려질 html에 canvas태그로 영역 설정

<!-- charts.js -->
<canvas id="myChart"></canvas>

 

 차트 script

<!-- charts.js script-->
<script th:inline="javascript">
var ctx = document.getElementById('myChart').getContext('2d');
var utilityChart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'bar',
 
    // The data for our dataset
    data: {
        labels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월','8월','9월','10월','11월','12월'],
        datasets: [{
            label: '공과금 지출 금액',
            
            backgroundColor: 'rgb(245, 166, 35)',
            borderColor: 'rgb(255, 255, 255)',
            data: [0, 10, 5, 2, 20, 30, 45, 12, 41, 23, 12, 32]
        }]
    },
 
    // Configuration options
    options: {
        legend: {
             labels: {
                  fontColor: 'white' // label color
                 }
              },
        scales: {
            // y축
            yAxes: [{
                ticks: {
                    beginAtZero:false,
                    fontColor:'white' // y축 폰트 color
                }
             }],
             // x축
             xAxes: [{
                ticks: {
                    beginAtZero:false,
                    fontColor:'white' // x축 폰트 color
                }
             }]
        }
    }
});
</script>