[]
SpreadJS는 사용자가 차트에 숨겨진 행 또는 열의 데이터를 표시할지 여부를 제어할 수 있도록 지원합니다. ignoreHidden메서드를 true
로 설정하면 차트에 숨겨진 행 또는 열의 데이터가 표시되지 않습니다. 이 기능은 SpreadJS 디자이너에서도 '숨겨진 행 및 열의 데이터 표시' 체크박스를 선택하여 설정할 수 있습니다.
다음과 같은 경우 행 또는 열은 숨겨진 것으로 간주됩니다:
너비가 0으로 조정된 경우
숨김 처리된 경우
필터링되어 보이지 않는 경우
그룹화가 적용된 경우
예시 – 아래 이미지는 다양한 회사의 스마트폰 일일 판매 기록을 나타내는 차트를 보여줍니다. 스프레드시트에서 3번째 행과 C, D 열이 숨겨져 있다는 점에 주목하세요. 보이는 데이터는 Apple과 LG의 4개 날짜에 대한 것이지만, 차트는 Samsung을 포함한 6개 날짜의 데이터를 나타냅니다. 숨겨진 행과 열의 데이터를 차트에 표시하려면 ignoreHidden
메서드 값을 false
로 설정하면 아래 스크린샷과 같이 차트가 표시됩니다.
다음은 차트에서 숨겨진 행 또는 열의 데이터를 표시하는 방법을 보여주는 코드 샘플입니다.
Ask ChatGPT
// 배열 생성
var dataArray = [
["", '2019/11/1', '2019/12/1', '2019/13/1', '2019/14/1', '2019/15/1', '2019/16/1'],
["Apple", 5782, 6263, 7766, 5389, 9830, 6260],
["Samsung", 4284, 4130, 3951, 3760, 3631, 3504],
["LG", 2814, 2491, 2455, 1652, 3073, 2.834]
];
// 열 너비 설정
activeSheet.setColumnWidth(0, 90.0, GC.Spread.Sheets.SheetArea.viewport);
for (var i = 1; i < 8; i++) {
activeSheet.setColumnWidth(i, 80.0, GC.Spread.Sheets.SheetArea.viewport);
}
// 배열 설정
activeSheet.setArray(0, 0, dataArray);
// Row[1] & Column[3], Column[4] 숨기기
activeSheet.setRowVisible(2, false, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setColumnVisible(2, false, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setColumnVisible(3, false, GC.Spread.Sheets.SheetArea.viewport);
// 차트 추가
var chart = activeSheet.charts.add('LineChart', GC.Spread.Sheets.Charts.ChartType.line, 2, 85, 400, 400, 'A1:G4');
// 차트 제목 추가
chart.title({ text: "Sales Record" });
// 차트에서 숨겨진 행과 열도 표시되도록 하려면 ignoreHidden 메서드를 false로 설정합니다
chart.ignoreHidden(false);