하이차트 x축 라벨 생략하는 방법

하이차트를 이용해 차트를 그릴 때 x축 값이 너무 길거나 많을 때 각도가 기울어지면서 차트 영역이 작아지는 현상이 있는데

이럴 때 라벨을 생략해주면 차트가 작아지는 것을 방지할 수 있다.

라벨에 step 값을 지정하여 생략하는 법을 정리해 보았다.

 

샘플로 그려본 차트이다.

x축 값으로 100개를 설정해 두었는데 이미 너무 많고 길기 때문에 자동으로 생략이 되긴하였다.

그래도 여전히 값이 기울어져 차트 영역이 작아지기 때문에 step 값을 설정해 주겠다.

 

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container">차트영역</div>
<script>
Highcharts.chart('container', {

    title: {
        text: 'x축 라벨 생략하기'
    },

    yAxis: {
        title: {
            text: 'y 값'
        }
    },

    xAxis: {
        categories : [
          10000001, 10000002, 10000003, 10000004, 10000005, 10000006, 10000007, 10000008, 10000009, 10000010,
          10000011, 10000012, 10000013, 10000014, 10000015, 10000016, 10000017, 10000018, 10000019, 10000020,
          10000021, 10000022, 10000023, 10000024, 10000025, 10000026, 10000027, 10000028, 10000029, 10000030,
          10000031, 10000032, 10000033, 10000034, 10000035, 10000036, 10000037, 10000038, 10000039, 10000040,
          10000041, 10000042, 10000043, 10000044, 10000045, 10000046, 10000047, 10000048, 10000049, 10000050,
          10000051, 10000052, 10000053, 10000054, 10000055, 10000056, 10000057, 10000058, 10000059, 10000060,
          10000061, 10000062, 10000063, 10000064, 10000065, 10000066, 10000067, 10000068, 10000069, 10000070,
          10000071, 10000072, 10000073, 10000074, 10000075, 10000076, 10000077, 10000078, 10000079, 10000080,
          10000081, 10000082, 10000083, 10000084, 10000085, 10000086, 10000087, 10000088, 10000089, 10000090,
          10000091, 10000092, 10000093, 10000094, 10000095, 10000096, 10000097, 10000098, 10000099, 10000100
        ],
        labels : {
           step : 12 // 단계 설정
        }
    },

    series: [{
        name: '테스트',
        data: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 
        	   20, 19, 18, 17, 16, 15, 14, 13, 12, 11,
               10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 
        	   20, 19, 18, 17, 16, 15, 14, 13, 12, 11,
               10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 
        	   20, 19, 18, 17, 16, 15, 14, 13, 12, 11,
               10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 
        	   20, 19, 18, 17, 16, 15, 14, 13, 12, 11,
               10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 
        	   20, 19, 18, 17, 16, 15, 14, 13, 12, 11]
    }]
});
</script>

 

기본 차트 소스에

labels : {step : 12 } // 단계 설정

이부분을 추가해 준 소스이다.

 

위의 소스를 실행하면 다음과 같이 x축 라벨이 생략되어 나오는 것을 볼 수 있다.

 

위의 소스에서 step 값을 12로 지정해 주었기 때문에 열두개 간격으로 라벨이 표시되는 것을 볼 수 있다.

간격을 더 넓히고 싶으면 step 값을 더 크게 지정해 주면 된다.

 

하지만 step 값을 너무 작게 설정하면 이렇게 x축 값이 겹쳐서 노출되기 때문에 테스트를 진행하면서 적절한 값을 설정해 주면 된다.

 

보통 개발할 때는 DB에서 불러온 값을 자동으로 넣어 주는 경우가 많기 때문에 이럴 경우에는

 

(전체 데이터 길이) ÷ (차트에 나타낼 x축 라벨 개수)

 

값을 스텝 값에 지정해 사용하면 된다.