Блог

Я создал таблицу ag-сетки и создал диаграмму для этой сетки. Я хочу показать итоги по группам в таблице, поэтому я добавил параметры [groupIncludeFooter]=»true» [groupIncludeTotalFooter]=»true» в свою сетку.

Это действительно показывает сгруппированные общие подсчеты, а также общее общее количество, но создает пустой столбец данных на графике, прикрепленном к этой сетке, как показано на рисунке:

Моя сетка:

 <ag-grid-angular
            style="width: 100%; height: 600px"
            class="ag-theme-balham"
            enableCharts
            [rowData]="rowData"
            [columnDefs]="regionColumnDefs"
            rowSelection="multiple"
            [autoGroupColumnDef]="regionGroupColumnDef"
            [defaultColDef]="pivotTableDefaultColDef"
            [groupSelectsChildren]="true"
            (firstDataRendered)="onRegionDataRendered($event)"
            [isGroupOpenByDefault]="isGroupOpenByDefault"
            [suppressDragLeaveHidesColumns]="true"
            [chartThemeOverrides]="chartThemeOverrides"
            [enableRangeSelection]="true"
            [customChartThemes]="customChartThemes"
            [chartThemes]="chartThemes"
            [suppressAggFuncInHeader]="true"
            [getChartToolbarItems]="getChartToolbarItems"
            (cellClicked)="onPivotCellClicked($event)"
            [statusBar]="statusBar"
            [groupIncludeFooter]="true"
            [groupIncludeTotalFooter]="true"
          >
          </ag-grid-angular>
 

Моя функция рендеринга:

 onRegionDataRendered(params) {
    this.regionGridApi = params.api;
    params.columnApi.setPivotMode(true);
    params.columnApi.applyColumnState({
      state: [
        {
          colId: 'parentRegionName',
          rowGroup: true
        },
        {
          colId: 'regionName',
          rowGroup: true
        }
      ],
      defaultState: {
        pivot: false,
        rowGroup: false
      }
    });

    this.createCasesByRegionChart(this.regionGridApi, false);
    this.autoSizeAll(params.columnApi, true);
  }
 

My Create chart function:

 createCasesByRegionChart(gridApi, unlinkChart: boolean) {
    if (this.parentRegionChartRef) {
      this.parentRegionChartRef.destroyChart();
    }
    this.parentRegionChartRef = gridApi.createRangeChart({
      cellRange: {
        columns: ['parentRegionName', 'regionName', 'totalBilled', 'totalExpected', 'totalCollected']
      },
      chartContainer: document.querySelector('#chartByRegion'),
      chartType: this.chartType,
      suppressChartRanges: true,
      chartThemeOverrides: {
        column: {
          series: {
            highlightStyle: {
              fill: undefined,
              stroke: undefined
            },
            listeners: {
              nodeClick: event => {
                const nodeClickColumn = 'ag-Grid-AutoColumn';
                if (event.datum[nodeClickColumn] amp;amp; event.datum[nodeClickColumn].labels) {
                  if (event.datum[nodeClickColumn].labels[0]) {
                    this.updateDataForGridChanges('regionName', event.datum[nodeClickColumn].labels[0]);
                  } else if (event.datum[nodeClickColumn].labels[1]) {
                    this.updateDataForGridChanges('parentRegionName', event.datum[nodeClickColumn].labels[1]);
                  }
                }
              }
            }
          }
        }
      },
      aggFunc: 'sum',
      unlinkChart: unlinkChart
    });
  }
 

Документы также кажутся бесполезными. Какие-нибудь проблемы в моем коде? Есть какие-нибудь обходные пути для этого?