Angular Trabajar con gráficos
La funcionalidad del motor de WorksheetChart
Excel Infragistics Angular le permite agregar representaciones de gráficos visuales de las tendencias de datos en las regiones de las celdas de una hoja de cálculo. Por ejemplo, si desea ver sus datos de Excel en una región de celdas visualizadas como una columna, una línea o más de 70 otros tipos de gráficos, esta función puede ayudarlo a lograrlo.
Angular Ejemplo de trabajo con gráficos
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
import { saveAs } from "file-saver" ;
import { Workbook } from "igniteui-angular-excel" ;
import { WorkbookFormat } from "igniteui-angular-excel" ;
import { WorkbookSaveOptions } from "igniteui-angular-excel" ;
export class ExcelUtility {
public static getExtension (format: WorkbookFormat ) {
switch (format) {
case WorkbookFormat.StrictOpenXml:
case WorkbookFormat.Excel2007:
return ".xlsx" ;
case WorkbookFormat.Excel2007MacroEnabled:
return ".xlsm" ;
case WorkbookFormat.Excel2007MacroEnabledTemplate:
return ".xltm" ;
case WorkbookFormat.Excel2007Template:
return ".xltx" ;
case WorkbookFormat.Excel97To2003:
return ".xls" ;
case WorkbookFormat.Excel97To2003Template:
return ".xlt" ;
}
}
public static load(file: File): Promise <Workbook> {
return new Promise <Workbook>((resolve, reject ) => {
ExcelUtility.readFileAsUint8Array(file).then((a ) => {
Workbook.load(a, null , (w ) => {
resolve(w);
}, (e ) => {
reject(e);
});
}, (e ) => {
reject(e);
});
});
}
public static loadFromUrl(url: string ): Promise <Workbook> {
return new Promise <Workbook>((resolve, reject ) => {
const req = new XMLHttpRequest();
req.open("GET" , url, true );
req.responseType = "arraybuffer" ;
req.onload = (d ) => {
const data = new Uint8Array (req.response);
Workbook.load(data, null , (w ) => {
resolve(w);
}, (e ) => {
reject(e);
});
};
req.send();
});
}
public static save(workbook: Workbook, fileNameWithoutExtension : string ): Promise <string > {
return new Promise <string >((resolve, reject ) => {
const opt = new WorkbookSaveOptions();
opt.type = "blob" ;
workbook.save(opt, (d ) => {
const fileExt = ExcelUtility.getExtension(workbook.currentFormat);
const fileName = fileNameWithoutExtension + fileExt;
saveAs(d as Blob, fileName);
resolve(fileName);
}, (e ) => {
reject(e);
});
});
}
private static readFileAsUint8Array(file: File): Promise <Uint8Array > {
return new Promise <Uint8Array >((resolve, reject ) => {
const fr = new FileReader();
fr.onerror = (e ) => {
reject(fr.error);
};
if (fr.readAsBinaryString) {
fr.onload = (e ) => {
const rs = (fr as any ).resultString;
const str: string = rs != null ? rs : fr.result;
const result = new Uint8Array (str.length);
for (let i = 0 ; i < str.length; i++) {
result[i] = str.charCodeAt(i);
}
resolve(result);
};
fr.readAsBinaryString(file);
} else {
fr.onload = (e ) => {
resolve(new Uint8Array (fr.result as ArrayBuffer ));
};
fr.readAsArrayBuffer(file);
}
});
}
}
ts コピー import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxGridModule } from "igniteui-angular" ;
import { IgxCategoryChartModule } from "igniteui-angular-charts" ;
import { IgxExcelModule } from "igniteui-angular-excel" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxGridModule,
IgxCategoryChartModule,
IgxExcelModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { AfterViewInit, ChangeDetectionStrategy, Component } from "@angular/core" ;
import { AxisType } from "igniteui-angular-excel" ;
import { ChartType } from "igniteui-angular-excel" ;
import { Workbook } from "igniteui-angular-excel" ;
import { WorkbookFormat } from "igniteui-angular-excel" ;
import { WorksheetRegion } from "igniteui-angular-excel" ;
import { ExcelUtility } from "./ExcelUtility" ;
@Component ({
standalone : false ,
changeDetection : ChangeDetectionStrategy.OnPush,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent implements AfterViewInit {
public excelData: any [];
public chartData: any [];
constructor ( ) {
this .initializeData();
}
public initializeData ( ) {
const months = ["Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec" ];
const groups = ["Heating" , "Electricity" , "Water" , "Taxes" ];
const expanseKey = "Expense" ;
const monthKey = "Month" ;
const data = new Array <any >();
for (const group of groups) {
const r = {};
r[expanseKey] = group;
let index = 0 ;
for (const month of months) {
const x = index * 15 * Math .PI / 180 ;
const rand = this .getRandom(50 , 100 );
const heat = Math .abs(Math .cos(x)) * 300 + rand;
const ac = Math .abs(Math .sin(x)) * 500 + rand;
if (group === "Heating" ) {
r[month] = Math .round(heat);
} else if (group === "Electricity" ) {
r[month] = Math .round(ac);
} else if (group === "Water" ) {
r[month] = this .getRandom(100 , 150 );
} else if (group === "Taxes" ) {
r[month] = this .getRandom(700 , 800 );
}
index = index + 1 ;
}
data.push(r);
}
this .excelData = data;
const chartData = new Array <any >();
for (const month of months) {
const r = {};
r[monthKey] = month;
for (const item of data) {
r[item[expanseKey]] = item[month];
}
chartData.push(r);
}
this .chartData = chartData;
}
public getRandom(min: number , max : number ): number {
return Math .floor(Math .random() * (max - min + 1 ) + min);
}
public exportData ( ) {
const headers = Object .keys(this .excelData[0 ]);
const wb = new Workbook(WorkbookFormat.Excel2007);
const ws = wb.worksheets().add("Sheet1" );
ws.defaultColumnWidth = 200 * 20 ;
const firstDataRow = 2 ;
const headerRow = ws.rows(firstDataRow - 1 );
for (let c = 0 ; c < headers.length; c++) {
headerRow.setCellValue(c, headers[c]);
}
for (let r = 0 ; r < this .excelData.length; r++) {
const xlRow = ws.rows(r + firstDataRow);
const dataRow = this .excelData[r];
for (let c = 0 ; c < headers.length; c++) {
xlRow.setCellValue(c, dataRow[headers[c]]);
}
}
const indexRow = firstDataRow - 1 ;
const indexData = firstDataRow + this .excelData.length - 1 ;
const indexHeader = headers.length - 1 ;
const tableRegion = new WorksheetRegion(ws, indexRow, 0 , indexData, indexHeader);
const table = ws.tables().add(tableRegion.toString(), true );
ws.rows(0 ).height = 5000 ;
const chart = ws.shapes().addChart(ChartType.ColumnClustered,
ws.rows(0 ).cells(0 ), { x : 0 , y : 0 },
ws.rows(0 ).cells(headers.length - 1 ), { x : 100 , y : 100 });
chart.setSourceData(table.wholeTableRegion.toString(), true );
chart.axisCollection(AxisType.Category).axisBetweenCategories = true ;
ExcelUtility.save(wb, "chartSample" );
}
public ngOnInit ( ) {
}
public ngAfterViewInit(): void {
}
}
ts コピー <div class ="container" >
<div class ="options" >
<button (click )="exportData()" > Export To Excel File</button >
</div >
<div class ="chart" >
<igx-category-chart #chart
height ="60%" width ="100%"
yAxisMinimumValue =0
xAxisInterval =1
chartType ="column"
brushes ="#4f81bd, #c0504d, #9bbb59, #8064a2"
outlines ="#4f81bd, #c0504d, #9bbb59, #8064a2"
thickness =0
[dataSource ]="chartData" >
</igx-category-chart >
<igx-grid [data ]="excelData" height ="40%" width ="100%" [autoGenerate ]="false" >
<igx-column [field ]="'Expense'" [resizable ]="true" width ="10%" > </igx-column >
<igx-column [field ]="'Jan'" [resizable ]="true" width ="7.5%" > </igx-column >
<igx-column [field ]="'Feb'" [resizable ]="true" width ="7.5%" > </igx-column >
<igx-column [field ]="'Mar'" [resizable ]="true" width ="7.5%" > </igx-column >
<igx-column [field ]="'Apr'" [resizable ]="true" width ="7.5%" > </igx-column >
<igx-column [field ]="'May'" [resizable ]="true" width ="7.5%" > </igx-column >
<igx-column [field ]="'Jun'" [resizable ]="true" width ="7.5%" > </igx-column >
<igx-column [field ]="'Jul'" [resizable ]="true" width ="7.5%" > </igx-column >
<igx-column [field ]="'Aug'" [resizable ]="true" width ="7.5%" > </igx-column >
<igx-column [field ]="'Sep'" [resizable ]="true" width ="7.5%" > </igx-column >
<igx-column [field ]="'Oct'" [resizable ]="true" width ="7.5%" > </igx-column >
<igx-column [field ]="'Nov'" [resizable ]="true" width ="7.5%" > </igx-column >
<igx-column [field ]="'Dec'" [resizable ]="true" width ="7.5%" > </igx-column >
</igx-grid >
</div >
</div >
html コピー .container {
display : flex;
flex-flow : column;
height : 100% ;
min-width : 300px ;
}
.chart {
flex : 1 ;
overflow : hidden;
}
scss コピー
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
Para agregar un gráfico a una hoja de trabajo, debe utilizar el método AddChart
de la colección de formas de la hoja de trabajo. En este método, puede especificar el tipo de gráfico que desea utilizar, la celda superior izquierda, la celda inferior derecha y los porcentajes de esas celdas que desea que ocupe el gráfico.
El método AddChart
devuelve el elemento del gráfico de la hoja de trabajo que se agregará a la hoja de trabajo. Una vez que tenga esto, puede usar el método setSourceData
en el gráfico para establecer una dirección de celda de la región de celdas de la hoja de cálculo que desea usar como fuente de datos, así como si desea o no cambiar la asignación de columnas y filas al eje X e Y.
Hay más de 70 tipos de gráficos compatibles, entre ellos Line
, Area
, IgxColumnComponent
, y Pie
.
El siguiente código demuestra cómo utilizar la función de gráficos de Excel. El siguiente fragmento agregará un gráfico de columnas entre la primera celda y la celda 13 en la primera fila de la hoja de trabajo. Luego, los datos de origen se configuran para los datos en la región de A2:M6, cambiando la asignación de columnas y filas para los ejes X e Y del gráfico de columnas:
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 );
ts
Referencias de API