Chart.js는 웹을 위한 JavaScript 기반의 강력한 차트 라이브러리입니다. 이 라이브러리를 사용하여 래더 차트를 생성하는 방법을 알아보겠습니다.

Chart.js 라이브러리 추가하기

Chart.js를 사용하기 위해 먼저 해당 라이브러리를 웹 페이지에 추가해야 합니다. 아래와 같이 <script> 태그를 사용하여 라이브러리를 추가할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

래더 차트 생성하기

래더 차트는 막대 그래프와 비슷하지만, 각 막대가 오른쪽으로 올라가는 형태입니다. Chart.js를 사용하여 래더 차트를 생성하려면 다음과 같이 코드를 작성해야 합니다.

// HTML에서 차트가 그려질 캔버스 요소를 가져온다.
var chartCanvas = document.getElementById('chartCanvas').getContext('2d');

// 차트 데이터를 정의한다.
var chartData = {
  labels: ['A', 'B', 'C', 'D', 'E'],
  datasets: [{
    label: 'Series 1',
    data: [3, 5, 2, 7, 4],
    backgroundColor: ['rgba(255, 99, 132, 0.5)', 'rgba(54, 162, 235, 0.5)', 'rgba(255, 206, 86, 0.5)', 'rgba(75, 192, 192, 0.5)', 'rgba(153, 102, 255, 0.5)']
  }]
};

// 래더 차트를 생성한다.
var ladderChart = new Chart(chartCanvas, {
  type: 'horizontalBar',
  data: chartData,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

위의 코드는 다음과 같은 동작을 수행합니다.

1. chartCanvas 변수에 차트를 그릴 캔버스 요소를 가져옵니다.
2. chartData 객체를 통해 차트에 표시할 데이터를 정의합니다.
3. ladderChart 변수에 new Chart()를 이용하여 새로운 래더 차트 객체를 생성합니다.
4. type 속성을 'horizontalBar'로 설정하여 래더 차트를 가로 막대 형태로 지정합니다.
5. data 속성에 chartData 객체를 할당하여 차트에 데이터를 설정합니다.
6. options 속성을 이용하여 해당 차트의 설정을 지정합니다.

래더 차트를 생성한 후에는 해당 차트를 원하는 위치에 나타내기 위해 HTML 요소에 차트를 그릴 캔버스 요소를 추가해야합니다. 연관된 CSS 스타일을 사용하여 적절하게 꾸며줄 수 있습니다.

위의 코드는 Chart.js를 사용하여 래더 차트를 생성하는 간단한 예제입니다. Chart.js는 다양한 차트 유형과 옵션을 제공하기 때문에, 필요에 따라 공식 문서를 참조하여 더 많은 기능을 활용할 수 있습니다.

참고 자료

• Chart.js 공식 문서