JavaScript에서 조건부 서식으로 Excel 데이터 시각화하기

숫자로 가득한 20개 열의 매출 표는 정확하지만 읽을 수가 없습니다. 43,210과 38,900을 한 행에서 비교해 부진한 분기를 찾아내기에는 눈이 너무 느리고, 보고서를 읽는 사람도 이를 알고 있기에 차트를 요청합니다. 하지만 열마다 차트를 만들면 차트가 스무 개가 되고, 워크시트는 표가 아니라 갤러리가 되어 버립니다.

데이터 막대, 색조, 아이콘 집합은 이 문제를 셀 자체 안에서 해결합니다. 막대는 값에 비례해 길어집니다. 숫자가 커질수록 색상은 옅은 색에서 진한 색으로 변합니다. 값이 임계값을 넘으면 아이콘 모양이 바뀝니다. 이들 중 어느 것도 행, 열 또는 떠 있는 개체를 추가하지 않습니다. 시각화는 이미 숫자를 담고 있는 셀 안에 자리합니다. 세 가지 모두 Excel 조건부 서식의 한 형태이며, Spire.XLS for JavaScript는 WebAssembly를 통해 브라우저에서 단일 API로 이를 적용하며, 파일은 가상 파일 시스템(VFS)을 거쳐 이동하고 백엔드가 필요하지 않습니다.

프로젝트 설정은 React 프로젝트에 Spire.XLS for JavaScript 통합하기를 참조하세요. 아래 예제는 패키지가 설치되어 있고 WebAssembly 모듈이 초기화되었다고 가정합니다.

차트를 추가하지 않는 이유

차트와 셀 내 시각화는 같은 질문에 답합니다. 즉, "이 값들은 어떻게 비교되는가?" 하지만 서로 다른 순간에 적합합니다.

레이아웃을 다시 만들지 않고 숫자 표를 훑어보기 쉽게 만드는 것이 목표라면, 셀 내 시각화가 더 가벼운 도구입니다. 아래 세 섹션에서 각 유형을 다루며, 이들은 차이점보다 공유하는 API가 더 많습니다. 이것이 가장 먼저 알아 둘 만한 점입니다.

사전 요구 사항

Spire.XLS for JavaScript가 설치되고 WebAssembly 모듈이 초기화되어 window.wasmModule.spirexls에서 접근할 수 있는 React 프로젝트가 필요합니다. 샘플은 폰트와 매출 데이터 파일을 VFS에 로드하고, 이러한 조건부 서식 유형을 지원하는 가장 이른 버전인 Excel 2010 버전 플래그로 저장합니다.

하나의 API, 세 가지 시각화

세 가지 유형 모두 동일한 호출 체인을 따릅니다. 바뀌는 줄은 FormatType 할당뿐입니다.

sheet.ConditionalFormats.Add()  →  xcfs.AddRange(range)  →  format = xcfs.AddCondition()  →  format.FormatType = ???

공유된 호출 체인 때문에 아래 세 코드 예제는 비슷해 보입니다. 이들은 서로 다른 서식 유형을 가진 동일한 작업입니다. 차이는 각 유형이 만들어 내는 결과와 언제 이를 선택하게 되는지에 있으며, 이 문서 뒷부분의 비교 표에서 다룹니다.

데이터 막대: 한눈에 보는 크기

데이터 막대는 각 셀 안에 가로 방향의 색 띠를 그리며, 띠의 길이는 선택한 범위의 나머지 값 대비 해당 셀 값에 비례합니다. 가장 큰 값은 셀을 가득 채우고, 가장 작은 값은 가느다란 조각만 채웁니다. 데이터 막대 행을 훑어보는 것은 막대 차트를 훑어보는 것과 같은 정신적 작업이며, 다만 숫자가 아래에 그대로 보입니다.

단계는 다음과 같습니다.

