Highchart 기초

Highcharts 사용법

Highcharts는 JavaScript로 작성된 데이터 시각화 라이브러리로, 다양한 차트를 생성할 수 있습니다.

Highcharts 설치

CDN 사용:
HTML <script> 태그를 통해 CDN에서 Highcharts를 가져옵니다:

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

npm 설치:
Node.js 환경에서 설치:

npm install highcharts

기본 차트 생성

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Highcharts Example</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
  <div id="container" style="width: 600px; height: 400px;"></div>

  <script>
    // Highcharts 설정
    Highcharts.chart('container', {
      chart: {
        type: 'line' // 차트 유형 (line, bar, pie 등)
      },
      title: {
        text: 'Monthly Sales' // 차트 제목
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] // X축 데이터
      },
      yAxis: {
        title: {
          text: 'Sales (units)' // Y축 제목
        }
      },
      series: [{
        name: 'Product A',
        data: [10, 20, 30, 25, 50] // 데이터
      }, {
        name: 'Product B',
        data: [5, 15, 25, 20, 40]
      }]
    });
  </script>
</body>
</html>

주요 설정

1) 차트 유형

chart.type 을 사용해 차트 유형을 설정합니다.
- line (선형 차트)
- bar (막대형 차트)
- pie (파이 차트)
- column (세로 막대형 차트)
- area (영역형 차트)

chart: {
  type: 'bar' // 막대형 차트로 설정
}

2) 데이터 시리즈

series는 각 데이터 집합을 정의합니다.

series: [{
  name: 'Category 1',
  data: [10, 20, 30]
}, {
  name: 'Category 2',
  data: [15, 25, 35]
}]

3) X축 ,Y축

X축 데이터:

xAxis: {
  categories: ['Jan', 'Feb', 'Mar'] // X축 값
}

Y축 제목:

yAxis: {
  title: {
    text: 'Revenue (in USD)' // Y축 제목
  }
}

파이 차트 예제

<div id="pieChart" style="width: 600px; height: 400px;"></div>

<script>
  Highcharts.chart('pieChart', {
    chart: {
      type: 'pie'
    },
    title: {
      text: 'Market Share'
    },
    series: [{
      name: 'Brands',
      data: [
        { name: 'Apple', y: 40 },
        { name: 'Samsung', y: 30 },
        { name: 'Huawei', y: 20 },
        { name: 'Others', y: 10 }
      ]
    }]
  });
</script>

고급 기능

1) 툴팁 설정

마우스를 올렸을 때 툴팁을 커스터마이징합니다.

tooltip: {
  pointFormat: '<b>{point.y}</b> units sold' // 툴팁 내용
}

2) 데이터 라벨 표시

차트 데이터에 직접 레이블을 추가합니다.

plotOptions: {
  pie: {
    dataLabels: {
      enabled: true,
      format: '<b>{point.name}</b>: {point.percentage:.1f} %'
    }
  }
}

3) 색상 사용자 정의

차트 색상을 직접 설정합니다.

colors: ['#FF0000', '#00FF00', '#0000FF']

Highcharts 라이브러리 확장

1) Highcharts Modules

더 많은 기능 추가: CDN 또는 npm을 사용해 추가 모듈 로드.

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

exporting.js: 차트를 PDF, PNG, SVG 등으로 다운로드할 수 있는 기능을 제공합니다.
drilldown.js: 드릴다운 차트를 지원합니다.

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

2) 드릴다운 차트 예제

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Browser Market Shares'
  },
  xAxis: {
    type: 'category'
  },
  series: [{
    name: 'Browsers',
    colorByPoint: true,
    data: [{
      name: 'Chrome',
      y: 62.74,
      drilldown: 'Chrome'
    }, {
      name: 'Firefox',
      y: 10.57,
      drilldown: 'Firefox'
    }]
  }],
  drilldown: {
    series: [{
      id: 'Chrome',
      data: [
        ['v65.0', 0.1],
        ['v64.0', 1.3]
      ]
    }, {
      id: 'Firefox',
      data: [
        ['v58.0', 1.02],
        ['v57.0', 7.36]
      ]
    }]
  }
});

Highcharts를 React, Vue, Angular에서 사용

highchart 활용팁

Highcharts 주요 팁

문서 참조

Highcharts 공식 문서에서 모든 설정과 API를 확인할 수 있습니다.

데이터를 동적으로 업데이트

let chart = Highcharts.chart('container', { series: [{ data: [1, 2, 3] }] });
chart.series[0].setData([4, 5, 6]); // 데이터 업데이트

JSON 데이터 사용

AJAX 요청을 통해 서버에서 데이터를 받아와 차트를 업데이트할 수 있습니다:

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    Highcharts.chart('container', {
      series: [{ data }]
    });
  });

Comments