테이블 참조 수식을 사용하여 차트 추가

SpreadJS는 테이블에서 구조화된 참조 수식을 지원합니다. SpreadJS의 차트가 전체 테이블 또는 테이블의 특정 열에 테이블 구조 참조를 사용하여 바인딩되어 있는 경우, 테이블에 대한 업데이트는 런타임 시 차트의 시리즈나 데이터 값을 자동으로 업데이트합니다.

차트를 만들기 위해 사용할 수 있는 구조화된 테이블 참조 전략은 세 가지가 있으며, 아래 섹션에서 각각의 전략에 대해 설명합니다.

• 차트의 데이터 소스가 전체 테이블 범위인 경우

  차트를 전체 테이블 범위를 사용하여 생성한 경우, 테이블의 범위가 조정되거나 행 및 열이 추가, 삭제되거나 자동 확장(auto-expanded) 동작이 영향을 받으면 차트의 시리즈도 동시에 업데이트됩니다. 다음 GIF는 이를 보여줍니다.

  
  

  
  

  
  

  다음 코드 샘플은 구조화된 참조를 사용하여 전체 테이블을 데이터 소스로 설정하는 방법을 보여줍니다:

  // 전체 테이블 범위를 데이터 범위로 차트 추가
  var chart1 = sheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 150, 400, 200, "Table1[[#Headers],[#Data]]");

• 차트의 데이터 소스가 테이블의 특정 열인 경우

  테이블 작업이 차트에 바인딩된 특정 열의 데이터를 변경할 경우, 차트는 새로운 데이터에 따라 업데이트되지만, 시리즈는 변경되지 않습니다. 다음 GIF는 이를 보여줍니다.

  
  

  
  

  
  

  다음 코드 샘플은 테이블의 특정 열을 구조화된 참조 방식으로 사용하여 차트를 생성하는 방법을 보여줍니다:

  // 테이블의 특정 열 범위를 차트 범위로 설정
  var chart2 = sheet.charts.add('chart2', GC.Spread.Sheets.Charts.ChartType.columnClustered, 500, 150, 400, 200, "Table1[[#Headers],[#Data],[Name]],Table1[[#Headers],[#Data],[Age]]");

• 차트의 데이터 소스가 테이블 구조 참조와 일반 범위의 조합인 경우

  차트의 데이터 소스가 테이블 구조 참조와 일반 범위의 조합으로 정의된 경우, 차트는 다음 GIF와 같이 업데이트됩니다.

  
  

  
  

  
  

  다음 코드 샘플은 테이블 구조 참조와 일반 범위를 결합하여 차트의 데이터 소스를 설정하는 방법을 보여줍니다:

  // 테이블 구조 참조와 일반 범위를 조합하여 차트 범위를 설정
  var chart3 = sheet.charts.add('chart3', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 400, 400, 200, "Table1[[#Headers],[#Data],[Id]],Sheet1!D1:D4");