[javascript] Angular와 자바스크립트에서의 비주얼라이제이션 라이브러리 비교

21 Dec 2023

javascript

D3.js는 데이터 기반 문서(Document)을 다루기 위해 특화된 자바스크립트 라이브러리로, 데이터 시각화에 많이 사용됩니다. D3.js를 통해 다양한 그래픽과 차트를 만들 수 있으며, 사용자 정의가 용이합니다. 반면에, D3.js는 높은 러닝 커브와 상대적으로 많은 코드 작성이 요구됩니다.

import * as d3 from 'd3';

const svg = d3.select('body')
  .append('svg')
  .attr('width', 400)
  .attr('height', 400);

svg.append('circle')
  .attr('cx', 200)
  .attr('cy', 200)
  .attr('r', 100)
  .attr('fill', 'green');

Chart.js

Chart.js는 D3.js보다 사용하기 쉽고 간단한 API를 제공하는 자바스크립트 차트 라이브러리입니다. 선, 막대, 원형 차트 등을 쉽게 생성할 수 있으며, 반응형 디자인을 제공합니다. Chart.js는 작고 가벼운 특징을 갖추고 있으므로 작은 규모의 프로젝트에 적합합니다.

import Chart from 'chart.js/auto';

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  }
});

Highcharts

Highcharts는 상업적인 목적으로 사용 가능한 완전한 기능을 갖춘 차트 및 그래픽 라이브러리입니다. Highcharts는 사용하기 쉽고, 커스터마이징이 용이하며, 다양한 차트 옵션을 제공합니다. 또한, Highcharts는 커뮤니티 및 고객 지원이 잘 되어 있어 안정적인 선택이 될 수 있습니다.

import Highcharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsExporting from 'highcharts/modules/exporting';

HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);

const options = {
  chart: {
    type: 'line'
  },
  title: {
    text: 'Monthly Average Temperature'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: [{
    name: 'Tokyo',
  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }]
};

const chart = Highcharts.chart('container', options);

목차

D3.js

Chart.js

Highcharts

참고 자료