[javascript] Highcharts에서 손 그리기 차트 만들기

27 Nov 2023

javascript

Highcharts는 JavaScript 기반으로 동적이고 상호 작용 가능한 차트를 생성하는 데 사용되는 강력한 라이브러리입니다. 이 블로그 포스트에서는 Highcharts를 사용하여 손 그리기 차트를 만드는 방법을 알아보겠습니다.

Step 1: 필수 파일 로드하기

먼저, Highcharts 라이브러리 파일과 관련 리소스를 HTML 문서에 로드해야 합니다. 다음과 같은 코드를 <head> 태그 내에 추가해주세요:

<!DOCTYPE html>
<html>
<head>
    <title>손 그리기 차트 예제</title>

    <!-- Highcharts 라이브러리 로드 -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/annotations.js"></script>
</head>
<body>
    <!-- 차트를 표시할 div 요소 -->
    <div id="chart-container"></div>

    <!-- Highcharts 차트 생성 스크립트 -->
    <script src="script.js"></script>
</body>
</html>

Step 2: 손 그리기 차트 생성하기

다음으로, Highcharts를 사용하여 손 그리기 차트를 생성하는 JavaScript 코드를 작성해야 합니다. script.js 파일에 다음 코드를 작성해주세요:

// 차트 컨테이너 요소를 가져옴
const container = document.getElementById('chart-container');

// 손 그리기 차트 생성 함수
function createChart() {
   Highcharts.chart(container, {
      chart: {
          type: 'spline',
          events: {
              load: function() {
                  // 차트가 로드되면 마우스 이벤트 리스너를 추가
                  container.addEventListener('mousedown', startDrawing);
                  container.addEventListener('mousemove', drawPath);
                  container.addEventListener('mouseup', endDrawing);
              }
          }
      },
      title: {
          text: '손 그리기 차트 예제'
      },
      series: [{
          name: 'Drawing',
          data: [],
          enableMouseTracking: false // 마우스 이벤트 추적 비활성화
      }],
      plotOptions: {
          spline: {
              marker: {
                  enabled: false // 데이터 포인트에 마커 비활성화
              }
          }
      }
   });
}

// 마우스 다운 이벤트 핸들러
function startDrawing(event) {
   const chart = Highcharts.charts[0];
   const x = event.xAxis[0].value;
   const y = event.yAxis[0].value;

   // 마우스가 선택한 위치에서 데이터 포인트 추가
   chart.series[0].addPoint({ x, y });
}

// 마우스 이동 이벤트 핸들러
function drawPath(event) {
   const chart = Highcharts.charts[0];
   const x = event.xAxis[0].value;
   const y = event.yAxis[0].value;

   // 마우스 이동에 따라 데이터 포인트 추가
   chart.series[0].addPoint({ x, y });
}

// 마우스 업 이벤트 핸들러
function endDrawing() {
   const chart = Highcharts.charts[0];

   // 마우스 이벤트 리스너 제거
   container.removeEventListener('mousedown', startDrawing);
   container.removeEventListener('mousemove', drawPath);
   container.removeEventListener('mouseup', endDrawing);
}

// 손 그리기 차트 생성 함수 호출
createChart();

Step 3: 결과 확인하기

위의 코드를 작성하고 HTML 파일을 브라우저에서 열면 손 그리기 차트가 표시됩니다. 마우스로 차트 영역 내에서 그림을 그릴 수 있습니다.

이제 Highcharts를 사용하여 손 그리기 차트를 만드는 방법을 알았습니다. Highcharts의 다양한 기능과 설정을 이용하여 차트를 사용자 정의할 수 있으니 참고해보세요. 더 자세한 정보는 Highcharts 공식 문서를 참조하세요.