차트에서 빈 셀 표시

스프레드시트에서 데이터를 시각화할 때, 다른 데이터와 함께 빈 셀 또는 공백 셀을 차트에 표시하고 싶을 수 있습니다.

SpreadJS는 Excel과 마찬가지로 차트에서 빈 셀 및 null 값을 표시하는 기능을 제공합니다. 이 기능은 차트에 누락된 데이터를 표시하는 데 도움이 되며, 사용자가 데이터를 빠르게 식별하고 수정할 수 있도록 도와줍니다.

이 기능을 통해 사용자는 빈 셀이나 null 값을 간격(gap)으로 표시하거나, 0 값으로 표시하거나, 선으로 연결된 지점으로 표시할 수 있습니다. 기본적으로 차트가 워크시트의 빈 셀을 참조하는 경우, 빈 지점을 선으로 연결하여 누락된 데이터를 자동으로 채웁니다.

빈 셀을 간격으로 표시하기

사용자는 Chart 클래스의 displayBlanksAs 메서드를 사용하여 차트에서 빈 셀을 간격(gap)으로 표시할 수 있습니다.

예제 - 아래 이미지는 두 회사의 연간 매출을 비교하는 차트를 보여줍니다. 스프레드시트에는 D2와 D3 셀에 빈 데이터가 포함되어 있습니다. 이 빈 셀(D2 및 D3)을 차트에서 간격으로 표시하려면, displayBlanksAs 메서드의 값을 "gaps"로 설정하면 아래 스크린샷과 같이 차트가 표시됩니다.

빈 셀을 0 값으로 표시하기

사용자는 Chart 클래스의 displayBlanksAs 메서드를 사용하여 차트에서 빈 셀을 0 값으로 표시할 수 있습니다.

예제 - 아래 이미지는 두 회사의 연간 매출을 비교하는 차트를 보여줍니다. 스프레드시트에는 D2와 D3 셀에 빈 데이터가 포함되어 있습니다. 이 빈 셀(D2 및 D3)을 차트에서 0 값으로 표시하려면, displayBlanksAs 메서드의 값을 "zero"로 설정하면 아래 스크린샷과 같이 차트가 표시됩니다.

빈 지점을 선으로 연결하기

사용자는 Chart 클래스의 displayBlanksAs 메서드를 사용하여 빈 데이터를 선으로 연결된 값으로 표시할 수 있습니다.

예제 - 아래 이미지는 두 회사의 연간 매출을 비교하는 차트를 보여줍니다. 스프레드시트에는 D2와 D3 셀에 빈 데이터가 포함되어 있습니다. 이 빈 셀(D2 및 D3)을 연결된 값으로 표시하려면, displayBlanksAs 메서드의 값을 "connected"로 설정하면 아래 스크린샷과 같이 차트가 표시됩니다.

지원하는 차트 유형

모든 차트 유형에서 이 기능을 지원합니다. 그러나 차트 유형에 따라 빈 셀을 표시하는 방식에 차이가 있으며, 다음과 같습니다:

• line, lineMarkers, xyScatterLines, xyScatterLinesNoMarkers, xyScatterSmooth, xyScatterSmoothNoMarkers, radar 차트 유형: "gaps", "zero", "connected" 세 가지 옵션 모두 지원합니다.

• 콤보 차트에서 시리즈 유형 중 하나라도 위에 언급한 유형이면 세 가지 옵션 "gaps", "connected", "zero"를 모두 지원하며, 그렇지 않은 경우 "gaps"와 "zero"만 지원합니다.

• sunburst, treemap, lineMarkersStacked, lineMarkersStacked100, lineStacked, lineStacked100 차트 유형: "zero" 옵션만 지원합니다. 즉, 빈 셀을 0 값으로만 표시할 수 있습니다.

• 기타 비콤보 차트 유형: "gaps" 및 "zero"만 지원합니다.

아래는 차트에서 빈 셀을 간격으로 표시하는 방법의 코드 샘플입니다:

// 스프레드 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

// 활성 시트 가져오기
var activeSheet = spread.getActiveSheet();
activeSheet.suspendPaint();
// 차트용 데이터 준비
activeSheet.setValue(0, 1, "Y-2013");
activeSheet.setValue(0, 2, "Y-2014");
activeSheet.setValue(0, 3, "Y-2015");
activeSheet.setValue(0, 4, "Y-2016");
activeSheet.setValue(0, 5, "Y-2017");
activeSheet.setValue(0, 6, "Y-2018");
activeSheet.setValue(1, 0, "Gradlco Corp. Ltd");
activeSheet.setValue(2, 0, "Saagiate Corp. Ltd.");
activeSheet.setColumnWidth(0, 120);
var dataArray =
[
  [2331, 4663, , 5689, 6230, 6360],
  [2284, 2030, , 1560, 2324, 1304]
];
activeSheet.setArray(1, 1, dataArray);

// lineMarker 차트 추가
var chart = activeSheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.lineMarkers, 30, 85, 400, 250, 'A1:G3');

// 빈 셀을 간격으로 표시하도록 설정
chart.displayBlanksAs(GC.Spread.Sheets.Charts.DisplayBlanksAs.gaps);
// 차트 제목 설정
var title = chart.title();
title.text = "Annual Sales Record";
title.fontFamily = "Cambria";
title.fontSize = 16;
title.color = "Red";
chart.title(title);
activeSheet.resumePaint();