[javascript] Highcharts에서 테마 적용하기

27 Nov 2023

javascript

Highcharts는 강력한 JavaScript 차트 라이브러리로, 다양한 종류의 차트를 만들 수 있습니다. 또한 Highcharts는 기본적인 테마를 제공하여 차트의 모양과 느낌을 설정할 수 있습니다. 그러나 기본 테마만으로는 원하는 디자인을 구현하기에는 제한이 있을 수 있습니다.

이 문제를 해결하기 위해 Highcharts에서는 사용자 정의 테마를 적용할 수 있는 기능을 제공합니다. 사용자 정의 테마를 적용하면 차트의 색상, 폰트, 배경 등을 자유롭게 조정할 수 있습니다.

테마 적용 방법

먼저 Highcharts를 불러오는 스크립트를 추가해야 합니다. 이후에 Highcharts의 테마 파일을 불러옵니다.

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/themes/custom-theme.js"></script>

그리고 적용하고자 하는 테마를 작성해야 합니다. 예를 들어, 다음과 같이 기본 테마를 확장하여 사용자 정의 테마를 작성할 수 있습니다.

Highcharts.theme = {
    colors: ['#FF0000', '#00FF00', '#0000FF'],
    chart: {
        backgroundColor: 'rgba(255, 255, 255, 0.1)'
    },
    title: {
        style: {
            color: '#FF00FF'
        }
    }
};

// 사용자 테마를 Highcharts에 설정
Highcharts.setOptions(Highcharts.theme);

위의 코드에서는 세 가지 색상을 사용하도록 테마를 설정하고, 차트의 배경 색상과 제목의 글자 색상을 설정하였습니다. 이렇게 작성한 테마를 Highcharts.setOptions() 메서드를 사용하여 Highcharts에 적용합니다.

그리고 차트를 생성할 때 chart 객체의 theme 속성을 설정하여 이전에 작성한 테마를 사용할 수 있습니다.

Highcharts.chart('chart-container', {
    chart: {
        theme: 'custom-theme'
    },
    // 차트의 설정 및 데이터
    ...
});

사용자 정의 테마 파일 만들기

위에서는 기존 테마를 확장하여 사용자 테마를 작성한 예시를 보여드렸습니다. 하지만 더 복잡한 테마를 작성하기 위해서는 따로 테마 파일을 만드는 것이 좋습니다.

테마 파일은 json 형식으로 작성되며, Highcharts의 스타일 옵션을 포함해야 합니다. 예를 들어, 다음과 같이 custom-theme.json 파일을 만들 수 있습니다.

{
    "colors": ["#FF0000", "#00FF00", "#0000FF"],
    "chart": {
        "backgroundColor": "rgba(255, 255, 255, 0.1)"
    },
    "title": {
        "style": {
            "color": "#FF00FF"
        }
    }
}

테마 파일을 작성한 뒤에는 스크립트 내에서 해당 파일을 불러와 사용하면 됩니다.

<script src="https://code.highcharts.com/themes/custom-theme.js"></script>

위의 스크립트를 HTML 파일에 추가하면, Highcharts에서 사용자 정의 테마를 로드할 수 있습니다.

테마 적용 방법

사용자 정의 테마 파일 만들기

참고 자료