티스토리 뷰
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
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 |