[저장용]chartjs 가로 누적 차트 그리기

chartjs 가로 누적차트 그리기

 

 

 

비고	1차발송		2차발송		3차발송		4차발송
	유형	건수	유형	건수	유형	건수	유형	건수
가입인사	카카오톡	998	네이버	888	DM	999	SMS	565
신년인사	카카오톡	1925	SMS/LMS	1034
안내문1	카카오톡	191	SMS/LMS	188	MMS	181
안내문2	카카오톡	291	SMS	288	친구톡	181	네이버	666

 

1. 데이터셋 배열 생성

// 데이터 배열 생성
var data = [
    {type: "안내문1", kko: 998, naver: 888, dm : 999, sms: 565},
    {type: "메시지1", kko : 1925, smslms: 1034},
    {type: "메시지2", kko : 191, smslms: 188, auth: 181},
    {type: "안내문2", kko : 291, sms: 288, friend: 181, naver: 666}
];

 

2. 라벨 배열 생성

// 라벨 배열 생성
var labels = ["가입인사", "신년인사", "안내문1", "안내문2"];

3. 데이터셋 배열 생성

// 데이터셋 배열 생성
var datasets = [
    {
        label: "카카오톡",
        data: data.map(d => d.kko),
        backgroundColor: "red"
    },
    {
        label: "네이버",
        data: data.map(d => d.naver),
        backgroundColor: "orange"
    },
    {
        label: "DM",
        data: data.map(d => d.dm),
        backgroundColor: "green"
    },
    {
        label: "SMS/LMS",
        data: data.map(d => d.smslms),
        backgroundColor: "blue"
    },
    {
        label: "SMS",
        data: data.map(d => d.sms),
        backgroundColor: "indigo"
    },
    {
        label: "친구톡",
        data: data.map(d => d.friend),
        backgroundColor: "violet"
    },
    {
        label: "LMS",
        data: data.map(d => d.lms),
        backgroundColor: "yellow"
    },
    {
        label: "MMS",
        data: data.map(d => d.mms),
        backgroundColor: "purple"
    }
];

 

4. 차트 옵션 객체 생성 (0인 값은 안보이도록 설정)

// 차트 옵션 객체 생성
var options = {
    scales: {
        xAxes: [{
            stacked: true // x축을 STACKED 모드로 설정
        }],
        yAxes: [{
            stacked: true // y축을 STACKED 모드로 설정
        }]
    },
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data) {
                var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                var value = tooltipItem.yLabel;
                if (value === 0) {
                // Hide tooltip for 0 values
                return '';
            }
           	return datasetLabel + ': ' + value;
            },
        },
    },
};

5. 차트 객체 생성

// 캔버스 요소 선택
var ctx = document.getElementById("chart1").getContext("2d");

// 차트 객체 생성
var myChart = new Chart(ctx, {
    type: "horizontalBar", // 가로막대 그래프 타입 설정
    data: {
        labels: labels,
        datasets: datasets
    },
    options: options
});