React 스프레드시트 차트 어댑터

    React Spreadsheet 컴포넌트를 사용하면 IgrSpreadsheet에 차트를 표시할 수 있습니다.

    React Spreadsheet Chart Adapter Example

    Chart Adapter Overview

    ​chartAdapter 사용하면 스프레드시트에 차트를 표시할 수 있습니다. 스프레드시트 차트 어댑터는 Infragistics.Documents.Excel.WorksheetChart 인스턴스를 기반으로 스프레드시트에 대한 차트 요소를 생성하고 초기화합니다.

    워크시트에 WorksheetChart를 추가하려면 워크시트 Shapes 컬렉션의 addChart 메서드를 사용해야 합니다. 아래에서 Excel에 차트를 추가하는 방법에 대한 자세한 내용을 확인할 수 있습니다.

    단계별 설명은 다음과 같습니다.

    1. 프로젝트에 SpreadsheetChartAdapterModule 참조를 추가하세요.
    2. SpreadsheetChartAdapter 클래스의 인스턴스를 생성하여 스프레드시트에 할당합니다.
    3. 앱을 실행하고 차트가 포함된 워크시트를 로드합니다.

    Supported Charts Types

    Spreadsheet ChartAdapters는 Line, Area, Column, Doughnut 등 35개 이상의 차트 유형을 지원합니다. 여기에서 전체 목록을 확인하세요.

    • 기둥형 차트
      • 클러스터링된 열
      • 누적 열
      • 100% 누적 열
    • 꺾은선형 차트
      • 선
      • 마커가 있는 선
      • 누적선
      • 마커가 있는 누적선
      • 100% 누적 라인
      • 마커가 있는 100% 누적선
    • 원형 차트
    • 도넛 차트
    • 막대 차트
      • 클러스터된 막대
      • 누적 막대
      • 100% 누적 막대
      • 면적 차트
      • 영역
      • 누적 영역
      • 100% 스택 영역
    • XY(분산형) 및 거품형 차트
      • 분산(마커만 사용)
      • 부드러운 선으로 분산
      • 부드러운 선과 마커로 분산형
      • 직선으로 분산
      • 직선과 마커로 분산형
      • 버블(효과 없음)
      • 버블3D효과
    • 주식 차트
      • 고-저-종가
      • 시가-고가-저-종가
      • 거래량-고-저-종가
      • 거래량-시가-고가-저가-종가
    • 레이더 차트
      • 마커가 없는 레이더
      • 마커가 있는 레이더
      • 채워진 레이더
    • 콤보 차트
      • xAxis를 공유하는 세로 막대형 및 선형 차트
      • 세로 막대형 차트, 꺾은선형 차트 및 두 번째 xAxis
      • 누적 영역 및 기둥
      • 맞춤 조합

    Dependencies

    [!Note]

    In the following code snippet, an external ExcelUtility class is used to save and load a workbook.

    차트를 추가하기 위해 React 스프레드시트 컨트롤을 설정할 때 다음과 같이 SpreadsheetChartAdapter 클래스를 가져와야 합니다.

    import { IgrExcelXlsxModule } from 'igniteui-react-excel';
import { IgrExcelCoreModule } from 'igniteui-react-excel';
import { IgrExcelModule } from 'igniteui-react-excel';

import { IgrSpreadsheetChartAdapterModule } from 'igniteui-react-spreadsheet-chart-adapter';
import { SpreadsheetChartAdapter } from 'igniteui-react-spreadsheet-chart-adapter';

import { ExcelUtility } from "ExcelUtility";

import { Worksheet } from 'igniteui-react-excel';
import { WorksheetCell } from 'igniteui-react-excel';
import { ChartType, ChartTitle, FormattedString, Workbook } from 'igniteui-react-excel';

IgrExcelCoreModule.register();
IgrExcelModule.register();
IgrExcelXlsxModule.register();
IgrSpreadsheetModule.register();
IgrSpreadsheetChartAdapterModule.register();

    Code Snippet

    다음 코드 조각은 컨트롤에서 현재 표시된 워크시트에 차트를 IgrSpreadsheet 추가하는 방법을 보여 줍니다.

    this.spreadsheet.chartAdapter = new SpreadsheetChartAdapter();

ExcelUtility.loadFromUrl(process.env.PUBLIC_URL + "/ExcelFiles/ChartData.xlsx").then((w) => {
    this.spreadsheet.workbook = w;

    const sheet: Worksheet = this.spreadsheet.workbook.worksheets(0);

    sheet.defaultColumnWidth = 500 * 20;
    sheet.rows(0).height = 150 * 20;

    const cell1: WorksheetCell = sheet.getCell("A1");
    const cell2: WorksheetCell = sheet.getCell("B1");
    const cell3: WorksheetCell = sheet.getCell("C1");
    const cell4: WorksheetCell = sheet.getCell("D1");

    const dataCellAddress = "A4:D6";

    const chart1 = sheet.shapes().addChart(ChartType.Line, cell1, { x: 0, y: 0 }, cell1, { x: 100, y: 100 });

    const title: React ChartTitle = new ChartTitle();
    title.text = new FormattedString("Line Chart");
    chart1.chartTitle = title;

    chart1.setSourceData(dataCellAddress, true);

    const chart2 = sheet.shapes().addChart(ChartType.ColumnClustered, cell2, { x: 0, y: 0 }, cell2, { x: 100, y: 100 });

    const title2: ChartTitle = new ChartTitle();
    title2.text = new FormattedString("Column Chart");
    chart2.chartTitle = title2;

    chart2.setSourceData(dataCellAddress, true);

    const chart3 = sheet.shapes().addChart(ChartType.Area, cell3, { x: 0, y: 0 }, cell3, { x: 100, y: 100 });

    const title3: ChartTitle = new ChartTitle();
    title3.text = new FormattedString("Area Chart");
    chart3.chartTitle = title3;

    chart3.setSourceData(dataCellAddress, true);

    const chart4 = sheet.shapes().addChart(ChartType.Pie, cell4, { x: 0, y: 0 }, cell4, { x: 100, y: 100 });

    const title4: ChartTitle = new ChartTitle();
    title4.text = new FormattedString("Pie Chart");
    chart4.chartTitle = title4;

    chart4.setSourceData(dataCellAddress, true);
});

    API References