[javascript] Highcharts에서 막대 차트 만들기

27 Nov 2023

javascript

Highcharts는 JavaScript로 작성된 강력한 차트 라이브러리입니다. 이를 사용하여 다양한 종류의 차트를 만들 수 있으며, 여기에서는 Highcharts를 사용하여 막대 차트를 만드는 방법을 알아보겠습니다.

Highcharts 설치하기

Highcharts를 사용하려면 먼저 Highcharts 라이브러리를 다운로드하고 HTML 문서에 포함해야 합니다. 다음은 Highcharts를 설치하는 방법입니다.

Highcharts 공식 웹사이트에서 Highcharts 라이브러리를 다운로드합니다.
다운로드한 파일을 웹 프로젝트의 디렉토리에 추가합니다.
HTML 파일의 <head> 섹션에 다음과 같이 스크립트 태그를 추가하여 Highcharts를 불러옵니다.

<script src="path/to/highcharts.js"></script>

막대 차트 생성하기

HTML 문서에 Highcharts를 포함시켰다면, 이제 막대 차트를 생성할 준비가 되었습니다. 다음은 Highcharts를 사용하여 막대 차트를 만드는 간단한 예제입니다.

<div id="chart-container" style="width: 400px; height: 300px;"></div>

<script>
  // 차트 데이터
  var data = {
    categories: ['A', 'B', 'C', 'D', 'E'], // X축 카테고리
    series: [
      {
        name: 'Series 1',
        data: [5, 8, 3, 7, 2] // Y축 데이터
      }
    ]
  };

  // 막대 차트 생성
  Highcharts.chart('chart-container', {
    chart: {
      type: 'column' // 막대 차트로 설정
    },
    title: {
      text: '막대 차트 예제'
    },
    xAxis: {
      categories: data.categories
    },
    yAxis: {
      title: {
        text: 'Y축 제목'
      }
    },
    series: data.series
  });
</script>

위 코드에서는 <div id="chart-container"> 요소를 차트 컨테이너로 사용하고 있습니다. 이 요소는 차트를 표시할 영역의 크기를 설정하기 위해 style 속성을 사용하여 너비와 높이를 지정하고 있습니다.

막대 차트 데이터는 data 객체에 정의되어 있으며, categories 배열에는 X축의 카테고리를, series 배열에는 Y축의 데이터를 설정하고 있습니다.

막대 차트를 생성하기 위해 Highcharts.chart() 함수를 사용하고 있으며, 첫 번째 인자로 차트를 표시할 요소의 ID('chart-container')를 전달하여 차트가 표시될 위치를 지정하고 있습니다. 그리고 chart, title, xAxis, yAxis, series 속성을 사용하여 차트의 타입, 제목, 축 설정 및 데이터를 정의하고 있습니다.

결론

Highcharts를 사용하여 막대 차트를 만드는 방법에 대해 알아보았습니다. Highcharts는 다양한 차트를 지원하고 많은 옵션을 제공하므로, 필요에 맞게 설정하여 원하는 형태의 차트를 쉽게 만들 수 있습니다. 자세한 내용은 Highcharts 공식문서를 참고하시기 바랍니다.