[devExtreme chart] binding dataSource 정의 방식

devExtreme 프레임워크의 chart를 사용하기 위해서 객체배열을 만들어 주어야 했는데,

 

처음에는

 

public arr = [{	A: 1, B: 2, C: 3, }, { A: 1, B: 2, C: 3 }];

이런식으로 구조를 먼저 정해놓고, 정의 해 놓은다음에

arr[0]["A"] = 2
arr[0]["B"] = 6

변경이 필요한 데이터를 이런식으로 바꾸어주었었다.

하지만 이러한 구조는 차트에 데이터가 온전히 바인딩 되지 않아서, 에러가 발생했다.

 

 

 

 

이후

public arr = [];

이런식으로 먼저 빈 배열을 먼저 선언해 준다음에,

let _arr = [];

let obj = {
"A" : 1,
"B" : 2,
"C" : 3,
}
let obj2 = {
"A" : 4,
"B" : 5,
"C" : 6,
}

_arr.push(obj);
_arr.push(obj2);

this.arr = _arr

이렇게 간이 배열을 만들어주고,

그 배열에 원하는 값이 담긴 객체들을 먼저 다 밀어넣어준다음에

 

실제 바인딩 된 배열(arr)에 넘겨주니,

그제서야 차트가 제대로 배열의 데이터를 표현해 주기 시작했다!

 

작은차이지만, 문제를 해결할 수 있었다.

왜 이 둘의 차이가 에러의 여부가 되는지는 좀 더 생각해보아야겠다.