1. 폰트와 테스트 데이터 파일을 VFS에 로드합니다.
2. 통합 문서를 로드하고 워크시트를 가져옵니다.
3. ConditionalFormats.Add를 호출해 조건부 서식을 만들고, AddRange로 데이터 범위를 바인딩합니다.
4. AddCondition을 호출해 조건을 추가하고, FormatType을 DataBar로 설정한 뒤 막대 색상을 설정합니다.
5. 통합 문서를 저장합니다.

function App() {
  const applyDataBars = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check whether the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font and the test data file into the VFS
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'SalesData.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // Load the workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });
    const sheet = workbook.Worksheets.get(0);

    // Select the data range that receives the data bars
    const dataRange = sheet.Range.get("B2:E9");

    // Create a conditional format and bind it to that range
    const xcfs = sheet.ConditionalFormats.Add();
    xcfs.AddRange(dataRange);

    // Add a data bar condition and set the bar color
    const format = xcfs.AddCondition();
    format.FormatType = xlsModule.ConditionalFormatType.DataBar;
    format.DataBar.BarColor = xlsModule.Color.get_CadetBlue();

    // Save the workbook
    const outputFileName = "ApplyDataBars.xlsx";
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // Dispose of the workbook object to free resources
    workbook.Dispose();

    // Read the result file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Apply Data Bars</h1>
      <button onClick={applyDataBars}>Start</button>
    </div>
  );
}

export default App;

매출 수치 표에 적용된 데이터 막대, 막대 길이는 셀 값에 비례함

숫자 셀만 막대를 받으며, 범위 내의 텍스트 셀은 건너뜁니다. 이는 예상된 동작입니다. 데이터 막대는 상대적 크기를 표현하는데, 텍스트에는 표현할 크기가 없습니다. 범위는 숫자 영역으로 한정하세요. 제품명 열이나 머리글 행을 포함해도 오류는 발생하지 않지만, 해당 셀에는 아무것도 표시되지 않습니다.

색조: 차트 없는 히트맵

색조는 범위의 최솟값과 최댓값 사이에서 해당 값의 위치에 따라 각 셀에 음영을 입힙니다. 색상 인수를 지정할 필요가 없습니다. 아무것도 지정하지 않으면 최솟값에 주황색, 최댓값에 옅은 노란색을 취하고 중간 값은 비례적으로 음영 처리되는 두 색 스케일이 결과로 나옵니다. 그 효과는 데이터 표에 내장된 히트맵으로, 정렬이나 차트 없이도 뜨거운 지점과 차가운 지점이 보입니다.

단계는 데이터 막대와 동일하며, FormatType을 ColorScale로 설정하고 추가 속성이 없습니다.

1. 폰트와 테스트 데이터 파일을 VFS에 로드합니다.
2. 통합 문서를 로드하고 워크시트를 가져옵니다.
3. ConditionalFormats.Add를 호출해 조건부 서식을 만들고, AddRange로 데이터 범위를 바인딩합니다.
4. AddCondition을 호출해 조건을 추가하고, FormatType을 ColorScale로 설정합니다.
5. 통합 문서를 저장합니다.

function App() {
  const applyColorScales = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check whether the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font and the test data file into the VFS
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'SalesData.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // Load the workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });
    const sheet = workbook.Worksheets.get(0);

    // Select the data range that receives the color scales
    const dataRange = sheet.Range.get("B2:E9");

    // Create a conditional format and bind it to that range
    const xcfs = sheet.ConditionalFormats.Add();
    xcfs.AddRange(dataRange);

    // Add a color scale condition; colors transition with the values
    const format = xcfs.AddCondition();
    format.FormatType = xlsModule.ConditionalFormatType.ColorScale;

    // Save the workbook
    const outputFileName = "ApplyColorScales.xlsx";
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // Dispose of the workbook object to free resources
    workbook.Dispose();

    // Read the result file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Apply Color Scales</h1>
      <button onClick={applyColorScales}>Start</button>
    </div>
  );
}

export default App;

매출 수치 표에 적용된 색조, 주황색에서 옅은 노란색으로 이어지는 음영

