Блог

Главная - Вопросы по программированию - Почему я получаю дополнительный неопределенный столбец диаграммы в интегрированных диаграммах ag-grid

Почему я получаю дополнительный неопределенный столбец диаграммы в интегрированных диаграммах ag-grid

#javascript #ag-grid

Вопрос:

Я использую библиотеку ag-grid для отображения некоторых данных в виде сетки и диаграмм на основе этих данных. Я хочу сгруппировать свои записи по какой-то характеристике(в данном примере это будет 'make' ). Я ожидал увидеть 3 столбца диаграммы (один для Toyota , Ford и Honda ). В начале с hide полем, установленным в true значение, я вижу столбцы для каждой записи 3 столбца, которые содержат сумму каждой группы. Через некоторое время я замечаю, что если я удалю это hide поле, то получу почти то, что хочу. У меня есть по 3 столбца для каждой группы, но я также получаю один дополнительный столбец, в котором отображается сумма всех моих записей, и я хочу избежать просмотра этого столбца. Более того, я также вижу дополнительный Group столбец в своей сетке, который не нужен, и я хочу скрыть это. В конце концов я прочитал кое-что о сводных диаграммах, но они не поддерживают перекрестную фильтрацию, так что это не решение моей проблемы, если только мне не хватает sth, и я тоже могу сделать перекрестную фильтрацию сводных диаграмм.

Предполагая, что я хотел бы увидеть:

  • сетка с 3 столбцами: make , model и price . Где make , является столбцом группировки, введите описание изображения здесь
  • диаграмма с 3 столбцами, по одному для каждого make (Toyota, Ford, Honda). Диаграмма должна позволять перекрестную фильтрацию введите описание изображения здесь
 const agGrid = window.agGrid;
const gridContainer = document.querySelector('#gridContainer');
const chartContainer = document.querySelector('#chartContainer');

const columnDefs = [
  { field: 'model' },
  { field: 'price', type: 'number', chartDataType: 'series' },
  { 
    field: 'make', 
    rowGroup: true,
    hide: true,
    cellRenderer: 'agGroupCellRenderer',
    chartDataType: 'category', 
    filter: 'agMultiColumnFilter', 
  }
];
const rowData = [
  { make: 'Toyota', model: 'Celica', price: 35000 },
  { make: 'Toyota', model: 'Yaris', price: 26000 },
  { make: 'Toyota', model: 'Corolla', price: 3700 },
  { make: 'Ford', model: 'Mondeo', price: 32000 },
  { make: 'Ford', model: 'Focus', price: 28000 },
  { make: 'Ford', model: 'Fiesta', price: 25000 },
  { make: 'Honda', model: 'Civic', price: 26000 },
  { make: 'Honda', model: 'CRV', price: 72000 },
  { make: 'Honda', model: 'Acord', price: 32000 }
];
const gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  groupSelectsChildren: true,
  suppressAggFuncInHeader: true,
  rowSelection: 'multiple',
  columnTypes: {
    number: {
      aggFunc: 'sum'
    }
  },
  onFirstDataRendered: ({ api }) => {
    api.createCrossFilterChart({
      cellRange: { columns: ['make', 'price'] },
      chartType: 'column',
      aggFunc: 'sum',
      chartContainer: chartContainer
    });
  }
};

document.addEventListener('DOMContentLoaded', () => {
  new agGrid.Grid(gridContainer, gridOptions);
}); 
 @import url('https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css');
@import url('https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css'); 
 <script src="https://unpkg.com/ag-grid-enterprise/dist/ag-grid-enterprise.min.noStyle.js"></script>
<div id="gridContainer" style="height: 400px; width: 820px;" class="ag-theme-alpine"></div>
<div id="chartContainer" style="height: 400px; width: 820px;" class="ag-theme-alpine"></div>
Метки: