Highcharts는 다양한 형태의 그래프를 생성할 수 있는 JavaScript 라이브러리입니다. 그 중에서도 x축 카테고리로 숫자 대신 문자열을 사용하여 그래프를 그릴 수 있습니다. 이 글에서는 Highcharts에서 문자열 카테고리를 사용하는 방법을 알아보겠습니다.

카테고리 설정하기

Highcharts에서 문자열 카테고리를 사용하기 위해서는 x축의 카테고리를 배열 형태로 설정해야 합니다. 각 배열 요소는 문자열로 이루어져야 하며, 그래프의 x축에 해당하는 값을 나타냅니다.

categories: ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']

위의 예제에서는 'Apple', 'Banana', 'Orange', 'Grapes', 'Mango'라는 문자열 값을 갖는 배열을 x축의 카테고리로 설정하였습니다.

그래프 데이터 설정하기

카테고리를 설정한 후에는 각 카테고리에 해당하는 값들을 데이터로 설정해야 합니다. 이때, 데이터는 숫자 형태로 설정해야 합니다.

series: [{
    name: 'Fruit',
    data: [10, 7, 15, 5, 12]
}]

위의 예제에서는 'Fruit'이라는 시리즈 이름과 [10, 7, 15, 5, 12]라는 숫자 값을 갖는 데이터를 설정하였습니다. 이 데이터는 각각 'Apple', 'Banana', 'Orange', 'Grapes', 'Mango'의 값에 대응합니다.

그래프 그리기

이제 설정한 카테고리와 데이터를 가지고 그래프를 그릴 수 있습니다.

var chart = Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']
    },
    series: [{
        name: 'Fruit',
        data: [10, 7, 15, 5, 12]
    }]
});

위의 예제에서는 column 형태의 그래프를 그리기 위해 chart 속성을 설정하였고, x축에 카테고리를 설정하기 위해 xAxis 속성을 사용하였습니다. 마지막으로 시리즈 이름과 데이터를 설정하여 실제 그래프를 생성하였습니다.

결론

Highcharts를 사용하여 문자열 카테고리를 가진 그래프를 그릴 수 있습니다. x축의 카테고리를 설정하고, 각 카테고리에 해당하는 값을 데이터로 설정하여 그래프를 그릴 수 있습니다. 이를 통해 다양한 형태의 그래프를 만들어 필요한 정보를 시각적으로 표현할 수 있습니다.

참고 자료:

• Highcharts 공식 문서