React Adaptador de gráfico de planilha

    O componente Planilha React permite exibir gráficos em seu IgrSpreadsheet.

    React Exemplo de adaptador de gráfico de planilha

    Visão geral do adaptador de gráfico

    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.

    Tipos de gráficos suportados

    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

    Dependências

    [! Observação]

    No trecho de código a seguir, uma classe ExcelUtility externa é usada para salvar e carregar uma workbook.

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

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

    Trecho de código

    O snippet de código a seguir demonstra como adicionar gráficos à planilha exibida no momento no IgrSpreadsheet 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); });

    Referências de API