React Adaptador de gráfico de planilha

    O componente React Planilha permite exibir gráficos no seuIgrSpreadsheet.

    React Spreadsheet Chart Adapter Example

    Chart Adapter Overview

    UsandochartAdapter isso, você pode exibir os gráficos na planilha. Os adaptadores de gráficos 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 Quadro de Atividades a uma planilha, você deve usar oaddChart método da coleção de Formas 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 React para adicionar gráficos, você precisará importar aSpreadsheetChartAdapter classe assim:

    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

    O seguinte trecho de código demonstra como adicionar gráficos à planilha visualizada atualmente noIgrSpreadsheet 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: 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