데이터 막대가 막대 길이를 통해 절대적 크기를 보여 준다면, 색조는 색상을 통해 상대적 위치를 보여 줍니다. 범위가 1에서 100이든 10,000에서 50,000이든 중간 값은 중간 색조를 받습니다. 즉 음영은 절대적이 아니라 위치에 기반합니다.

아이콘 집합: 상태 구간

아이콘 집합은 값이 어느 구간에 속하는지에 따라 각 셀에 서로 다른 아이콘을 배치합니다. 예제는 세 가지 신호등을 사용합니다. 가장 낮은 3분의 1에는 빨간색, 중간에는 노란색, 가장 높은 값에는 초록색입니다. 연속적인 그라데이션을 전달하는 데이터 막대와 색조와 달리, 아이콘 집합은 이산적인 범주, 즉 "이것은 낮음", "이것은 중간", "이것은 높음"을 전달하며, 이는 측정값이라기보다 상태 표시에 가깝습니다.

단계는 FormatType과 아이콘 스타일 선택에서만 다릅니다.

1. 폰트와 테스트 데이터 파일을 VFS에 로드합니다.
2. 통합 문서를 로드하고 워크시트를 가져옵니다.
3. ConditionalFormats.Add를 호출해 조건부 서식을 만들고, AddRange로 데이터 범위를 바인딩합니다.
4. AddCondition을 호출해 조건을 추가하고, FormatType을 IconSet으로 설정한 뒤 아이콘 집합 유형을 지정합니다.
5. 통합 문서를 저장합니다.

function App() {
  const applyIconSets = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check whether the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font and the test data file into the VFS
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'SalesData.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // Load the workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });
    const sheet = workbook.Worksheets.get(0);

    // Select the data range that receives the icon sets
    const dataRange = sheet.Range.get("B2:E9");

    // Create a conditional format and bind it to that range
    const xcfs = sheet.ConditionalFormats.Add();
    xcfs.AddRange(dataRange);

    // Add an icon set condition and set the icon style to three traffic lights
    const format = xcfs.AddCondition();
    format.FormatType = xlsModule.ConditionalFormatType.IconSet;
    format.IconSet.IconSetType = xlsModule.IconSetType.ThreeTrafficLights1;

    // Save the workbook
    const outputFileName = "ApplyIconSets.xlsx";
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // Dispose of the workbook object to free resources
    workbook.Dispose();

    // Read the result file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Apply Icon Sets</h1>
      <button onClick={applyIconSets}>Start</button>
    </div>
  );
}

export default App;

매출 수치 표에 적용된 아이콘 집합, 값 구간에 따른 신호등 아이콘

아이콘 집합은 범위를 구간으로 나누므로, 같은 아이콘이 범위에 따라 서로 다른 값 범위를 담당합니다. 10에서 90 범위에서는 초록색 아이콘이 대략 60에서 90을 담당하고, 10에서 900 범위에서는 대략 600에서 900을 담당합니다. 구간은 절대적이지 않고 상대적입니다. 이는 각 열이 고유한 척도를 가지는 표에 적합한 기본값이지만, 고정 임계값을 기대한다면 알아 둘 만합니다.

세 가지 중에서 선택하기

세 가지 모두 범위에 적용되고, 모두 셀 안에 존재하며, 모두 조건부 서식입니다. 선택은 읽는 사람이 숫자로 무엇을 해야 하는지에 달려 있습니다.

세 가지는 상호 배타적이지 않습니다. 각 ConditionalFormats.Add 호출은 자체 범위에 바인딩된 독립적인 서식을 만들기 때문에, 한 번의 저장으로 매출 열에는 데이터 막대를, 성장률 열에는 아이콘 집합을 적용할 수 있습니다.

데이터 막대 모양 사용자 지정

데이터 막대의 채우기 색상은 DataBar.BarColor에서 옵니다. BarColor 없이 FormatType만 설정하면 기본 파란색이 됩니다. 테두리도 사용할 수 있지만 의존성이 있습니다. 테두리 색상이 적용되려면 테두리 유형을 먼저 설정해야 합니다.

