메뉴 보이기
Profile
이온디

2016.06.02

차트

대시보드를 위한 오픈소스(Open Source) 차트(Chart) 라이브러리

조회 수 3577 추천 수 0

이 게시물은 무료로 사용할 수 있는 오픈 소스 차트 라이브러리(Open Source Chart Library)에 대해서 소개합니다. 

 

최근 ALM 관련 컨설팅을 하면서, 고객사에서 ALM 관련 데이터 수집과 데이터 표현에 즉 품질 대시보드대에 대한 관심이 많은 편인데, 오픈 소스 ALM 솔루션은 이러한 부분에서 약간은 미진한 부분이 있습니다. 뭔가 아쉬워요. 

 

그래서 이러한 개발 전반적인 데이터 현황을 보여주는 대쉬보드를 직접 개발을 하면서 사용할 수 있는 차트(Chart), 그래프 등의 라이브러리 정보를 공유합니다. 

 

아래 요약된 설명을 참고하시기 바랍니다. 

 

ChartJS

설명 :

ChartJS는 인기가 많은 Javascript Chart 라이브러리 중의 하나입니다. 일단 사용법이 편리하고 Chart가 이쁩니다.

링크 :

 

 

차트종류 :

 

  • Bar Chart
  • Pie & Doughnut Chart
  • Line Chart
  • Radar Chart
  • Polar Area Chart

 

샘플 :

Line Chart 
chartjs02.png

Pie & Doughnut Chart

chartjs04.png

 

Chartist.js

설명 :

Chartist 또한 인기있는 Chart Javascript 라이브러리 중의 하나로 SVG를 사용하며, CSS를 통해 모양을 다듬을 수 있습니다. IE9부터 11, Firefox, Chrome, Safari, Androis, iOS 등 다양한 브라우저를 지원합니다. 

링크 :

 

 

 

차트종류 :

 

  • Bar Chart
  • Pie & Doughnut Chart
  • Scatter Plot Chart
  • Time Series Chart

 

샘플 :

chartist.png

 

Google Charts

설명 :

구글 차트는 가장 많은 종류의 다양한 차트를 지원합니다. 차트의 종류가 많기 때문에 자신이 원한는 형태의 차트를 선택하고 해당 소스를 가져와 사용하면 됩니다. 이 역시 HTML5, SVG 기반입니다.

링크 :

 

 

 

차트종류 :

 

  • Geo Chart
  • Bar Chart
  • Histogram
  • Pie Chart
  • Scatter Plot Chart
  • Time Series Chart
  • Combo Chart
  • Area Chart
  • Bubble Chart
  • Timeline
  • Gauge

 

샘플 :

google.png

 

n3-charts

링크 :

 

 

 

차트종류 :

 

  • Bar Chart
  • Line Chart

 

샘플 :

n31.png

 

 

n3.png

 

 

 

Ember Charts

링크 :

 

 

 

차트종류 :

 

  • Bar(Horizontal, Vertical) Chart
  • Pie Chart
  • Scatter Plot
  • Time Series Chart

 

샘플 :

ember.png
 

D3 Data-Driven Documents

링크 :

 

http://d3js.org/

차트종류 :

 

  • Box Plots
  • Bubble Chart
  • Bullet Chart
  • Calendar View
  • Chord Diagram
  • Dendrogram
  • Circle Packing
  • Streamgraph
  • Nodeline Tree
  • Gantt Chart
  • Tree Map ......

 

샘플 :

d3.png

HighCharts

링크 :

 

 

 

차트종류 :

 

  • Bar Chart
  • Pie Chart
  • Scatter Plot
  • Time Series Chart

 

샘플 :

highchart.png
 

AMCHARTS

링크 :

 

 

 

차트종류 :

 

  • Bar Chart
  • Pie Chart
  • Scatter Plot
  • Time Series Chart

 

샘플 :

amchart.png

 

amchart2.png

uvCharts

링크 :

 

 

 

차트종류 :

 

  • Bar Chart
  • Area Chart
  • Pie & Donut Chart
  • Staked Bar Chart
  • Line Chart

 

샘플 :

uvCharts.png

 

Profile
8
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

Profile
에디터
번호 제목 글쓴이 날짜 조회 수
공지 [팁] 자바스크립트 관련 유용한 링크 모음집 (러닝은빛) profile 이온디 2015.08.27 402
공지 자바스크립트 추천 사이트 1 profile 이온디 2015.08.06 318
54 [고급팁] Asynch JS: The Power Of $.Deferred profile 이온디 2016.06.10 33
53 [고급팁] 비동기 프로그래밍을 위한 Promise와 Deferred 알아보기 (고재도) profile 이온디 2016.06.10 74
[차트] 대시보드를 위한 오픈소스(Open Source) 차트(Chart) 라이브러리 profile 이온디 2016.06.02 3577
51 [차트] 접근성을 고려한 차트 라이브러리, Nwagon profile 이온디 2016.06.02 252
50 [라이브러리] 모바일 터치 제스츄어 profile 이온디 2016.02.22 40
49 [기초] 자바스크립트 페이지이동 profile 이온디 2015.08.31 378
48 [iframe] 금융투자협회 아이프레임 적용 소스 profile 이온디 2016.01.16 0
47 [iframe] iframe 높이 재설정(크롬 지원, IE 미지원) profile 이온디 2016.01.06 387
46 [차트] echarts profile 이온디 2015.12.21 356
45 [차트] amcharts profile 이온디 2015.12.18 224
44 [팁] 웹사이트 콘텐츠 복사 제한하기 profile 이온디 2015.09.15 81
43 [팁] 끊김없이 흐르는 배너(2009. 10. 12) profile 이온디 2015.09.13 204
42 [팁] 자바스크립트 성능 향상 팁 profile 이온디 2015.09.04 54
41 [form] [javascript] input reset / 자바스크립트 인풋 초기화(리셋)하는 방법 및 포커스 지정하기(ID 기준) profile 이온디 2015.08.31 7280
40 [form] [Javascript] 인풋값 체크 후 포커스 지정(name 기준) profile 이온디 2015.08.31 60
39 [라이브러리] 데이터를 처리할 때 유용한 6가지 자바스크립트 라이브러리(Sharon Machlis | Computerworld, 2013) profile 이온디 2015.08.28 76
38 [고급팁] ‘제다이급’ 자바스크립트 고수들이 전하는 6가지 개발팁 (Jonathan Freeman | InfoWorld, 2013) profile 이온디 2015.08.28 85
37 [문제] onMouseout과 setTimeout 사용법 profile 이온디 2015.08.28 90
36 [고급팁] 자바스크립트 this profile 이온디 2015.08.26 210