티스토리 뷰

WebPublisher/JavaScript & jQuery

[javaScript] chart 플러그인

amanda 2023. 12. 27. 17:59

1. chart.js

- 구글링 결과 현재 가장 널리 쓰이는 차트 플러그인으로 보임 (레퍼런스가 많다)

- 심플한 디자인이고 기본 옵션 외에 커스텀이 어려운 편

 

https://www.chartjs.org/docs/latest/getting-started/

 

Getting Started | Chart.js

Getting Started Let's get started with Chart.js! Alternatively, see the example below or check samples. Create a Chart In this example, we create a bar chart for a single dataset and render it on an HTML page. Add this code snippet to your page: You should

www.chartjs.org

 

https://chartjs-plugin-datalabels.netlify.app/guide/formatting.html#data-transformation

 

Formatting | chartjs-plugin-datalabels

Formatting Data Transformation Data values are converted to string ('' + value). If value is an object, the following rules apply first: value = value.label if defined and not null else value = value.r if defined and not null else value = 'key[0]: value[ke

chartjs-plugin-datalabels.netlify.app

 

 

 

*참고1 (파이 그래프에 데이터값 항상 표시)

https://jsfiddle.net/kf9uLf3x/

 

Edit fiddle - JSFiddle - Code Playground

 

jsfiddle.net

*참고2 (예제)

https://eunyoe.tistory.com/60?category=767107

 

chart.js를 사용해 막대 그래프 그리는 법 (예제 多)

Chart.js로 막대 그래프 그리기 간단하게 표를 그리기 쉬운 플러그인인 chart.js의 막대 그래프(bar chart) 그리는 방법과 옵션에 대해 알려드리겠습니다. chart.js 는 간단한 차트를 그리기에는 용이하지

eunyoe.tistory.com

 

 

 

 

 

 

 

 

2. am Charts (기본 유로, 로고 삽입시 무료)

https://www.amcharts.com/demos/

 

Chart Demos - amCharts

 

www.amcharts.com

 

*참고1

https://mkil.tistory.com/438

 

amCharts 사용방법 및 사용예제 총정리(!!)

Chart 라이브러리 프로젝트에서 Amcharts라는 라이브러리로 그래프를 그려 화면을 그렸음(포틀릿, 관리화면 통계페이지 등)사용하기도 편리하고 UI 종류도 많고 뛰어나서 이렇게 정리해 놓는다 :)사

mkil.tistory.com

*참고2

https://chobopark.tistory.com/163

 

amCharts] am차트 사용 방법!! (feat.데이터연동)

안녕하세요. 오늘은 am차트에 대해 이야기해보겠습니다. am차트를 사용하여 데이터까지 연동하는 형태로 정리하려 합니다. 완성형태입니다. 꽤 깔끔한 디자인입니다. 우선 am차트 사이트로 접속

chobopark.tistory.com

 

 

 

 

 

 

 

 

 

 

3. zing chart

- 그릴 수 있는 차트 종류가 다양한 편

- 개인적으로 UI가 올드하다고 느껴진다

 

https://www.zingchart.com/gallery?type=chartType&subType=bar

 

Data Visualization Gallery | ZingChart

Would you like to show results for each option individually? Yes

www.zingchart.com

 

 

 

저작자표시

'WebPublisher > JavaScript & jQuery' 카테고리의 다른 글

[javaScript] counting flip animation  (1) 2024.01.11
[javaScript] click 요소 data value로 popup창 띄우기  (0) 2023.12.29
[javaScript] countdown event  (0) 2023.12.13
[jQuery] 세로 방향 위로 올라가는 marquee  (0) 2023.12.13
[jQuery] filter 활용한 on click 이벤트 tab menu  (0) 2023.12.06