// Set the border type first so that the border color takes effect
format.DataBar.BarBorder.Type = xlsModule.DataBarBorderType.DataBarBorderSolid;
format.DataBar.BarBorder.Color = xlsModule.Color.get_Red();

// Fill color of the bar
format.DataBar.BarColor = xlsModule.Color.get_GreenYellow();

BarBorder.Type을 먼저 설정하지 않고 BarBorder.Color만 설정하면 아무 효과가 없습니다. 테두리 유형이 선언되지 않았으므로 테두리가 그려지지 않습니다. 색조와 아이콘 집합에는 이에 상응하는 모양 속성이 없습니다. 이들의 스타일은 서식 유형에 의해 결정되며, 아이콘 집합의 경우 IconSetType 열거형에 의해 결정됩니다.

일반적인 문제

대상 범위의 텍스트 셀에 데이터 막대가 표시되지 않습니다. 이는 예상된 동작입니다. 데이터 막대는 상대적 크기를 표현하며, 숫자 셀만 크기를 가집니다. 텍스트 셀은 오류도, 막대도 없이 조용히 건너뜁니다. 범위를 숫자 영역으로 제한하세요.

데이터 막대가 모두 기본 파란색입니다. FormatType을 할당한 뒤 DataBar.BarColor를 설정하지 않았습니다. 채우기를 변경하려면 임의의 xlsModule.Color 값으로 설정하세요.

데이터 막대 테두리 색상이 표시되지 않습니다. 테두리 유형을 먼저 설정하지 않았습니다. DataBar.BarBorder.Color보다 DataBar.BarBorder.Type을 먼저 할당하세요. 실선 테두리 유형이 선언되어야 색상이 적용됩니다.

조건부 서식을 적용한 후에도 눈에 띄는 변화가 없습니다. AddRange에 전달한 범위가 실제 데이터가 있는 위치와 일치하는지 확인하세요. 빈 셀을 가리키는 범위는 오류도, 눈에 보이는 결과도 만들어 내지 않습니다.

자주 묻는 질문

같은 범위에 조건부 서식을 두 개 이상 적용할 수 있나요?

예. ConditionalFormats.Add를 호출할 때마다 독립적인 서식이 만들어집니다. 두 서식이 같은 범위를 대상으로 할 수 있지만, 같은 셀에 데이터 막대와 색조를 겹쳐 놓으면 시각적 결과가 혼란스러울 수 있으므로 일반적으로는 서로 다른 유형을 서로 다른 범위에 적용하는 편이 더 명확합니다.

이러한 조건부 서식 유형을 지원하는 Excel 버전은 무엇인가요?

데이터 막대, 색조, 아이콘 집합은 Excel 2007에서 도입되었습니다. 샘플은 Excel 2010 및 이후 버전과의 호환성을 보장하기 위해 ExcelVersion.Version2010으로 저장합니다.

조건부 서식을 적용하려면 Excel이 설치되어 있어야 하나요?

아니요. 스프레드시트 엔진은 패키지에 포함되어 브라우저에서 WebAssembly로 실행됩니다. 조건부 서식은 .xlsx 파일 내부에 표준 XML로 기록되며, Excel은 파일을 열 때 이를 렌더링합니다.

아이콘 집합에 사용자 지정 임계값을 설정할 수 있나요?

IconSetType 열거형은 미리 정의된 구간 경계를 가진 미리 정의된 아이콘 스타일을 선택합니다. 예제는 범위를 세 개의 동일한 구간으로 나누는 ThreeTrafficLights1을 사용합니다.

Excel에서 파일을 열고 다시 저장해도 조건부 서식이 유지되나요?

예. 조건부 서식은 렌더링 결과물이 아니라 워크시트에 저장된 서식 규칙의 일부입니다. Excel은 동일한 규칙을 읽고, 보존하며, 다시 계산할 때 다시 적용합니다.

함께 보기

• React 프로젝트에 Spire.XLS for JavaScript 통합하기
• Spire.XLS for JavaScript 제품 페이지