Angular Spreadsheet Chart Adapter

    O componente Planilha Angular permite exibir gráficos em seu IgxSpreadsheetComponent.

    Angular Spreadsheet Chart Adapter Example

    Chart Adapter Overview

    Usando chartAdapter você pode exibir os gráficos na planilha. Os adaptadores de gráfico de planilha criam e inicializam elementos de gráfico para a planilha com base em uma instância Infragistics.Documents.Excel.WorksheetChart.

    Para adicionar um WorksheetChart a uma planilha, você deve usar o addChart método da coleção Shapes da planilha. Você pode encontrar mais detalhes sobre como adicionar gráficos no Excel abaixo.

    Aqui estão os passos por descrição passo :

    1. Adicionar a referência SpreadsheetChartAdapterModule ao seu projeto
    2. Criar uma instância de uma classe SpreadsheetChartAdapter atribuindo-a à planilha
    3. Execute seu aplicativo e carregue uma planilha contendo um gráfico.

    Supported Charts Types

    Existem mais de 35 tipos de gráficos suportados pelos Spreadsheet ChartAdapters, incluindo Linha, Área, Coluna e Rosca. Veja a lista completa aqui:

    • Gráficos de colunas
      • Coluna agrupada
      • Coluna empilhada
      • Coluna 100% empilhada
    • Gráficos de linhas
      • Linha
      • Linha com marcadores
      • Linha empilhada
      • Linha empilhada com marcadores
      • Linha 100% empilhada
      • Linha 100% empilhada com marcadores
    • Gráficos de pizza
    • Gráficos de rosca
    • Gráficos de barras
      • Barra agrupada
      • Barra empilhada
      • Barra 100% empilhada
      • Gráficos de área
      • Área
      • Área empilhada
      • 100% de área empilhada
    • Gráficos XY (Dispersão) e Bolhas
      • Dispersão (somente com marcador)
      • Dispersão com linhas suaves
      • Dispersão com linhas suaves e marcadores
      • Dispersão com linhas retas
      • Dispersão com linhas retas e marcadores
      • Bolha (sem efeitos)
      • Bubble3DEffect
    • Gráficos de ações
      • Alto-baixo-perto
      • Abrir-alto-baixo-fechar
      • Volume-alto-baixo-fechamento
      • Volume-abertura-alta-baixa-fechamento
    • Cartas de radar
      • Radar sem marcadores
      • Radar com marcadores
      • Radar preenchido
    • Gráficos de combinação
      • Compartilhamento de gráfico de colunas e linhas xAxis
      • Gráfico de colunas e linhas e 2º eixo x
      • Área empilhada e coluna
      • Combinação personalizada

    Dependencies

    [!Note]

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

    Ao configurar seu controle de planilha Angular para adicionar gráficos, você precisará importar a SpreadsheetChartAdapter classe da seguinte forma:

    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

    O snippet de código a seguir demonstra como adicionar gráficos à planilha exibida no momento no IgxSpreadsheetComponent controle:

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

    API References