[차트] 대시보드를 위한 오픈소스(Open Source) 차트(Chart) 라이브러리
2016.06.02 03:16
6121
1
https://eond.com/376304
object(HotopayModel)#1105 (23) { ["error"]=> int(0) ["message"]=> string(7) "success" ["variables"]=> array(0) { } ["httpStatusCode"]=> int(200) ["module"]=> string(7) "hotopay" ["module_info"]=> NULL ["origin_module_info"]=> NULL ["module_config"]=> NULL ["module_path"]=> string(52) "/home/eond/web/eond.com/public_html/modules/hotopay/" ["xml_info"]=> NULL ["module_srl"]=> NULL ["mid"]=> NULL ["act"]=> NULL ["template_path"]=> NULL ["template_file"]=> NULL ["layout_path"]=> NULL ["layout_file"]=> NULL ["edited_layout_file"]=> NULL ["stop_proc"]=> bool(false) ["user"]=> object(Rhymix\Framework\Helpers\SessionHelper)#1104 (20) { ["member_srl"]=> int(0) ["user_id"]=> NULL ["user_name"]=> NULL ["nick_name"]=> NULL ["email_address"]=> NULL ["phone_number"]=> NULL ["homepage"]=> NULL ["blog"]=> NULL ["birthday"]=> NULL ["denied"]=> NULL ["status"]=> NULL ["is_admin"]=> string(1) "N" ["is_site_admin"]=> NULL ["profile_image"]=> NULL ["image_name"]=> NULL ["image_mark"]=> NULL ["signature"]=> NULL ["description"]=> NULL ["group_list"]=> array(0) { } ["menu_list"]=> array(0) { } } ["request"]=> object(Rhymix\Framework\Request)#10 (13) { ["method"]=> string(3) "GET" ["compat_method"]=> string(3) "GET" ["url"]=> string(32) "javascript/376304/comment/465326" ["hostname"]=> string(8) "eond.com" ["domain"]=> NULL ["protocol"]=> string(5) "https" ["callback_function"]=> string(0) "" ["_route_status":protected]=> int(200) ["_route_options":protected]=> object(stdClass)#11 (5) { ["cache_control"]=> bool(true) ["check_csrf"]=> bool(true) ["is_forwarded"]=> bool(false) ["is_indexable"]=> bool(true) ["enable_session"]=> bool(true) } ["module"]=> string(5) "board" ["mid"]=> string(10) "javascript" ["act"]=> string(16) "dispBoardContent" ["args"]=> array(4) { ["document_srl"]=> string(6) "376304" ["comment_srl"]=> string(6) "465326" ["mid"]=> string(10) "javascript" ["act"]=> string(16) "dispBoardContent" } } ["ajaxRequestMethod"]=> array(2) { [0]=> string(6) "XMLRPC" [1]=> string(4) "JSON" } ["gzhandler_enable"]=> bool(true) }

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

 

라이믹스는 이온디와 함께

닫기

마이페이지

로그인을 해주세요

네이버로 로그인