[javascript] Highcharts에서 레더 차트 만들기

27 Nov 2023

javascript

이번 포스트에서는 Highcharts를 사용하여 레더 차트를 만드는 방법에 대해 알아보겠습니다.

Highcharts란?

Highcharts는 JavaScript 기반의 오픈소스 차트 라이브러리로, 다양한 종류의 차트를 HTML 웹페이지에 쉽게 표시할 수 있도록 도와줍니다. Highcharts는 상업적 용도로도 사용할 수 있는 라이선스가 있으며, 다양한 차트 유형과 커스터마이징 옵션을 제공합니다.

레더 차트란?

레더 차트는 다각형의 내부에 여러 값을 표시하는 차트입니다. 다각형의 변은 각각의 값에 대응되며, 값들을 서로 연결하여 다각형을 완성합니다. 레더 차트는 다양한 변수들의 상관관계를 한눈에 파악할 수 있도록 도와주는 시각화 도구로 유용하게 사용됩니다.

Highcharts 레더 차트 만들기

Highcharts 라이브러리를 HTML 페이지에 추가합니다.

<script src="https://code.highcharts.com/highcharts.js"></script>

HTML 페이지에 레더 차트를 그릴 컨테이너를 추가합니다.

<div id="chartContainer"></div>

JavaScript 코드에서 레더 차트를 설정하고 데이터를 추가합니다.

Highcharts.chart('chartContainer', {
    chart: {
        polar: true,
        type: 'line'
    },
    title: {
        text: '레더 차트'
    },
    xAxis: {
        categories: ['값1', '값2', '값3', '값4', '값5']
    },
    yAxis: {
        min: 0
    },
    series: [{
        name: '데이터',
        data: [80, 50, 60, 40, 70],
        pointPlacement: 'on'
    }]
});

위 코드에서는 chartContainer라는 ID를 가진 요소에 레더 차트를 그리고 있습니다. x축은 categories 속성으로 설정되며, y축은 data 속성으로 설정됩니다.

HTML 페이지에서 레더 차트를 확인합니다.

위의 코드를 HTML 페이지에 추가하고 브라우저를 열어 레더 차트를 확인해 봅시다.

마무리

이번 포스트에서는 Highcharts를 사용하여 레더 차트를 만드는 방법에 대해 알아보았습니다. Highcharts는 다양한 종류의 차트를 만들 수 있는 강력한 도구이며, 레더 차트는 여러 변수 간의 관계를 시각화하여 분석할 수 있는 유용한 차트입니다. 코드를 직접 실행하고 커스터마이징 해보면서 레더 차트에 대한 이해를 더욱 높일 수 있을 것입니다.

Highcharts란?

레더 차트란?

Highcharts 레더 차트 만들기

마무리

참고 자료