Angular 中引入 Flexmonster
Flexmonster 是一款用于可視化業(yè)務(wù)數(shù)據(jù)的 JavaScript 工具，它可以通過數(shù)據(jù)的層級進行向上和向下鉆取并在各個層級上查看圖表的詳情难衰，用于分析和展示海量數(shù)據(jù)钦无，支持多種圖表，且圖表數(shù)據(jù)可以輸出為多種格式的文件盖袭。
在 Angular 項目中引入 Flexmonster
1.安裝 flexmonster
npm install -g flexmonster-cli
flexmonster add ng-flexmonster
2.在需要使用 flexmonster的模塊中導(dǎo)入FlexmonsterPivotModule
// report.module.ts
import { FlexmonsterPivotModule } from 'ng-flexmonster';
@NgModule({
...
imports: [
FlexmonsterPivotModule
// other imports
],
...
})
- 在
src/style.scss文件中導(dǎo)入樣式文件
@import "flexmonster/flexmonster.min.css"
4.在組件中設(shè)置圖表配置項
// report.component.ts
import { Component, OnInit, AfterViewInit, ViewChild, isDevMode } from '@angular/core';
import { FlexmonsterPivot } from 'ng-flexmonster';
@Component({
selector: 'app-report',
templateUrl: './report.component.html',
styleUrls: ['./report.component.scss'],
})
export class ReportComponent implements OnInit, AfterViewInit {
@ViewChild('pivot1') pivot1: FlexmonsterPivot;
public pivotComponent: FlexmonsterPivot;
// 全局配置失暂，當(dāng)單元格內(nèi)容為空時不顯示文字
public globalConfig = {
localization: {
grid: {
blankMember: ''
}
}
};
ngOnInit(): void {
}
ngAfterViewInit() {
this.pivotComponent = this.pivot1;
}
/**
* 根據(jù)不同的環(huán)境配置不同的 license key
*/
public getLicenseKey(): string {
if (!isDevMode()) {
const licenseKeys = {
'www.aaa.com': 'Z8CA-XHC11S-****'，
'www.bbb.com': 'Z7CA-XHC12S-****'
};
const hostname = window.location.hostname;
return licenseKeys[hostname];
} else {
const defaultKey = 'Z7CA-DEFAULT-****';
return defaultKey ;
}
}
/**
* 自定義單元格樣式鳄虱，符合條件的文字顯示紅色
*/
public customizeCellFunction(cell, data) {
if (data.type === 'value') {
if (data?.hierarchy?.uniqueName === 'Warn' && data?.label === 'WARN') {
cell.addClass('warn');
} else {
return;
}
}
}
/**
* 自定義右鍵菜單
*/
public onPivotReady() {
this.pivotComponent.flexmonster.customizeContextMenu((items, data, viewType) => {
// 禁用 chart 圖表中的右鍵菜單
if (viewType === 'charts' || viewType === 'drillthrough' || isNaN(data.value)) {
return [];
} else {
// 自定義右鍵菜單
items = items.map(item => {
if (item.id === 'drillthrough') {
item.label = 'Drill through sensitivity details';
}
return item;
});
items.unshift({
id: 'drill_through_capitial_details',
label: 'Drill through capital details',
handler: () => {
// 打開一個新的 pivot table
this.openPivot2(data);
}
});
return items;
}
});
}
}
json 配置結(jié)構(gòu)如下圖所示
reportJSON.pivot1.png
5.使用
<fm-pivot>指令渲染報表
<!-- report.component.html -->
<!-- 更多指令參數(shù)和輸出屬性可見源碼node_modules/ng-flexmonster/flexmonster.component.d.ts -->
<fm-pivot #pivot1 class="pivot" [height]="600"
[licenseKey]="getLicenseKey()"
[report]="reportJSON.pivot1"
[toolbar]="true"
[customizeCell]="customizeCellFunction"
[global]="globalConfig"
(reportcomplete)="onPivotReady()">
</fm-pivot>
部分圖表效果圖
圖片.png
