Chart.js는 데이터 시각화를 위한 강력한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 다양한 종류의 차트를 만들 수 있으며, 그 중에서도 흑백 차트는 독특한 시각적 효과를 제공합니다. 이번 포스트에서는 Chart.js를 사용하여 흑백 차트를 생성하는 방법에 대해 알아보겠습니다.

1. Chart.js 설치

먼저, Chart.js를 설치해야 합니다. 아래 명령을 사용하여 npm을 통해 Chart.js를 설치하세요.

npm install chart.js

2. HTML 파일 설정

Chart.js를 사용하기 위해 HTML 파일에 다음과 같은 스크립트 태그를 추가하세요.

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

3. 흑백 차트 작성

이제 흑백 차트를 작성해보겠습니다. 아래는 흑백 막대 차트를 생성하는 예제입니다.

const chartData = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [{
    label: 'Colors',
    data: [12, 19, 3, 5, 2, 3],
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    borderColor: 'rgba(0, 0, 0, 1)',
    borderWidth: 1,
  }]
};

const chartOptions = {
  scales: {
    y: {
      beginAtZero: true
    }
  },
  color: 'white'
};

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: chartOptions
});

위의 코드에서 차트 데이터는 chartData 객체에 저장되어 있으며, chartOptions 객체는 차트의 스타일 및 옵션을 정의합니다. myChart 객체를 통해 차트를 생성하고, ctx는 차트를 그릴 캔버스 요소의 컨텍스트입니다.

4. 결과 확인

위의 코드를 모두 작성한 후 HTML 파일을 열어 흑백 막대 차트를 확인해보세요. 차트의 색상은 투명한 흑백으로 설정되어 있으므로 독특하고 선명한 시각적 효과를 경험할 수 있습니다.

결론

이번 포스트에서는 Chart.js를 사용하여 흑백 차트를 생성하는 방법에 대해 알아보았습니다. Chart.js는 다양한 차트 종류와 스타일 옵션을 제공하므로, 데이터 시각화에 유용하게 사용될 수 있습니다. 흑백 차트를 활용하여 데이터의 시각적 표현을 강화해보세요.

참고 자료

• Chart.js 공식 문서
• Chart.js GitHub 저장소