Highcharts를 사용하여 확장 가능한 차트를 만드는 방법

Highcharts로 확장 가능한 차트를 만드는 방법

개요:
Highcharts는 웹사이트나 애플리케이션에서 다양한 대화형 차트를 만드는 데 사용할 수 있는 강력한 JavaScript 차트 라이브러리입니다. 이 기사에서는 Highcharts를 사용하여 확장 가능한 차트를 만드는 방법에 중점을 둘 것입니다. 확대/축소 가능한 차트는 사용자가 제스처나 클릭을 사용하여 차트를 확대 또는 축소하여 데이터를 더 자세히 또는 더 일반적인 수준으로 볼 수 있음을 의미합니다. 이 기능을 구현하기 위해 Highcharts 라이브러리를 설정하고 사용하는 방법을 설명하기 위해 샘플 코드를 사용하겠습니다.

단계:

1. Highcharts 라이브러리 소개
   먼저 HTML 페이지에 Highcharts 라이브러리를 소개해야 합니다. Highcharts 공식 웹사이트에서 Highcharts 라이브러리를 다운로드한 후 아래와 같이 HTML 페이지의

   태그에 도입할 수 있습니다.

   <script src="https://code.highcharts.com/highcharts.js"></script>

   또한 Highcharts의 내보내기 기능을 사용해야 하는 경우, 내보내기 모듈도 도입해야 합니다.

   <script src="https://code.highcharts.com/modules/exporting.js"></script>

2. 컨테이너 만들기
   다음으로 차트를 배치하기 위해 HTML 페이지에 컨테이너를 만들어야 합니다. 고유 ID가 있는 빈 컨테이너는

   요소를 사용하여 생성할 수 있습니다.

   <div id="chart-container"></div>

3. 차트 구성 설정
   JavaScript에서는 Highcharts 차트에 대한 몇 가지 구성 옵션을 제공해야 합니다. 다음 샘플 코드는 차트 구성을 설정하고 간단한 확장 가능한 선 차트를 만드는 방법을 보여줍니다.

// 设置图表配置
var options = {
  chart: {
    type: 'line',
    zoomType: 'x',  // 开启x轴缩放
  },
  title: {
    text: '可缩放折线图'
  },
  xAxis: {
    type: 'datetime'  // x轴类型为日期时间
  },
  yAxis: {
    title: {
      text: '值'
    }
  },
  series: [{
    data: [5, 10, 15, 20, 25]  // 图表数据
  }]
};

// 创建图表
Highcharts.chart('chart-container', options);

위 샘플 코드에서는 차트 유형을 선 차트로 설정하고 x축 스케일링을 켰습니다. 차트의 데이터는 시리즈 아래의 데이터 배열에 있습니다.

4. 제스처 확대/축소 기능 추가
   Highcharts는 모바일 장치에서 제스처 확대/축소 기능을 지원할 수 있는 "mobile.js"라는 모듈을 제공합니다. 제스처 확대/축소 기능을 활성화하기 위해 Highcharts 라이브러리를 도입할 때만 이 모듈을 도입하면 됩니다.

   <script src="https://code.highcharts.com/modules/mobile.js"></script>

   소개 후에 Highcharts는 액세스 중인 장치 유형을 자동으로 감지하고 해당 대화형 기능을 활성화합니다.

5. 사용자 정의 크기 조정 옵션
   기본 x축 크기 조정 기능 외에도 Highcharts에서는 크기 조정 옵션을 사용자 정의할 수도 있습니다. 옵션에서 xAxis 객체의 minRange 및 maxRange 속성을 수정하면 x축 스케일링에 대한 최소 및 최대 범위 값을 설정할 수 있습니다. 예를 들어 x축 확대/축소를 1시간에서 30일 사이로 제한하려면 다음 코드를 추가하면 됩니다.

   xAxis: {
     type: 'datetime',
     minRange: 3600 * 1000,  // 1小时
     maxRange: 30 * 24 * 3600 * 1000  // 30天
   },

   이를 설정한 후 사용자가 차트에서 확대/축소 작업을 수행하면 x축은 범위 내에서 지정된 값으로 제한됩니다.

요약:
위 단계를 통해 Highcharts를 사용하여 확장 가능한 차트를 만들 수 있습니다. 먼저 Highcharts 라이브러리를 도입하고 차트를 보관할 컨테이너를 만들어야 합니다. 그런 다음 차트 유형, X축 및 Y축 설정, 차트 데이터 등 필요에 따라 차트의 구성 옵션을 설정합니다. 다음으로 mobile.js 모듈을 도입하여 모바일 장치에서 동작 확대/축소 기능을 활성화할 수 있습니다. 마지막으로 사용자 정의 구성 옵션을 사용하면 확장 동작의 세부 사항을 추가로 제어할 수 있습니다. 이 글이 Highcharts로 확장 가능한 차트를 만드는 데 도움이 되기를 바랍니다!

코드는 스킬 마스터의 핵심이므로 이론적 지식을 이해한 후 Highcharts를 사용하여 확장 가능한 차트를 직접 만들어 더 나은 학습 결과를 얻는 것이 좋습니다.