[javascript] Highcharts에서 3D 차트 만들기

27 Nov 2023

javascript

Highcharts는 JavaScript로 작성된 강력한 차트 라이브러리입니다. 2D 차트를 만드는 것은 쉽지만, 3D 차트를 만드는 것은 조금 더 복잡해질 수 있습니다. 이번 글에서는 Highcharts를 사용하여 3D 차트를 만드는 방법에 대해 알아보겠습니다.

Highcharts 3D 모듈 가져오기

먼저 Highcharts 3D 모듈을 가져와야 합니다. Highcharts에서 제공하는 모듈 중 하나인 highcharts-3d.js 파일을 다운로드하여 프로젝트에 추가하거나, CDN을 통해 가져올 수 있습니다. 아래는 CDN을 사용하여 Highcharts 3D 모듈을 가져오는 예시 코드입니다.

<script src="https://code.highcharts.com/9.3.1/highcharts.js"></script>
<script src="https://code.highcharts.com/9.3.1/highcharts-3d.js"></script>

3D 차트 생성하기

Highcharts를 사용하여 3D 차트를 만들기 위해서는 일반적인 차트를 만드는 방법과 유사합니다. 다만, 차트의 chart 속성에 type을 "column" 또는 "bar" 등의 3D 차트 유형을 지정하고, chart 속성의 options3d 속성을 사용하여 3D 설정을 추가해야 합니다.

아래는 3D column 차트를 생성하는 예시 코드입니다.

Highcharts.chart('container', {
    chart: {
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },
    ...
});

options3d 속성을 사용하여 다양한 3D 설정을 지정할 수 있습니다. alpha와 beta는 차트의 회전 각도를 지정하며, depth는 차트의 깊이를 조절합니다. viewDistance는 사용자가 차트를 보는 거리를 조절합니다.

예시: 3D column 차트

다음은 예시로 3D column 차트를 생성하는 코드입니다.

Highcharts.chart('container', {
    chart: {
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: 'Monthly Sales'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Amount'
        }
    },
    series: [{
        name: 'Tokyo',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        name: 'New York',
        data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
    }, {
        name: 'London',
        data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
    }]
});

위 코드를 실행하면 “Monthly Sales” 제목과 3D column 차트가 생성됩니다.

결론

Highcharts를 사용하여 3D 차트를 만드는 방법에 대해 알아보았습니다. Highcharts 3D 모듈을 가져오고, options3d 속성을 사용하여 3D 설정을 지정할 수 있습니다. 예제 코드를 사용하여 다양한 3D 차트를 만들어보세요. 더 많은 정보는 Highcharts 공식 문서를 참고하십시오.

참고 문헌:

Highcharts 공식 문서