Таблицы данных и сетки стали основой современного дизайна пользовательского интерфейса. Они позволяют нашим пользователям легко просматривать большие наборы данных, сравнивать значения и принимать решения на основе эмпирических данных. Однако иногда наборы данных, с которыми мы работаем, нелегко просмотреть в стандартной таблице, или могут быть случаи, когда мы хотим исключить определенные данные, чтобы было легче увидеть корреляции между точками данных. К счастью, инженеры-программисты и программисты разработали более совершенную форму таблицы данных, которая позволяет нам делать именно это: сводные таблицы.
Сводная таблица — это таблица данных, которая помогает пользователям в таких задачах, как обнаружение данных; это позволяет пользователям выполнять сложные аналитические вычисления с загруженным набором данных, определять, какие данные вы хотите отобразить, и определять ориентацию данных. Это позволяет пользователям видеть тенденции, которые обычно упускаются из виду, если вы используете традиционную таблицу данных.
К счастью, Wijmo предоставил вам PivotGrid, лучший доступный элемент управления сводной таблицей Angular. Он прост в реализации, легко настраивается и даже имеет обширный список функций, которые позволяют легко интегрировать его в ваше приложение.
Если вы хотите скачать готовый проект, чтобы помочь вам в дальнейшем, вы можете найти исходный код приложения здесь. Теперь приступим к работе!
Загрузка данных с помощью Pivot Engine
Прежде чем мы реализуем сводную таблицу Wijmo Angular, PivotGrid, нам нужно загрузить все необходимые ресурсы в приложение Angular. Первое, что нам нужно сделать, это установить библиотеку компонентов пользовательского интерфейса Wijmo, что мы и сделаем через NPM. Внутри вашего приложения Angular выполните следующую команду:
npm i @grapecity/wijmo.angular2.all
Это установит библиотеку Wijmo в ваше приложение. Вы могли заметить, что мы указываем пакет angular2 в пути установки; Wijmo поддерживает Angular, React и Vue вместе со своей основной библиотекой JavaScript, поэтому мы указываем пакет angular2, чтобы не устанавливать ненужные файлы.
Затем нам нужно включить файл CSS Wijmo и импортировать правильные модули Wijmo в наше приложение. Откройте файл app.module.ts и включите в него следующее:
import { WjOlapModule } from '@grapecity/wijmo.angular2.olap';
...
imports: [
...
WjOlapModule
],
А что касается стилей, включите следующее в начало файла styles.css вашего приложения:
@import '@grapecity/wijmo.styles/wijmo.css';
Большой! Теперь мы включили все соответствующие файлы Wijmo, которые нам понадобятся. И последнее, что мы сделаем, это создадим сервис, который мы будем использовать для подачи некоторых данных в нашу сводную таблицу Angular. Создайте сервис с помощью следующей команды:
ng g s data
Это создаст файл службы и файл тестирования службы. Мы можем игнорировать тестовый файл, но открыть новый сервисный файл и добавить следующее:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
products = [
{ product: 'Wijmo', platform: 'Web' },
{ product: 'ActiveReports', platform: 'Desktop' },
{ product: 'ActiveReportsJS', platform: 'Web' },
{ product: 'ComponentOne', platform: 'Desktop' },
{ product: 'Spread', platform: 'Desktop' },
{ product: 'SpreadJS', platform: 'Web' },
{ product: 'GCDocs', platform: 'Desktop' }
];
agents = [
{ agent: 'Ashlyn Dunlop', region: 'East' },
{ agent: 'Keith Vang', region: 'East' },
{ agent: 'Bobbi Rodrigues', region: 'West' },
{ agent: 'Charli Medina', region: 'West' },
{ agent: 'Kaitlin Salt', region: 'West' },
];
constructor() { }
randomInt(min: number, max: number) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
getOrdersList(count: number) {
var year = new Date().getFullYear(), data = [];
for(var i = 0; i < count; i++) {
let productIdx = this.randomInt(0, 6);
let agentIdx = this.randomInt(0, 4);
data.push({
orderId: this.randomInt(1, 10000),
platform: this.products[productIdx].platform,
product: this.products[productIdx].product,
agent: this.agents[agentIdx].agent,
region: this.agents[agentIdx].region,
date: new Date(year - this.randomInt(0, 2), this.randomInt(0, 11), this.randomInt(0, 27)),
sales: this.randomInt(10, 50),
downloads: this.randomInt(10, 200),
revenue: this.randomInt(500, 3500)
});
}
return data;
}
}
Данные здесь не имеют реальной ценности; это просто сгенерированные фиктивные данные, чтобы показать функциональность компонентов, поэтому я не собираюсь тратить на это много времени. Важно знать, что у нас есть большой набор данных, причем каждая строка в нашем наборе данных составляет девять различных точек данных.
Теперь, когда приложение настроено, мы можем, наконец, реализовать сводную таблицу Wijmo Angular, PivotGrid.
Откройте файл app.component.ts своего приложения и добавьте следующий код:
import { Component } from '@angular/core';
import { DataService } from './data.service';
import * as wjOlap from '@grapecity/wijmo.olap';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
ng: wjOlap.PivotEngine;
constructor(private dataService: DataService) {
this.ng = new wjOlap.PivotEngine({
itemsSource: dataService.getOrdersList(1000)
});
}
}
Как видите, это всего несколько строк кода. Но мы должны объяснить, что здесь происходит. В файле мы инициализируем компонент Wijmo под названием PivotEngine. PivotEngine — это то, что управляет данными, и без PivotEngine элементы управления Wijmo PivotGrid и PivotPanel не смогли бы функционировать. Вы можете думать о PivotEngine как об основе нашей сводной таблицы; без него в таблице не было бы данных для отображения пользователям.
Наряду с инициализацией компонента Wijmo мы также устанавливаем его свойство itemsSource. Это говорит движку: «Эй, это данные, которыми мы хотим, чтобы вы управляли». В случае с этим приложением мы вызываем функцию getOrdersList() из нашего сервиса, которая возвращает 1000 строк данных для загрузки.
Теперь, когда у нас есть данные, загруженные в PivotEngine, пришло время отобразить эти данные на экране.
Настройка PivotPanel и PivotGrid
Теперь, когда PivotEngine настроен, пришло время его использовать. Как мы упоминали в предыдущем разделе, движок — это то, что управляет нашими данными. Итак, чтобы пользователи могли взаимодействовать с данными, нам нужно подключить их к нашим элементам пользовательского интерфейса: PivotPanel и PivotGrid.
Мы упомянули PivotGrid от Wijmo, но ничего не сказали о PivotPanel. Сводная панель — это то, как пользователи напрямую взаимодействуют с отображаемыми данными. Это включает в себя определение того, какие поля данных являются столбцами, строками, фильтрами и полями значений, а также доступ к меню Настройки поля для дальнейшей настройки данных выбранного поля.
Вместо дальнейших объяснений было бы лучше показать вам, что вы можете делать с PivotPanel и PivotGrid. Чтобы добавить их в свое приложение, откройте файл app.component.html и добавьте следующий код:
<div class="flextable"> <wj-pivot-panel [itemsSource]="ng"></wj-pivot-panel> <wj-pivot-grid #pivotGrid [itemsSource]="ng"></wj-pivot-grid> </div>
И это все, что нужно! Это действительно так просто реализовать сводную таблицу Wijmo Angular. Как и в случае с PivotEngine, PivotGrid и PivotPanel должны быть снабжены itemsSource. Однако, в отличие от PivotEngine, эти компоненты не используют простой массив; они берут PivotEngine! Итак, используя переменную ng, которую мы настроили в предыдущем разделе, мы можем назначить ее как itemsSource для обоих компонентов.
И последнее, что нужно сделать перед запуском приложения, это то, что мы хотим добавить немного стиля, чтобы очистить макет. Откройте файл styles.css и добавьте следующее:
.flextable {
display: flex;
}
.wj-pivotpanel {
width: 500px;
margin: 0px 10px;
}
Мы настраиваем приложение так, чтобы PivotPanel и PivotGrid отображались рядом, а также настраиваем ширину PivotPanel, чтобы было больше места для PivotGrid.
Теперь, если вы запустите приложение, вы должны увидеть следующее:
Как видите, в PivotGrid ничего не загружается; этого следовало ожидать. Ничего не будет отображаться, если мы не установим некоторые поля в сводной панели. Давайте исправим это и добавим пару полей:
Как вы можете видеть через сводную панель, мы добавили следующие поля в различные области панели:
Теперь мы можем увидеть разбивку всех показателей продаж по регионам, по агентам и даже по продуктам и платформам.
Последнее, что нужно обсудить, прежде чем двигаться дальше, — это меню Настройки поля. Доступ к этому меню можно получить, щелкнув правой кнопкой мыши любую ячейку в сводной сетке или щелкнув правой кнопкой мыши имя любого поля в сводной панели:
При выборе параметра Настройки поля… откроется модальное окно «Настройки поля»:
Здесь мы можем изменить способ суммирования данных, добавить вычисления (например, % разницы по сравнению с предыдущей строкой), добавить фильтры и даже отформатировать способ отображения данных, который включает предварительный просмотр на основе выбранного формата.
Поскольку это меню настроек поля для поля Продажи, мы просто собираемся изменить формат, чтобы он отображался в денежном формате вместо основного целочисленного формата:
Как видите, он также показывает нам предварительный просмотр обновленного формата. Если мы нажмем кнопку OK, мы должны увидеть следующее:
Как видите, все столбцы Продажи теперь отображаются в денежном, а не в целочисленном формате.
Создание настраиваемых полей
Теперь, когда мы реализовали PivotPanel и PivotGrid, а также рассмотрели основы их использования, пришло время настроить наши данные с помощью PivotEngine. Мы можем сделать это, настроив свойства вручную с помощью PivotEngine, вместо того, чтобы позволять ему генерировать их автоматически.
Откройте файл app.component.ts и добавьте следующее:
this.ng = new wjOlap.PivotEngine({
itemsSource: dataService.getOrdersList(1000),
fields:[
{ binding: 'date', header: 'Quarter', format: '\"Q\"q yyyy' },
{ binding: 'date', header: 'Month', format: 'MMMM' },
{ binding: 'agent', header: 'Agent' },
{ binding: 'region', header: 'Region' },
{ binding: 'platform', header: 'Platform' },
{ binding: 'product', header: 'Product' },
{ binding: 'sales', header: 'Sales', format: 'c2' },
{ binding: 'downloads', header: 'Downloads', format: 'n0' },
{ binding: 'revenue', header: 'Revenue', format: 'c2' },
]
});
Как видите, свойство fields принимает массив объектов, который используется для создания различных полей, которые пользователи могут выбирать в сводной панели. По умолчанию эти объекты должны иметь только два свойства: свойство binding и свойство header. Свойство привязки сообщает движку, к какому имени свойства будет привязано это поле. Для Агент, Регион, Платформа и Продукт это единственные свойства, которые мы устанавливаем.
Однако есть еще одно свойство, которое мы можем установить: свойство format. Подобно тому, как пользователи могут использовать меню «Настройки поля» для изменения форматирования, разработчики могут установить формат по умолчанию, в котором мы хотим отображать поле.
Наряду с настройкой формата мы можем фактически создать несколько полей из одной и той же точки данных и установить разные форматы для обоих. В этом приложении мы настраиваем квартальные и месячные поля даты. Теперь, если мы сохраним это и откроем приложение, мы выберем несколько полей, и вы должны увидеть следующее:
Как видите, мы создали квартальные и месячные поля, используя одну точку данных. Теперь пользователи могут просматривать еще более подробную разбивку данных о продажах по кварталам и месяцам.
Использование сводных диаграмм для отображения данных в форме диаграммы
Наряду со сводной таблицей Wijmo Angular, PivotGrid, Wijmo также предлагает элемент управления PivotChart для работы в сочетании с PivotPanel и PivotGrid. Как и сводная сетка, сводная диаграмма будет автоматически обновляться, чтобы отражать изменения в областях сводной панели.
Добавить сводную диаграмму так же просто, как добавить сводную сетку и сводную панель. Откройте файл app.component.html и измените его следующим образом:
<div class="flextable"> <wj-pivot-panel [itemsSource]="ng"></wj-pivot-panel> <wj-pivot-grid #pivotGrid [itemsSource]="ng"></wj-pivot-grid> </div> <wj-pivot-chart #pivotChart [itemsSource]="ng" [showTitle]=true [showLegend]="'Auto'"></wj-pivot-chart>
Вот и все! Мы передаем PivotEngine в качестве источника элементов для сводной диаграммы. Теперь, если вы сохраните приложение и перезагрузите его, если вы добавите какие-либо поля в область значений, вы увидите их отражение в сводной диаграмме. Взгляните на изображение ниже:
Как видите, мы установили поля Квартал и Платформа как поля строк, а затем Продажи и Загрузки fields как поля значений. Затем сводная диаграмма показывает разбивку, подобно тому, как это делает сводная сетка, данных, которые мы выбрали в сводной панели.
Заключение
И с этим мы подошли к концу. В этой статье мы рассмотрели некоторые преимущества использования сводных таблиц Angular, а также то, как вы можете использовать Wijmo для реализации собственной сводной таблицы, сводной диаграммы и сводной панели для управления данными.
Если вы хотите попробовать Wijmo, вы можете загрузить всю библиотеку компонентов пользовательского интерфейса, доступную на чистом JavaScript, Angular, React и Vue, здесь.
Удачного кодирования!
Хотите внедрить сводные веб-таблицы и диаграммы в стиле Excel? Скачай Wijmo сегодня!
Первоначально опубликовано на https://www.grapecity.com 21 ноября 2022 г.
