Angular trabajando con minigráficos
La biblioteca Angular Excel Infragistics permite agregar minigráficos a una hoja de cálculo de Excel. Estos se pueden usar para mostrar representaciones visuales simples de tendencias de datos en una región de celdas de datos en su hoja de cálculo. Por ejemplo, si desea ver sus datos de Excel en una región de celdas en particular visualizados como un simple minigráfico de columnas o líneas, esta función puede ayudarlo a lograrlo.
Ejemplo de trabajo con minigráficos Angular
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);
}
});
}
}
tsimport { 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 { IgxButtonModule, IgxGridModule } from "igniteui-angular";
import { IgxSparklineModule } from "igniteui-angular-charts";
import { IgxExcelModule } from "igniteui-angular-excel";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxButtonModule,
IgxGridModule,
IgxSparklineModule,
IgxExcelModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { ChangeDetectionStrategy, Component, OnInit, ViewChild } from "@angular/core";
import { IgxGridComponent } from "igniteui-angular";
import { WorkbookFormat } from "igniteui-angular-excel";
import { SparklineType } from "igniteui-angular-excel";
import { Workbook } 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 OnInit {
@ViewChild("grid", { read: IgxGridComponent, static: true })
public grid: IgxGridComponent;
public data: any[];
constructor() {
}
public exportGrid() {
const headers = ["Orders", "Company Name", "Contact Name", "Contact Title", "Country"];
const keys = ["Orders", "CompanyName", "ContactName", "ContactTitle", "Country"];
const orderHeaders = ["Customer ID", "Order ID", "Freight"];
const wb = new Workbook(WorkbookFormat.Excel2007);
const exportSheet = wb.worksheets().add("Sheet1");
const ordersSheet = wb.worksheets().add("Orders");
exportSheet.defaultColumnWidth = 300 * 20;
exportSheet.defaultRowHeight = 50 * 20;
for (let i = 0; i < headers.length; i++) {
exportSheet.rows(0).cells(i).value = headers[i];
}
for (let i = 0; i < this.data.length; i++) {
const item = this.data[i];
const orders = item.Orders;
for (let j = 0; j < orders.length; j++) {
ordersSheet.rows(i).cells(j).value = orders[j].Freight;
}
}
for (let i = 0; i < this.data.length; i++) {
const index = (i + 1).toString();
const dataItem = this.data[i];
for (let j = 0; j < headers.length; j++) {
if (j === 0) {
exportSheet.sparklineGroups().add(SparklineType.Column,
"A" + (i + 2).toString(), "Orders!A" + index + ":F" + index);
} else {
exportSheet.rows(i + 1).cells(j).value = dataItem[keys[j]];
}
}
}
ExcelUtility.save(wb, "myWorksheet");
}
public ngOnInit(): void {
const companies = ["Amazon", "Ford", "Jaguar", "Tesla", "IBM", "Microsoft" ];
const firstNames = ["Andrew", "Mike", "Martin", "Ann", "Victoria", "John", "Brian", "Jason", "David" ];
const lastNames = ["Smith", "Jordan", "Johnson", "Anderson", "Louis", "Phillips", "Williams", "Novak" ];
const cities = ["London", "Paris", "Boston", "Berlin" ];
const countries = ["UK", "France", "USA", "Germany" ];
const titles = ["Sales Rep.", "Owner", "Administrator", "Manager" ];
const streets = ["Main St", "Madison St", "Broad Way" ];
const shippings = ["Federal Ex", "UPS Air", "UPS Ground" ];
const data = new Array<any>();
// generating excel data source
for (let i = 0; i < 10; i++) {
const companyName = this.getItem(companies);
const contactTitle = this.getItem(titles);
const country = this.getItem(countries);
const city = this.getItem(cities);
const shipping = this.getItem(shippings);
const contactName = this.getItem(firstNames) + " " + this.getItem(lastNames);
const employeeName = this.getItem(firstNames) + " " + this.getItem(lastNames);
const address = this.getRandom(10, 60) + " " + this.getItem(streets);
const postalCode = this.getRandom(100, 400) + " " + this.getRandom(50, 90);
const customerID = "CID-" + this.getRandom(500, 900);
const phone = this.getRandom(500, 900) + "-" + this.getRandom(200, 900) + "-" + this.getRandom(2000, 9000);
const fax = this.getRandom(500, 900) + "-" + this.getRandom(200, 900) + "-" + this.getRandom(2000, 9000);
const companyOrders = new Array<any>();
for (let o = 0; o < 6; o++) {
const reqDate = "2020-06-" + this.getRandom(1, 25) + "T" + this.getRandom(10, 12) + ":00:00";
const shipDate = "2020-06-" + this.getRandom(1, 25) + "T" + this.getRandom(10, 12) + ":00:00";
const orderDate = "2020-05-" + this.getRandom(1, 25) + "T" + this.getRandom(10, 12) + ":00:00";
const order = {
ContactName: contactName,
CustomerID: customerID,
EmployeeID: this.getRandom(1000, 8000),
EmployeeName: employeeName,
Freight: this.getRandom(1, 10),
OrderDate: orderDate,
OrderID: this.getRandom(3000, 5000),
RequiredDate: reqDate,
ShipAddress: address,
ShipCity: city,
ShipCountry: country,
ShipName: companyName,
ShipPostalCode: postalCode,
ShipRegion: null,
ShipVia: this.getRandom(1, 10),
ShippedDate: shipDate,
ShipperID: this.getRandom(1, 10),
ShipperName: shipping,
TotalItems: this.getRandom(10, 20),
TotalPrice: this.getRandom(400, 600)
};
companyOrders.push(order);
}
const dataItem = {
Address: address,
City: city,
CompanyName: companyName,
ContactName: contactName,
ContactTitle: contactTitle,
Country: country,
Fax: fax,
ID: customerID,
Orders: companyOrders,
Phone: phone,
PostalCode: postalCode,
Region: null
};
data.push(dataItem);
}
this.data = data;
}
public getRandom(min: number, max: number): number {
return Math.floor(Math.random() * (max - min + 1) + min);
}
public getItem(array: string[]): string {
const i = this.getRandom(0, array.length - 1);
return array[i];
}
}
ts<div class="container">
<div class="options">
<button (click)="exportGrid()">Export to Excel</button>
</div>
<igx-grid #grid [data]="data" [autoGenerate]="false" height="500px" width="100%">
<igx-column field="Orders" header="Order History" resizable=true>
<ng-template igxCell let-cell="cell" let-val>
<igx-sparkline height="100%" width="100%" minimum=0 displayType="column" [dataSource]="val" valueMemberPath="Freight">
</igx-sparkline>
</ng-template>
</igx-column>
<igx-column field="CompanyName" header="Company Name"></igx-column>
<igx-column field="ContactName" header="Contact Name"></igx-column>
<igx-column field="ContactTitle" header="Contact Title"></igx-column>
<igx-column field="Country" header="Country"></igx-column>
</igx-grid>
</div>
html.container {
display: flex;
flex-flow: column;
height: 100%;
min-width: 300px;
}
.options {
margin-top: 5px;
margin-bottom: 5px;
margin-right: 10px;
margin-left: 10px;
}
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.
Minigráficos admitidos
La siguiente es una lista de los tipos de minigráficos predefinidos admitidos.
- Línea
- Columna
- Apilado (ganado/perdido)
El siguiente código demuestra cómo agregar minigráficos a una hoja de trabajo mediante programación a través de la colección sparklineGroups:
var workbook: Workbook;
var sheet1 = workbook.worksheets().add("Sparklines");
var sheet2 = workbook.worksheets().add("Data");
sheet1.sparklineGroups().add(SparklineType.Line, "Sparklines!A1:A1", "Data!A2:A11");
sheet1.sparklineGroups().add(SparklineType.Column, "Sparklines!B1:B1", "Data!A2:A11");
workbook.save(workbook, "Sparklines.xlsx");
ts