React Trabalhando com Gráficos

    The Infragistics React Excel Engine's WorksheetChart functionality allows you to add visual charting representations of data trends across regions of cells in a worksheet. For example, if you want to see your Excel data in a region of cells visualized as a column, line, or over 70 other chart types, this feature can help you to achieve that.

    React Working with Charts Example

    [!Note] The XLSX format is required. Other formats are not supported at this time.

    Usage

    In order to add a chart to a worksheet, you must use the AddChart method of the worksheet's shapes collection. In this method, you can specify the chart type that you wish to use, the top-left cell, the bottom-right cell, and the percentages of those cells that you wish for the chart to take up.

    The AddChart method returns the worksheet chart element to be added to the worksheet. Once you have this, you can use the setSourceData method on the chart to set a cell address of the region of worksheet cells that you wish to use as a data source, as well as whether or not you want to switch the mapping of columns and rows to the X and Y axis.

    There are over 70 supported chart types, including Line, Area, IgrColumn, and Pie.

    O código a seguir demonstra como usar o recurso de gráficos do Excel. O snippet abaixo adicionará um gráfico de colunas entre a primeira célula e a 13ª célula na primeira linha da planilha. Os dados de origem são então definidos para os dados na região de A2:M6, alternando o mapeamento de colunas e linhas para os eixos X e Y do gráfico de colunas:

    var chart = ws.shapes().addChart(ChartType.ColumnClustered,
      ws.rows(0).cells(0), { x: 0, y: 0 },
      ws.rows(0).cells(12), { x: 100, y: 100 });

chart.setSourceData("A2:M6", true);

    API References