chart.js 누적 막대 그래프 만들기 (+ 데이터 변수 적용)

 

 

 

위에 막대그래프를 누적막대그래프로 만들기 전에

const ctx = $('#test-chart');
        const myChart = new Chart(ctx, {
        type:'bar',
        data:{
            labels:['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets:[
                {
                    label:'2021',
                    data:[10,8,6,5,12,7],
                    backgroundColor:'rgba(203,206,145,.5)',
                    borderColor:'#CBCE91',
                    borderWidth:1
                },
                {
                    label:'2020',
                    data:[5,10,5,3,4,2],
                    backgroundColor:'rgba(203,206,145,.5)',
                    borderColor:'#CBCE91',
                    borderWidth:1
                },
                
            ]
        },
        options:{
                    maintainAspectRatio :false,//그래프의 비율 유지
                }
        });

 

datasets을 변수로 만들어서 넣어서 정리했다.

const year2021 = {
        label:'2021',
        data:[10,8,6,5,12,7],
        backgroundColor:'rgba(203,206,145,.5)',
        borderColor:'#CBCE91',
        borderWidth:1
}
const year2020 = {
        label:'2020',
        data:[5,10,5,3,4,2],
        backgroundColor:'rgba(203,206,145,.5)',
        borderColor:'#CBCE91',
        borderWidth:1
}

const ctx = $('#test-chart');
        const myChart = new Chart(ctx, {
        type:'bar',
        data:{
            labels:['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets:[
                year2021,
                year2020
            ]
        },
        options:{
                    maintainAspectRatio :false,//그래프의 비율 유지
                }
        });

options부분도 변수로 따로 빼주고

누적 막대 그래프를 만들기 위해서는 아래와 같이 options영역에 scales를 넣어주면 된다.

const options = {
            scales:{
                x:{ //x축값 누적
                    stacked:true
                },
                x:{ //y축값 누적
                    stacked:true
                },
            }
    }

그러면 아래와 같은 누적 막대 그래프가 만들어진다.

data 영역 전체를 변수로 만들어 줄 수 도 있다.

const ctx = $('#test-chart');
        const year2021 = {
                    label:'2021',
                    data:[10,8,6,5,12,7],
                    backgroundColor:'rgba(203,206,145,.5)',
                    borderColor:'#CBCE91',
                    borderWidth:1
        }
        const year2020 = {
                label:'2020',
                data:[5,10,5,3,4,2],
                backgroundColor:'rgba(203,206,145,.5)',
                borderColor:'#CBCE91',
                borderWidth:1
        }
        const data = {
            labels:['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets:[
                year2021,
                year2020
            ]
        }
        const options = {
                maintainAspectRatio :false,//그래프의 비율 유지
                scales:{
                    x:{ //x축값 누적
                        stacked:true
                    },
                    x:{ //y축값 누적
                        stacked:true
                    },
                }
        }

 

변수를 표현할때는

const myChart = new Chart(ctx, {
        type:'bar',
        data:data,
        options:options
    });

 

각각 type, data, options만 넣어주면 된다.

 

html

<div class="chart-wrap">
    <canvas id=test-chart></canvas>
</div>