이 게시물은 무료로 사용할 수 있는 오픈 소스 차트 라이브러리(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