반응형
구글차트 캔들차트는 안이쁘다
구글 차트의 캔들스틱 은 이쁘지 않다
또한 외부 URL 을 통한 데이터 넣기가 어렵다
대안은 billboard.js 차트
구글 차트 보다는 billboard.js 캔들스틱이 이쁘다
billboard.js 차트 데이터 구조가 왜 이러니
일반적인 캔들스틱의 데이터 구조는
날짜, 시, 고, 저, 종
이런식으로 데이터가 들어간다.
그런데 billboard.js 차트의 캔들스틱 데이터 구조는
날짜 배열 따로
시, 고, 저, 종 배열 따로
보통 데이터를 엑셀 같은걸로 저장하고 cvs 로 변환해서 넣거나 json 으로 변환해서 넣는데
billboard.js 는 전혀 데이터 구조가 맞지 않는다.
따로 구조를 만들어서 넣어야 한다.
billboard.js 캔들스틱 예
{% jsfiddle skyksit/qxgyp0vs html,js,result %}
캔들스틱의 data 를 다음과 같이 구성해서 넣어줘야 한다
조금이라도 틀리면 script error 난다
{
"x": [
"2021-02-20",
"2021-02-21",
"2021-02-22",
"2021-02-23",
"2021-02-24"
],
"data1": [
[
1300,
1369,
1200,
1339,
100
],
[
1300,
1369,
1200,
1339,
100
],
[
1300,
1369,
1200,
1339,
100
],
[
1300,
1369,
1200,
1339,
100
],
[
1300,
1369,
1200,
1339,
100
]
]
}
결론
데이터 구조는 구글차트가 낫고
디자인이나 외부 DATA를 URL 방식으로 사용할 꺼면 billboard.js 가 낫다
billboard.js 는 활용한 예제를 찾기가 어렵다. 맨땅의 헤딩 좀 많이 해야 한다.
비교 | googlecharts | billboard.js |
---|---|---|
디자인 | O | |
데이터구조 | O | |
DataURL | O | |
Sample | O |
반응형
'IT > Hexo' 카테고리의 다른 글
개발자들을 위한 블로그 플랫폼 정리 (2023/10 기준) (0) | 2023.10.26 |
---|---|
검색엔진(네이버,구글)에 검색 잘되게 하는 방법 (0) | 2022.07.04 |
네이버 Billboard.js 차트 를 사용해보자 (0) | 2022.07.04 |
Hexo 대소문자 인식 오류 문제 해결방법 (0) | 2022.07.04 |
HEXO 링크 클릭시 전체화면으로 띄우기 (0) | 2022.07.04 |
Hexo 에 나만의 스크립트(script)를 만들기 (0) | 2022.07.04 |
헥소(Hexo) 에 네이버 billboard 차트 추가 (0) | 2022.07.04 |
헥소(Hexo) 에 차트 추가 (0) | 2022.06.30 |