Amcharts와 다른 도표 계열 js 라이브러리의 비교

All About Group(주식회사) Advent Calendar 2018열흘째(실제로6일째).
전날Nack의 글 재미있었어요. 꼭 읽어주세요.
@Nack 그렇게 재밌는 글은 못 쓰겠지만 평소 작업 중에도 사용하던 암차츠의 차트 라이브러리를 소개하겠습니다.
다른 도표계 js 라이브러리와 비교도 조금 섞여서 계속 써 내려가세요.

도표 시스템 js 라이브러리 소개


Amcharts

  • 개요
    최신 버전은 v4(2018/12 현재)로, v3까지 나온 버전이라면 GUI를 기반으로 다양한 그래프를 간단하게 제작할 수 있다.
    각 그래프의 자유도도 매우 높아 세밀한 설정이 가능한 것이 매력이다.
  • 관련 링크
  • 공식 문서
  • 견본
  • 라이선스
  • Charts.js

  • 개요
    js의 간단한 코드만 기술하면 도표를 만들 수 있다.
    주요 그래프가 거의 망라돼 있어 쉽게 그래프를 그리고 싶은 사람에게 추천한다.
  • 관련 링크
  • 공식 문서
  • 견본
  • 라이선스
  • Highcharts.js

  • 개요
    삼키맵과 네모난 상자맵 같은 매우 많은 도표를 만들 수 있습니다.
    샘플에서 코드펜으로 연결되어 있기 때문에 도표에 신경 쓰이는 코드를 바로 확인할 수 있습니다.
  • 관련 링크
  • 공식 문서
  • 견본
  • 라이선스
  • D3.js

  • 개요
    그래프의 종류도 다양하고 성실해도 되는 무적 프로그램 라이브러리다.
    초보자에게는 어려운 코드를 써야 하기 때문에 가져오는 장애가 높다는 단점이 있다.
  • 관련 링크
  • 공식 문서
  • 견본
  • 라이선스
  • C3.js

  • 개요
    D3.js 기반의 도표를 전문적으로 제작하는 프로그램 라이브러리입니다.
    D3보다 가져오기 쉽습니다.
  • 관련 링크
  • 공식 문서
  • 견본
  • 라이선스
  • Amcharts에서 그릴 수 있는 차트 유형


    https://www.amcharts.com/demos/
    아주 많이,,
  • 막대 그래프
  • 행도
  • 도넛 그림
  • 지역도
  • 풍선 그래프
  • 양초봉
  • 라다투
  • 트리 그림
  • 위와 같은 다양한 그래프 외에도 v4와 지금까지 표현하지 못한 선키데이지, 어떻게 사용하는지 모르는 다양한 그래프가 추가됐다.
    그리고 여러 개의 도표를 자유롭게 조합할 수 있다.

    Amcharts와 다른 도표 계열 js 라이브러리의 비교


    Amcharts
    Charts.js
    Highchart.js
    D3.js
    C3.JS
    무상이었어
    ○※1

    ×


    GUI

    ×
    ×
    ×
    ×
    svg/canvas
    svg
    canvas
    svg
    svg
    svg
    쉽게 가져오기



    ×

    차트 유형





    ※ 1: 로고가 표시되지 않을 경우 유료.

    Amcharts 테스트


    https://live.amcharts.com/
    v3까지 버전이면 이쪽에서 GUI를 기반으로 그래프를 만들 수 있습니다.
    화면 속 메이크 어 차트에서 제작 화면으로 옮길 수 있다.
    많은 메뉴 중에서 선택하는 것이 매력이다.

    다음은 스트라이프와 라인의 복합도를 만들어 보자.
    영어 기반 GUI이지만 직관적이어서 빠르게 변경하는 법을 배울 수 있다.(진심으로 일본어화됐으면 좋겠는데...)

    어느 정도 GUI를 통해 제작되고 작은 부분도 js의 코드를 직접 편집할 수 있다.

    제작이 끝난 후 코드를 직접 복사하여 "}"에 붙여넣으면 동작을 확인할 수 있습니다.

    끝맺다


    광고의 효과를 검증하기 위해 우리는 각종 도표 라이브러리에 대해 비교와 연구를 진행하였다.
    현재 사용하고 있는 것은 mcharts의 v3이며, 도입된 이유는 다음과 같다.
  • 가져오기 쉽다(엔지니어가 아니어도 도표를 만들 수 있다)
  • 도표의 종류가 풍부하다(촛불 도표를 만들 수 있는 프로그램 라이브러리는 상당히 적다.)
  • 단순히 예뻐
  • 작은 조정도 가볍다(전설과 풍선, 작은 색깔과 선의 굵기를 조정할 수 있다)
  • 앞으로 v4도 GUI에서 제작하면서 더 나은 UIUX를 구현할 수 있는 프로그램 라이브러리를 찾길 희망한다.
    추천할 게 있으면 꼭 댓글을 달아주세요.

    좋은 웹페이지 즐겨찾기