차트에 다중 선택 추가

SpreadJS는 차트에 다중 선택을 추가하는 기능을 지원하여 사용자가 선택한 기준에 따라 시각화를 동적으로 변경할 수 있게 합니다. 여러 시나리오를 비교하거나, 특정 카테고리의 성능을 추적하거나, 다양한 요소의 영향을 분석할 때, 데이터 포인트를 대화형으로 선택할 수 있는 기능은 분석의 깊이와 정밀도를 높여줍니다.

차트에서 데이터 소스의 다중 선택은 다음과 같이 작동합니다:

• 첫 번째로 선택된 범위는 기준 데이터 소스로 작동합니다.

• 사용자가 적절한 데이터 방향을 지정하지 않은 경우, 데이터 소스를 고려하여 최적의 방향을 추론합니다.

• 이름 영역(Name area), 범주 영역(Category area), 데이터 영역(Data area)은 각각의 데이터 유형을 기준으로 구분됩니다.

예: 아래 스크린샷은 Bears, Whales, Dolphins의 연간 기록 데이터를 보여줍니다. 또한, 선택된 곰과 돌고래 데이터 범위를 다중 선택 옵션을 사용하여 표시한 세로 막대형 차트를 포함합니다.

다음 코드 샘플은 다중 선택 옵션을 사용하여 곰과 돌고래의 선택된 데이터 범위를 나타냅니다.

// 차트 추가
sheet.charts.add("chart1", GC.Spread.Sheets.Charts.ChartType.columnClustered, 0, 100, 400, 300, "Sheet1!$A$1:$C$2,Sheet1!$A$3:$C$5");

또한, 데이터 소스가 차트의 구조와 일치하지 않으면 해당 데이터 소스는 제외되며, 첫 번째 데이터 소스에 숫자가 포함되지 않은 경우에는 이름 영역으로 간주됩니다.

예: 다음 스크린샷은 첫 번째 데이터 소스가 문자열로 구성되어 있습니다. 그 결과, 차트는 첫 번째 데이터 소스를 이름 영역으로 사용하고, 선택된 데이터 소스를 범주 영역 및 데이터 영역으로 사용합니다.

SpreadJS 디자이너 사용하기

SpreadJS 디자이너에서도 아래 단계에 따라 이 기능을 활성화할 수 있습니다:

1. 데이터 테이블에서 첫 번째 데이터 영역을 선택하고 Ctrl 키를 눌러 다른 필요한 데이터 소스를 선택합니다.

2. 삽입(Insert) > 차트(Charts) 탭 그룹 안에서 데이터에 사용할 차트 유형을 선택합니다.

다음 GIF는 데이터 소스의 다중 선택 옵션을 사용하여 차트를 생성하는 방법을 보여줍니다.