네이버 Billboard.js 캔들차트 DataURL

Posted on Edited on In , Word count in article: 209 Reading time ≈ 1 mins.

구글차트 캔들차트는 안이쁘다

구글 차트의 캔들스틱 은 이쁘지 않다

또한 외부 URL 을 통한 데이터 넣기가 어렵다

대안은 billboard.js 차트

구글 차트 보다는 billboard.js 캔들스틱이 이쁘다

billboard.js 차트 데이터 구조가 왜 이러니

일반적인 캔들스틱의 데이터 구조는

1
날짜, 시, 고, 저, 종

이런식으로 데이터가 들어간다.

그런데 billboard.js 차트의 캔들스틱 데이터 구조는

1
2
날짜 배열 따로
시, 고, 저, 종 배열 따로

보통 데이터를 엑셀 같은걸로 저장하고 cvs 로 변환해서 넣거나 json 으로 변환해서 넣는데

billboard.js 는 전혀 데이터 구조가 맞지 않는다.

따로 구조를 만들어서 넣어야 한다.

billboard.js 캔들스틱 예

캔들스틱의 data 를 다음과 같이 구성해서 넣어줘야 한다
조금이라도 틀리면 script error 난다

billboard_demo3.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{
  "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

연관포스트