본문 바로가기
(멘토링 1)시각화 페이지 구축_강의/4주차:총정리, Spring을 활용한 차트 개발

[추가1] Chart Library & HighCharts

by 디벨로펀 2019. 8. 30.

4주차를 요약하며

다양한 차트 라이브러리를 소개합니다.

본인은 plotly, highcharts, d3 를 주로 사용합니다만

아래 글들만 보아도 수 많은 차트 라이브러리가 존재함을 알 수 있습니다.

 

최적의 라이브러리를 찾기위해서는 다양한 라이브러리를 알고 있어야 겠죠?

아래의 다양한 라이브러리에 대해 알아보세요~

 

https://busy.org/@wonsama/dev-2019

 

[dev] 2019년 쓸만한 차트 라이브러리 - Busy

출처 : https://www.freecodecamp.org/news/these-are-the-best-javascript-chart-libraries-for-2019-29782f5e1dc2/ TL;DR 요구사항에 가장 적합한 JS 차트 솔루션... by wonsama

busy.org

 

2주차에 d3.js를 활용한 차트예제를 그려보았다면

다른 차트를 이용해 보는 것도 좋은 방법이라고 생각합니다.

 

좀 더 나아가고 싶은 분을 위해 HIGHCHARTS 를 소개하고자 하니 추가 구현을 해보시길 바랍니다.

HIGHCHARTS는 유료이지만 테스트를 할 때 만큼은 무료로 사용할 수 있습니다.

 

1. HIGHCHARTS 사이트

 

 

2. JSFFIDLE 예제

 

LINE 차트

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-basic/

 

Highcharts Demo - JSFiddle

 

jsfiddle.net

AREA 차트

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/area-basic/

 

Highcharts Demo - JSFiddle

 

jsfiddle.net

 

BAR 차트

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-basic/

 

Highcharts Demo - JSFiddle

 

jsfiddle.net

 

PIE 차트

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/pie-basic/

 

Highcharts Demo - JSFiddle

 

jsfiddle.net

 

댓글