[Highchart] Highchart

highchart란?

• 데이터 시각화 툴로 간단한 그래프를 그릴 수 있다.

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

위의 스크립트는 기본적인 highchart의 기능을 모두 담고 있다.

*필수적으로 불러와야 한다.

 <script src="https://code.highcharts.com/modules/series-label.js"></script>

데이터에 라벨을 붙이기 위한 스크립트로 라벨링을 해야 하는 경우 필수적으로 불러와야 한다.

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

highchart로 생성한 그래프를 jpg, png 등의 이미지 확장자로 다운로드할 수 있게 만든 스크립트이다.

<script src="https://code.highcharts.com/modules/export-data.js"></script>

• highchart로 그래프를 생성할 때 사용한 데이터 파일을 csv 등의 확장자로 다운로드할 수 있게 만든 스크립트이다. 외부 사용자들이 데이터를 다운로드할 있게 하는 경우에만 사용한다.

• 정리하자면 1번, 2번 스크립트는 필수적으로 호출하며, 3번과 4번은 해당 기능이 필요한 경우에 부가적으로 호출하면 된다.

5. html파일에 1,2번을 넣었다면, index.html에 div를 넣고 거기에 chart를 만들 수 있다.

document.addEventListener("DOMContentLoaded", function () {
  var data = [5, 10, 15, 20, 25];

  var options = {
    chart: {
      type: "bar",
    },
    title: {
      text: "Sample Chart Title",
    },
    series: [
      {
        data: data,
      },
    ],
  };

  Highcharts.chart("graph-container-01", options);
});