[javaScript] chart 플러그인

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/