React Adaptador de gráfico de hoja de cálculo

    The React Spreadsheet component allows displaying charts in your IgrSpreadsheet.

    React Spreadsheet Chart Adapter Example

    Chart Adapter Overview

    Using chartAdapter you can display the charts in the spreadsheet. The spreadsheet chart adapters creates and initializes chart elements for the spreadsheet based on a Infragistics.Documents.Excel.WorksheetChart instance.

    In order to add a WorksheetChart to a worksheet, you must use the addChart method of the worksheet’s Shapes collection.You can find more detail of adding charts in Excel below.

    Aquí está la descripción paso a paso:

    1. Agregue la referencia SpreadsheetChartAdapterModule a su proyecto
    2. Cree una instancia de una clase SpreadsheetChartAdapter asignándola a la hoja de cálculo
    3. Ejecute su aplicación y cargue una hoja de trabajo que contenga un gráfico.

    Supported Charts Types

    Hay más de 35 tipos de gráficos admitidos por los ChartAdapters de hoja de cálculo, incluidos Línea, Área, Columna y Anillo. Vea la lista completa aquí:

    • Gráficos de columnas
      • Columna agrupada
      • columna apilada
      • Columna 100% apilada
    • Gráficos de líneas
      • Línea
      • Línea con marcadores
      • línea apilada
      • Línea apilada con marcadores
      • Línea 100% apilada
      • Línea 100% apilada con marcadores.
    • Gráficos circulares
    • Gráficos de anillos
    • Gráfica de barras
      • barra agrupada
      • barra apilada
      • barra 100% apilada
      • Gráficos de área
      • Área
      • Área apilada
      • Área 100% apilada
    • Gráficos XY (dispersión) y de burbujas
      • Dispersión (solo con marcador)
      • Dispersar con líneas suaves
      • Dispersión con líneas suaves y marcadores.
      • Dispersión con líneas rectas
      • Dispersión con líneas rectas y marcadores.
      • Burbuja (sin efectos)
      • Efecto Burbuja3DE
    • Gráficos de acciones
      • Cierre alto-bajo
      • Abrir-alto-bajo-cerrar
      • Volumen-alto-bajo-cierre
      • Volumen-apertura-alto-bajo-cierre
    • Gráficos de radar
      • Radar sin marcadores
      • Radar con marcadores
      • Radar lleno
    • Gráficos combinados
      • Gráfico de columnas y líneas que comparten xAxis
      • Gráfico de columnas y líneas y segundo eje x
      • Área y columna apiladas
      • Combinación personalizada

    Dependencies

    [!Note]

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

    When setting up your React spreadsheet control to add charts, you will need to import the SpreadsheetChartAdapter class like so:

    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

    The following code snippet demonstrates how to add charts to the currently viewed worksheet in the IgrSpreadsheet control:

    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