Chart.js 라이브러리를 이용하여 Radar Chart 그리기

Chart.js 

Chart.js는 오픈소스이며, HTML5 캔버스로 차트 요소를 렌더링을 합니다. CSS 스타일 지정을 허용하지 않습니다. 소스에서도 확인할 수 없습니다. 그러므로  스타일 변경을 원할 경우에는 기본 제공 옵션을 변경하거나, 플러그인 추가, 차트 종류를 만들어 원하는 대로 렌더링해야 합니다. 성능면에서도  SVG로 렌더링 되는 라이브러리와 비교하여 DOM 트리의 비용을 줄이며 dataset 내부 형식을 사용하여 효율적으로 수집할 수 있으므로 데이터 정규화과 데이터 파싱을 건너뛸 수 있고 렌더링 하기 전에 크기를 줄이도록 구성할 수 있습니다. 그 외에도 기본 옵션 기능 설명 및 API, 샘플 등 공식 사이트에 잘 정리되어 있어 처음부터 편하게 사용할 수 있습니다. 

 

Radar Chart

레이더 차트는 거미줄 차트로도 불립니다. 몇 개의 기준으로 측정한 데이터를 연도 등 시간의 흐름 등 변동을 한 번에 표시하기 좋은 차트입니다. 저는 개인의 역량을 최근 연도별로 비교, 분석할 때 많이 사용합니다.

 

예시 : 배경

연도별 읽은 도서 장르로 레이더 차트 그려봤습니다. 유료 독서 어플을 사용하고 있는데 도서 DB는 알라딘에서 제공받고 있습니다. 통계 메뉴에서  독서 상태가 '읽음' 일 때 도서 장르별로 pie 차트가 그려지는데 전체와 연도별로 조회할 수 있습니다. 도서 장르 분류가 서점 DB 장르로 분류 되기 때문에 개인이 목표한 역량 향상 추이를 보기가 좀 아쉽습니다. 실제 도서 장르 구분이 중요하지 않기 때문에 원하는 6개의 키워드로 정해 연도별 읽은 도서 권 수를 기입하였습니다.

 

예시 : 구현

npm 으로 설치하거나 CDN을 이용하면 됩니다. HTML 페이지에 canvas 태그로 원하는 영역에 코드를 작성합니다. 

canvas는 모든 브라우저에서 화면에 렌더링 되지만 스크린 리더에서는 접근할 수 없기 때문에 웹 접근성을 고려한다면 role, aria-label 속성을 사용하면 canvas에 접근 가능하여 대체 컨텐츠를 표시할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>    
<canvas id="myChart" width="400" height="100" aria-label="Hello ARIA World" role="img"></canvas>
<canvas id="myChart" width="400" height="100">
    <p>Hello 대체 컨텐츠</p>
</canvas>

먼저 차트에 표시할 데이터를 구성합니다. 나중에 DB에서 연결할 부분이며 연도별로 다른 색상으로 style을 설정합니다.

const data = {
   labels: [
                'IT',
                '경제',
                '교양',
                '문학',
                '심리학/에세이',
                '자기계발',
            ],
   datasets: [
                {
                    label: '2020',
                    data: [7, 4, 13, 6, 17, 7],
                    fill: true,
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgb(255, 99, 132)',
                    pointBackgroundColor: 'rgb(255, 99, 132)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgb(255, 99, 132)'
                },
                {
                    label: '2021',
                    data: [7, 8, 6, 8, 16, 9],
                    fill: true,
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgb(54, 162, 235)',
                    pointBackgroundColor: 'rgb(54, 162, 235)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgb(54, 162, 235)'
                },
                {
                    label: '2022',
                    data: [5, 1, 5, 5, 8, 6],
                    fill: true,
                    backgroundColor: 'rgba(255, 187, 0, 0.2)',
                    borderColor: 'rgb(255, 187, 0)',
                    pointBackgroundColor: 'rgb(255, 187, 0)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgb(255, 187, 0)'
                }
            ]
};

 

캔버스에 렌더링할 차트 옵션을 구성합니다.

Chart.defaults.font.size = ticks.font.size 로 방사형 축의 값을 설정할 수 있습니다.

pointLables가 6개의 키워드 항목의 레이블에 대한 옵션을 설정할 수 있고

angleLines는 방사형 (값)  축  주 눈금선의 옵션을 설정할 수 있습니다. display 옵션 기본값은 true인데 저는 false로 설정하였습니다.

grid는 주 눈금선의 옵션을 설정할 수 있습니다.

const config = {
            type: 'radar', // 레이더 차트
            data: data,
            options: {
                scales: { 
                    r: {
                        grid: { 
                        
                        },
                        angleLines: { 
                            display: false
                        },
                        pointLabels: {
                            color: 'black',
                            font: {
                                size: 16,
                                weight:'bold',
                            }
                        },
                        ticks: {
                            font: {
                                size: 10,
                            }
                        }
                    }
                },
                elements: {
                    line: {
                        borderWidth: 3
                    }
                },
                plugins: {
                    title: {
                        align: 'center',
                        display: true,
                        font: {
                            size:18,
                            weight:'bold'
                        },
                        text: 'Radar 차트',

                    },
                    subtitle: {
                        display: true,
                        text: '연도별 읽은 도서 장르',
                        font: {
                            size: 18,
                        }
                    },
                    legend: {
                        labels: {
                            font: {
                                size: 16
                            },
                            padding: 20,
                            useBorderRadius: true,
                            borderRadius:5
                        }
                    },
                }
            },
};

차트 생성하기

// 렌더링 옵션
// Chart.defaults.font.size = 10; 
// Chart.defaults.plugins.subtitle.font.size = 18;

const ctx = document.getElementById('myChart');
let chart = new Chart(ctx, config);

차트의 기본 옵션 외에도 애니메이션, 반응형, 이벤트, API 등 다양한 기능이 제공되고 있습니다. 

 

참고사이트
https://www.chartjs.org/docs/latest/
https://www.chartjs.org/docs/latest/getting-started/
https://www.chartjs.org/docs/latest/samples/information.html
https://www.chartjs.org/docs/latest/charts/radar.html
https://www.chartjs.org/docs/latest/axes/radial/
https://www.chartjs.org/docs/latest/axes/styling.html
https://www.chartjs.org/docs/latest/developers/api.html
https://www.chartjs.org/docs/latest/developers/updates.html