Chart.js 라이브러리를 이용하여 공유하기 기능 현황 차트로 표현하기

Chart.js 라이브러리 type bar로 표현할 수 있지만 pie, doughnut로 바꿔서 표현해 보기

기획

사용자가 컨텐츠를 공유하기 기능을 이용했을 때 가장 많이 공유한 플랫폼을 알아보는 차트가 필요합니다.

요청

세로 막대그래프 형식으로 플랫폼 이름, 공유 횟수, 각각 전체에서 차지하는 비율이 있어야 합니다.

재해석해보기

플랫폼 이름과 공유 횟수를 검색어 순위처럼 표현하고 싶고, 각각 차지하는 비율은 파이 차트나 도넛 차트로 표현하고 싶어 졌습니다. 그리고 남는 공간에는 단말기 별 공유하기 기능 세로 막대 차트를 추가하고 싶어 졌습니다.

공유하기 현황

공유 횟수 기준으로 순위

페이지에 들어왔을 때 가장 먼저 보이는 요소입니다. 1위에 강조 표현을 하는 것도 좋을 것 같습니다. 

각각 차지하는 비율 파악하기 - 파이차트 vs 도넛차트

도넛 차트 중간에 레이블 텍스트를 넣으면 설명 용도가 더 명확해지는데, 넣을 문구가 생각나지 않아서 생략하였습니다. 파이 차트로 꽉 채우니 알록달록 우산이 생각나서 눈이 아파서 도넛 차트로 결정하였습니다.

파이 차트

도넛 차트

 

HTML

<div class="col-7">
	<div class="card me-2">
		<div class="card-header fw-bold">플랫폼별 공유하기 현황</div>
		<div class="card-body">
			<div class="row">
				<div class="col-4" style="height: 220px;">
					<div class="h-100">
						<asp:Repeater ID="rptList" runat="server" OnItemDataBound="rptList_ItemDataBound">
							<ItemTemplate>
								<div class="rank-border p-2 my-2 align-items-center">
									<div class="ms-2 me-auto">
										<div><span class="me-3 fw-bold"><%# Container.ItemIndex + 1 %></span><%# Eval("ShareName") %></div>
									</div>
									<asp:Label ID="lblCount" runat="server"></asp:Label>
								</div>
							</ItemTemplate>
						</asp:Repeater>
					</div>
				</div>
				<div class="col-8" style="height: 220px;">
					<div class="w-100 h-100 d-flex justify-content-center">
						<div>
							<canvas id="platformChart"></canvas>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
</div>

스크립트

datalabels 플러그인을 사용하려면 꼭 플러그인을 추가해야 합니다.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

 const platformctx = document.getElementById('platformChart');

    const data = {
        labels: [<%= _PLATFORM_NAME %>],
        datasets: [{
            data: [<%= _PLATFORM_VALUE %>],
            backgroundColor: [<%= _PLATFORM_COLOR %>],
            hoverOffset: 4
        }]
    };

    const options = {
        plugins: {
            legend: {
                display: false
            },
            datalabels: {
                formatter: (value, context) => {
                    return Math.round(value / context.chart.getDatasetMeta(0).total * 100) + "%";
                },
                color: '#fff',
            }
        }
    };

    let platform = new Chart(platformctx, {
        type: 'doughnut',
        data: data,
        options: options,
        plugins: [ChartDataLabels]

    });

    platform.canvas.parentNode.style.width = '220px';
    platform.canvas.parentNode.style.height = '220px';

완성