Блог

Я пробовал примеры сетки AG на их веб-сайте документации для создания диаграмм, выбирая данные из сетки. Вот ссылка: https://www.ag-grid.com/angular-data-grid/integrated-charts-range-chart/ Однако данные не могут быть сгруппированы по определенному столбцу и отображаются несколько раз для одной и той же категории. Вот файл app.component.ts из документации:

 import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'ag-grid-enterprise';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import {AllModules} from '@ag-grid-enterprise/all-modules'


@Component({
  selector: 'app-root',
  template: `<div class="wrapper" height="200px">
  <ag-grid-angular
    #agGrid
    style="width: 100%; height: 700px;"
    id="myGrid"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [popupParent]="popupParent"
    [enableRangeSelection]="true"
    [enableCharts]="true"
    [chartThemeOverrides]="chartThemeOverrides"
    [rowData]="rowData"
    (firstDataRendered)="onFirstDataRendered($event)"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular>
  <div id="myChart" class="ag-theme-alpine my-chart"></div>
</div> `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;

  public columnDefs;
  public defaultColDef;
  public popupParent;
  public chartThemeOverrides;
  public rowData: any;
  

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        field: 'athlete',
        width: 150,
        chartDataType: 'category',
      },
      {
        field: 'age',
        chartDataType: 'category',
        sort: 'asc',
      },
      { field: 'sport',
        chartDataType: 'category'  
      },
      {
        field: 'year',
        chartDataType: 'excluded',
      },
      {
        field: 'gold',
        chartDataType: 'series',

      },
      {
        field: 'silver',
        chartDataType: 'series',

      },
      { field: 'bronze',
      chartDataType: 'series'}
    ];
    this.defaultColDef = {
      editable: true,
      sortable: true,
      flex: 1,
      minWidth: 100,
      filter: true,
      resizable: true,
    };
    this.popupParent = document.body;
    this.chartThemeOverrides = {
      common: {
        title: {
          enabled: true,
          text: 'Medals by Age',
        },
        legend: { position: 'bottom' },
      },
      column: { axes: { category: { label: { rotation: 0 } } } },
        grouped: true

    };
  }

  onFirstDataRendered(params) {
    var createRangeChartParams = {
      cellRange: {
        rowStartIndex: 0,
        rowEndIndex: 79,
        columns: ['age', 'gold', 'silver', 'bronze'],
      },
      chartType: 'groupedColumn',
      chartContainer: document.querySelector('#myChart'),
      aggFunc: 'sum',
    };
    params.api.createRangeChart(createRangeChartParams);
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get('https://www.ag-grid.com/example-assets/wide-spread-of-sports.json')
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}
 

Кто-нибудь сталкивался с этой проблемой раньше?