angular - AG Grid 中的综合图表未按列数据分组
问题描述
我一直在他们的文档网站上尝试 AG Grid 示例,通过从网格中选择数据来创建图表。这是链接: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;
});
}
}
有没有人遇到过这个问题?
解决方案
推荐阅读
- python - 在 scikit GP 模型上使用贝叶斯优化时出现 ValueError
- ios - struct Array 的值为 nil
- python - 迁移时不存在“django_site”
- java - 在多个类中使用一个对象
- matlab - 现代等价于superiorto() 函数
- javascript - MapboxDirections 不移动地图
- jpa - 删除 netbeans 中的实体类后出错(JAVA EE 8、jpa、EclipseLink)
- python - 检查多维列表的一部分是否在单独的多维列表中
- c# - ASP.NET Core AspNetUsers 上的身份
- java - Mockito - Unmocked 方法无法返回对象本身