이번 프로젝트에도 실시간 데이터를 chart로 보여줘야 한다.
기존에 사용하던 plotly.js를 사용하려 했지만, 프로젝트 디자인과 가장 비슷한
UI가 APEX CHART였다.
이전에, 환경을 주제로한 충북대학교 컨퍼런스에 참여한 적이 있었었다.
각 회사마다 공기질이나 환경 데이터를 chart로 보여주기에
어떤 라이브러리를 사용했는지 물어보았더니
APEX CHART를 사용했다고 한다.
나는 chart 라이브러리는 APEX CHART와 Plotly.js를 사용했는데,
그 두 개를 비교해보았다.
1 ) DOCS는 APEX CHART > Plotly.js
개인적인 생각이지만,
Docs는 APEX CHART가 Plotly.js 가 좀 더 세세하게 설명되어 있다.
Plotly는 chart 코드와 해당 UI만 떡하니 있는 반면,
APEX CHART는 차트에 대한 설명이 자세히 나와있고 어떤 객체에 어떤 문자열을 입력
하면 어떻게 변하는지 세세하게 나와있다.
2 ) Gradient 기능 APEX CHART > Plotly.js
APEX CHART가 Plotly보다 Gradient 기능이 더 세세하게 다룰 수 있다.
Plotly.js가 Gradient가 없는 것은 아니지만
영역별로 투명도를 줄 수는 없다.
예를 들어 line chart의 영역 별로 어떤 부분은 gradient를 연하게 어떤 부분은 진하게 줄 수 없다는 것이다.
3 ) 코드로 구현 APEX CHART == Plotly.js
코드로 구현하는 방법은 APEX CHART나 Plotly.js나 유사하다.
크게, [ 데이터 ] 받아오는 부분과 [ UI를 커스텀 ] 하는 부분이 있다.
특히 UI 커스텀 하는 부분에는 chart 종류와 선 또는 막대 style를 정해주는 방법 등
방식이 유사하여
어려움이 없었다.
4 ) APEX CHART type=‘line’에 solid와 gradient를 따로 주는 방법
프로젝트 디자인 상 같은 line chart이지만 하나는 solid(곡선)만 보여줘야 했고
하나는 gradient(그라데이션) 효과를 보여줘야 했다.
그럴 때는 다음과 같이 코드를 작성하면 된다.
options: {
chart: {
id: 'area-1',
group: 'social',
type: 'area',
zoom: {
enabled: true, // 차트 줌 기능 활성화
type: 'xy', // 줌 타입
autoScaleYaxis: true, // Y축 자동 스케일링 여부
},
},
stroke: {
width: [2, 2],
curve: 'smooth',
},
fill: {
type: ['gradient', 'solid'], // 'solid'로 설정하면 영역이 채워지지 않습니다.
gradient: {
shade: 'light',
type: 'vertical',
shadeIntensity: 0.7,
inverseColors: false,
opacityFrom: 0.8,
opacityTo: 0.4,
stops: [0, 65, 100],
},
},
Options는 UI를 커스텀 하는 객체 문장이다.
Fill :{
type : [‘gradient’, ‘solid’]
}가 바로 한 쪽은 그라데이션, 한쪽은 곡선만 주는
명령어다.
간단히 배열로 처리할 수 있는 부분이었다.
그 뿐만 아니라,
stroke :{
width: [2 , 2]
curve : ‘smooth’
}문장 또한 곡선과 그라데이션 둘 다 2px로 크기로 값을 주는 것이다.
