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

차트에서 숨겨진 행 또는 열

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);