Angular Spreadsheet Chart Adapter

Angular 스프레드시트 구성 요소는 차트IgxSpreadsheetComponent를 표시할 수 있게 해줍니다.

Angular Spreadsheet Chart Adapter Example

Chart Adapter Overview

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

워크시트 차트를 워크시트에 추가하려면 워크시트의 도형 컬렉션 방식을 사용해야addChart 합니다. 아래에서 엑셀에서 차트를 추가하는 자세한 내용을 확인할 수 있습니다.

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

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

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.

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

import { IgxSpreadsheetChartAdapterModule } from 'igniteui-angular-spreadsheet-chart-adapter';
import { SpreadsheetChartAdapter } from 'igniteui-angular-spreadsheet-chart-adapter';

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

Code Snippet

다음 코드 스니펫은 컨트롤에서IgxSpreadsheetComponent 현재 보고 있는 워크시트에 차트를 추가하는 방법을 보여줍니다:

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: Angular 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);
});

Angular Spreadsheet Chart Adapter