Angular 中引入 Flexmonster
Flexmonster 是一款用于可视化业务数据的 JavaScript 工具，它可以通过数据的层级进行向上和向下钻取并在各个层级上查看图表的详情，用于分析和展示海量数据，支持多种图表，且图表数据可以输出为多种格式的文件。
在 Angular 项目中引入 Flexmonster
1.安装 flexmonster
npm install -g flexmonster-cli
flexmonster add ng-flexmonster
2.在需要使用 flexmonster的模块中导入FlexmonsterPivotModule
// report.module.ts
import { FlexmonsterPivotModule } from 'ng-flexmonster';
@NgModule({
...
imports: [
FlexmonsterPivotModule
// other imports
],
...
})
- 在
src/style.scss文件中导入样式文件
@import "flexmonster/flexmonster.min.css"
4.在组件中设置图表配置项
// 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;
// 全局配置，当单元格内容为空时不显示文字
public globalConfig = {
localization: {
grid: {
blankMember: ''
}
}
};
ngOnInit(): void {
}
ngAfterViewInit() {
this.pivotComponent = this.pivot1;
}
/**
* 根据不同的环境配置不同的 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 配置结构如下图所示
reportJSON.pivot1.png
5.使用
<fm-pivot>指令渲染报表
<!-- report.component.html -->
<!-- 更多指令参数和输出属性可见源码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
