[javascript] Chartkick에서 사용 가능한 레이아웃 설정 방법

29 Nov 2023

javascript

Chartkick은 웹 상에서 사용할 수 있는 JavaScript 차트 라이브러리입니다. 이 라이브러리를 사용하면 간단하게 다양한 차트를 생성할 수 있습니다. 이번 포스트에서는 Chartkick에서 사용 가능한 레이아웃 설정 방법에 대해 알아보겠습니다.

1. 컨테이너 크기 설정

Chartkick을 사용하여 차트를 만들 때, 컨테이너의 크기를 지정할 수 있습니다. 이를 통해 차트의 크기를 원하는대로 조정할 수 있습니다.

<div id="chart" style="width: 500px; height: 300px;"></div>

<script>
  new Chartkick.LineChart("chart", data);
</script>

위의 예제에서는 width와 height 속성을 사용하여 컨테이너의 크기를 지정하였습니다.

2. 레이아웃 템플릿 설정

Chartkick에서는 다양한 레이아웃 템플릿을 제공합니다. 이를 사용하여 차트의 레이아웃을 원하는대로 설정할 수 있습니다.

new Chartkick.LineChart("chart", data, { 
  library: { 
    layout: {
      padding: {
        top: 20,
        left: 30,
        right: 10,
        bottom: 40
      }
    }
  } 
});

위의 예제에서는 library.layout.padding 속성을 사용하여 차트의 패딩을 설정하였습니다. top, left, right, bottom 속성을 사용하여 상단, 좌측, 우측, 하단 패딩을 설정할 수 있습니다.

3. 축 스타일 설정

Chartkick에서는 축의 스타일도 설정할 수 있습니다. 아래의 예제에서는 축의 레이블 색상과 크기, 축 선의 색상을 설정하였습니다.

new Chartkick.LineChart("chart", data, { 
  library: { 
    scales: {
      yAxes: [{
        ticks: {
          fontColor: "red",
          fontSize: 14
        },
        gridLines: {
          display: true,
          color: "blue"
        }
      }],
      xAxes: [{
        ticks: {
          fontColor: "green",
          fontSize: 12
        },
        gridLines: {
          display: true,
          color: "yellow"
        }
      }]
    }
  } 
});

위의 예제에서는 library.scales.yAxes와 library.scales.xAxes를 사용하여 y축과 x축의 스타일을 설정하였습니다.

이와 같이 Chartkick에서는 다양한 방법으로 차트의 레이아웃을 설정할 수 있습니다. 자세한 내용은 공식 문서를 참조하시기 바랍니다.