Highcharts
2009년에 처음 출시, 순수 JavaScript로 작성된 chart 작성을 위한 Software library
차트를 그리기 위하여 라이브러리들을 찾아보던 중, 다양한 차트를 제공하고 비상업용으로 사용의 경우(2022-08-01 기준) 자유롭게 사용할 수 있는 라이브러리 Highcharts 가 적합하다고 생각되어서 Highcharts 사이트 내 Demo 코드를 참고하여 vue 코드 내에서 한번 테스트를 진행해 보았다.
지원하는 많은 차트 중 Column with rotated lables, With data labels 2가지에 대하여 테스트를 진행해 보았다.
Column with rotated lables (회전된 레이블이 있는 열 차트)
1. 아래 사이트에서 [EDIT IN JSFIDDLE] 버튼을 클릭해 js 예제코드를 확인한다.
https://www.highcharts.com/demo/column-rotated-labels
Column with rotated labels | Highcharts.com
Default Brand Light Brand Dark Dark Unica Sand Signika Grid Light Column with rotated labels Chart showing use of rotated axis labels and data labels. This can be a way to include more labels in the chart, but note that more labels can sometimes make chart
www.highcharts.com
2. jsfiddle 에 접속하면 HTML 코드, CSS 코드, JavaScript 코드 세 가지로 분리하여 예제코드를 보여주는데,
각각 사용하고자 하는 환경에 맞게 적용한다.
적용 코드 확인: https://github.com/YuAram/blog-workspace/blob/main/js-test/column-with-rotated-lables-test.html
GitHub - YuAram/blog-workspace: 블로그(https://runaramrun.tistory.com) workspace
블로그(https://runaramrun.tistory.com) workspace. Contribute to YuAram/blog-workspace development by creating an account on GitHub.
github.com
With data labels (데이터 레이블을 포함한 차트)
1. 아래 사이트에서 [EDIT IN JSFIDDLE] 버튼을 클릭해 js 예제코드를 확인한다.
https://www.highcharts.com/demo/line-labels
With data labels | Highcharts.com
Default Brand Light Brand Dark Dark Unica Sand Signika Grid Light This chart shows how data labels can be added to the data series. This can increase readability and comprehension for small datasets.
www.highcharts.com
2. jsfiddle 에 접속하면 HTML 코드, CSS 코드, JavaScript 코드 세 가지로 분리하여 예제코드를 보여주는데,
각각 사용하고자 하는 환경에 맞게 적용한다.
적용 코드 확인: https://github.com/YuAram/blog-workspace/blob/main/js-test/%08with-data-labels-test.html
참고 사이트 🥺
위키백과 - Highcharts: https://en.wikipedia.org/wiki/Highcharts
Highcharts - Wikipedia
JavaScript software library for charts Highcharts is a software library for charting written in pure JavaScript, first released in 2009. The license is proprietary. It is free for personal/non-commercial uses and paid for commercial applications. It was cr
en.wikipedia.org
Highcharts : https://www.highcharts.com/demo
Highcharts | Highcharts.com
www.highcharts.com