[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

데이터 바인딩 설정

데이터 차트 패널의 데이터 바인딩 탭은 데이터 차트를 데이터 관리자 테이블이나 특정 셀에 바인딩할 수 있도록 도와주는 다양한 설정을 제공합니다. 데이터 차트에 표시되는 데이터는 이 탭을 통해 구성됩니다.

표 바인딩

데이터 관리자의 테이블에 데이터 차트를 바인딩할 때는 테이블 이름과 표시할 필드를 바인딩해야 합니다. 바인딩된 테이블을 변경하면, 데이터 차트에 이전에 바인딩된 모든 필드는 초기화되며, 사용자가 다시 필드를 바인딩해야 합니다.

데이터 원본을 추가하려면, 데이터(DATA) > 데이터 바인딩(Data Binding) 탭 그룹에서 데이터 원본(DataSource) 버튼을 사용합니다. 데이터 원본 설정에서는 테이블을 추가하고, CRUD 작업을 위한 외부 URL을 지정할 수 있습니다. 또한 열(Columns) 탭을 통해 해당 테이블의 열 정보를 가져올 수 있습니다.

image


SpreadJS 디자이너 컴포넌트에서 데이터 원본을 가져온 후, 데이터 차트 패널을 통해 해당 테이블의 데이터를 데이터 차트에 바인딩할 수 있습니다. 이를 위해 선택한 테이블(Selected Table) 드롭다운에서 원하는 테이블을 선택하면 됩니다.


image


테이블의 필드를 바인딩 영역으로 드래그 앤 드롭하여 바인딩을 완료합니다. 이때, 데이터 차트의 값(Value) 영역에는 반드시 필드를 바인딩해야 합니다. 그렇지 않으면, 데이터 차트는 바인딩된 데이터 대신 기본 데이터를 표시하게 됩니다. 또한 필드를 바인딩할 때, 현재 데이터 차트에 값(Value) 필드와 색상(Colors) 필드가 모두 존재하는 경우, 두 필드를 동시에 사용할 수 없습니다.


image


필터(Filter)를 사용하여 테이블의 필드 데이터에 대한 필터 규칙을 설정할 수 있습니다. 단, 필터는 현재 바인딩된 테이블의 필드에만 적용할 수 있다는 점에 유의하세요.


image


데이터 차트에 데이터를 바인딩한 후, 바인딩된 필드 옆에 있는 설정(Settings) 버튼을 클릭하면 추가 설정을 할 수 있습니다.


image

참고: 데이터 차트의 종류에 따라 필요한 바인딩 필드가 다릅니다. 예를 들어, 분산형(Scatter) 데이터 차트의 경우에는 X/Y 바인딩이 필수입니다.

셀 바인딩

리포트 시트에서 데이터 차트를 바인딩할 때, 바인딩 모드(Binding Mode) 드롭다운에서 셀 바인딩(Cell Binding) 옵션을 선택하여 개별 확장 가능한 셀에도 데이터를 바인딩할 수 있습니다.

그 후, 각 바인딩된 데이터 영역의 오른쪽 상단에 있는 (+) 버튼을 클릭하여 셀을 바인딩합니다. 바인딩된 각 셀에는 표시 이름(Display Name)이 있으며, 이는 바인딩된 셀의 별칭 역할을 하고 데이터 차트에도 표시됩니다.


image



참고:

  • 필드를 바인딩할 때, 현재 데이터 차트에 값(Value) 필드와 색상(Colors) 필드가 모두 있는 경우, 두 필드를 동시에 사용할 수 없습니다. 즉, 여러 개의 값 필드가 설정되어 있으면 추가로 색상 필드를 설정할 수 없으며, 반대로 여러 색상 필드가 설정되어 있으면 추가로 값 필드를 설정할 수 없습니다.

  • 리포트 시트에서 데이터 차트가 셀 참조에 바인딩된 경우, 디자인 단계에서는 SpreadJS가 제공하는 기본 데이터 바인딩만 렌더링됩니다. 실제 바인딩된 데이터를 확인하려면 리포트 시트의 미리보기(Preview) 또는 페이지 매기기(Paginate) 모드로 전환해야 합니다.