我遵循了以下链接中所述的ag网格文档的每一步：
https://www.ag-grid.com/angular-data-grid/sparklines-bar-customisation/
我的网格单元格定义如下：
this.immediatecolumnDefs =
[
{
field: 'ncrdetail',
headerName: 'NCR Detail',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'product',
headerName: 'Product Description',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'totalholdqty',
headerName: 'Total Hold Qty',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'holdqty',
headerName: 'Balance Qty',
hide: true,
// sortable: true,
// resizable: true,
// filter: true,
},
{
field: 'ncrdate',
headerName: 'NCR Date',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'status',
headerName: 'Status',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'sorting',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: 'orange', // sets the highlighted bar fill
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
} as BarSparklineOptions,
},
},
{
field: 'reprocess',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: '#fac858',
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
} as BarSparklineOptions,
},
},
{
field: 'concession',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: '#fac858',
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
} as BarSparklineOptions,
},
},
{
field: 'downgrade',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: '#fac858',
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
} as BarSparklineOptions,
},
},
{
field: 'dispose',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: '#fac858',
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
} as BarSparklineOptions,
},
},
{
field: 'action',
headerName: 'Action',
sortable: true,
resizable: true,
filter:
true,
cellRenderer: (): any => {
return `
<button mat-mini-fab="" color="warn" ptooltip="Action History" tooltipposition="top" class="mat-focus-indicator mat-mini-fab mat-button-base mat-primary" style="background-color: #7a1dcf;" ng-reflect-color="primary" ng-reflect-text="Action Detail" ng-reflect-tooltip-position="top"><span class="mat-button-wrapper"><i class="fa fa-list" style="color: #fff;"></i></span><span matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round" ng-reflect-disabled="false" ng-reflect-centered="false" ng-reflect-trigger="[object HTMLButtonElement]"></span><span class="mat-button-focus-overlay"></span></button>
`;
},
cellRendererParams: {
clicked(field: any): any {},
},
},
];
我传递的数据如下：
this.immediaterowData = [
{ id:0, ncrdate:'2022-02-26 18:26:00', ncrdetail:'', status:'test', product:'test', totalholdqty:5000, sorting:[0.1,0.9], reprocess:[0.5,0.5], concession:[0.4,0.6], downgrade:[0.2,0.8], dispose:[0.3,0.7]},
{ id:0, ncrdate:'2022-enter code here02-26 18:26:00', ncrdetail:'', status:'test', product:'test', totalholdqty:5000, sorting:[0.1,0.9], reprocess:[0.5,0.5], concession:[0.4,0.6], downgrade:[0.2,0.8], dispose:[0.3,0.7]},
{ id:0, ncrdate:'2022-02-26 18:26:00', ncrdetail:'', status:'test', product:'test', totalholdqty:5000, sorting:[0.1,0.9], reprocess:[0.5,0.5], concession:[0.4,0.6], downgrade:[0.2,0.8], dispose:[0.3,0.7]}
];
我想要排序、再处理、让步、降级和处置列中的条形图，但我收到的是这样的：在此处输入图像描述
根据您提供的AG-Grid文档的第一个示例，当我将您的代码用作plunker时，它就能工作。
https://plnkr.co/edit/ZV7CpSmBiYtSPmIv
你完全确定你使用的是企业版的AG网格吗？
function getData() {
return [
{ id:0, ncrdate:'2022-02-26 18:26:00', ncrdetail:'', status:'test', product:'test', totalholdqty:5000, sorting:[0.1,0.9], reprocess:[0.5,0.5], concession:[0.4,0.6], downgrade:[0.2,0.8], dispose:[0.3,0.7]},
{ id:0, ncrdate:'2022-enter code here02-26 18:26:00', ncrdetail:'', status:'test', product:'test', totalholdqty:5000, sorting:[0.1,0.9], reprocess:[0.5,0.5], concession:[0.4,0.6], downgrade:[0.2,0.8], dispose:[0.3,0.7]},
{ id:0, ncrdate:'2022-02-26 18:26:00', ncrdetail:'', status:'test', product:'test', totalholdqty:5000, sorting:[0.1,0.9], reprocess:[0.5,0.5], concession:[0.4,0.6], downgrade:[0.2,0.8], dispose:[0.3,0.7]}
];
}
const gridOptions = {
columnDefs: [
{
field: 'ncrdetail',
headerName: 'NCR Detail',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'product',
headerName: 'Product Description',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'totalholdqty',
headerName: 'Total Hold Qty',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'holdqty',
headerName: 'Balance Qty',
hide: true,
// sortable: true,
// resizable: true,
// filter: true,
},
{
field: 'ncrdate',
headerName: 'NCR Date',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'status',
headerName: 'Status',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'sorting',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: 'orange', // sets the highlighted bar fill
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
},
},
},
{
field: 'reprocess',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: '#fac858',
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
},
},
},
{
field: 'concession',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: '#fac858',
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
},
},
},
{
field: 'downgrade',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: '#fac858',
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
} ,
},
},
{
field: 'dispose',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: '#fac858',
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
} ,
},
},
{
field: 'action',
headerName: 'Action',
sortable: true,
resizable: true,
filter:
true,
cellRenderer: () => {
return `
<button mat-mini-fab="" color="warn" ptooltip="Action History" tooltipposition="top" class="mat-focus-indicator mat-mini-fab mat-button-base mat-primary" style="background-color: #7a1dcf;" ng-reflect-color="primary" ng-reflect-text="Action Detail" ng-reflect-tooltip-position="top"><span class="mat-button-wrapper"><i class="fa fa-list" style="color: #fff;"></i></span><span matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round" ng-reflect-disabled="false" ng-reflect-centered="false" ng-reflect-trigger="[object HTMLButtonElement]"></span><span class="mat-button-focus-overlay"></span></button>
`;
},
},
],
defaultColDef: {
flex: 1,
minWidth: 100,
resizable: true,
},
rowData: getData(),
rowHeight: 50,
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function () {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
});