[javascript] Highcharts에서 차트를 이미지로 저장하기

Highcharts는 JavaScript로 작성된 인기 있는 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 종류의 시각적인 차트를 생성할 수 있습니다. 이번에는 Highcharts를 사용하여 생성한 차트를 이미지 형식으로 저장하는 방법에 대해 알아보겠습니다.

Highcharts Export Server 설치

Highcharts Export Server를 사용하면 서버 측에서 차트를 이미지로 변환할 수 있습니다. 이를 위해 먼저 Highcharts Export Server를 설치해야 합니다. 아래의 명령어를 사용하여 설치합니다.

npm install -g highcharts-export-server

이미지로 변환하기

Highcharts Export Server를 설치한 후에는 코드에서 export라는 함수를 사용하여 차트를 이미지로 변환할 수 있습니다.

const exporter = require('highcharts-export-server');

// Exporter 설정
exporter.initPool();

const chartConfig = {
  chart: {
    type: 'bar'
  },
  title: {
    text: '차트 제목'
  },
  xAxis: {
    categories: ['A', 'B', 'C']
  },
  yAxis: {
    title: {
      text: ''
    }
  },
  series: [{
    name: '시리즈 1',
    data: [1, 2, 3]
  }, {
    name: '시리즈 2',
    data: [4, 5, 6]
  }]
};

const exportConfig = {
  type: 'png',
  options: {
    chart: chartConfig
  },
  outfile: 'chart.png'
};

// 차트를 이미지로 변환
exporter.export(exportConfig, (err, res) => {
  if (err) {
    console.error(err);
  } else {
    console.log(res);
    exporter.killPool();
  }
});

위의 코드는 간단한 막대 그래프를 생성하고 해당 차트를 이미지로 변환하여 chart.png라는 파일로 저장하는 예시입니다. chartConfig 객체를 통해 차트의 설정을 정의하고, exportConfig 객체를 통해 변환할 이미지의 타입과 파일 이름을 설정합니다.

결론

Highcharts를 사용하여 생성한 차트를 이미지로 저장하는 방법에 대해 알아보았습니다. Highcharts Export Server를 사용하여 차트를 이미지로 변환할 수 있으며, export 함수를 통해 간단하게 변환할 수 있습니다. 차트를 이미지로 저장하고 웹 페이지나 문서에 삽입하여 데이터를 시각화하는 데 유용하게 활용할 수 있습니다.