logo

Jak používat komponentu uživatelského rozhraní Vue Pivot Grid ve vaší webové aplikaci

V tomto příspěvku se podíváme na komponentu PivotGrid. Na rozdíl od typické mřížky vám kontingenční mřížka umožňuje změnit způsob prezentace dat. Pojďme se podívat na to, jak je přidat do svých webových aplikací.

V předchozím příspěvku jsme se naučili, jak vytvořit sparkline pomocí Kendo UI pro Vue. V tomto příspěvku se podíváme na komponentu PivotGrid.

Kontingenční mřížka zobrazuje data v mřížce spolu se souhrnnými hodnotami. Na rozdíl od typické mřížky vám kontingenční mřížka umožňuje změnit způsob prezentace dat. Můžete mít například sadu dat s položkami zásob, které zahrnují číslo na skladě, kategorii, prodejnu a čtvrtletí. Můžete vytvořit kontingenční mřížku pro analýzu celkového inventáře na skladě podle prodejny a podle čtvrtletí. Nebo si můžete prohlédnout zásoby na skladě podle kategorií a podle prodejny. Tyto různé perspektivy lze zobrazit ve stejné mřížce pouhým výběrem polí, která se mají použít pro řádek a sloupec mřížky. V běžné mřížce jsme mohli vytvořit pouze jeden statický pohled. Příště se podíváme na to, jak vytvořit kontingenční mřížku pomocí vzorových dat o prodeji pro obchod s potravinami.

Začínáme

Budeme potřebovat komponenty PivotGrid, PivotConfigurator a PivotDataSource. Kontingenční mřížka zobrazuje naše souhrnná data. PivotConfigurator nám pomáhá vytvořit kontingenční mřížku. A PivotDataSource je rozšíření komponenty DataSource používané k navázání našich dat na PivotGrid a PivotConfigurator. Nejprve inicializujeme náš projekt pomocí šablony Vue webpack-simple. Poté nainstalujeme Kendo UI, motiv, balíček PivotGrid a balíček DataSource.

npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default
npm install --save @progress/kendo-pivotgrid-vue-wrapper
npm install --save @progress/kendo-datasource-vue-wrapper

Dále v main.js importujeme balíčky uživatelského rozhraní Kendo, globálně zaregistrujeme komponenty PivotGrid a PivotDataSource a přidáme je do seznamu komponent.

import Vue from 'vue'import App from './App.vue'import '@progress/kendo-ui'import '@progress/kendo-theme-default/dist/all.css'import { PivotGrid, PivotGridInstaller } from '@progress/kendo-pivotgrid-vue-wrapper'import { PivotDataSource, DataSourceInstaller } from '@progress/kendo-datasource-vue-wrapper'

Vue.use(PivotGridInstaller)
Vue.use(DataSourceInstaller)new Vue({
  el: '#app',
  components: {
  	PivotGrid,
  	PivotDataSource
  },
  render: h => h(App)})

Přidání komponent

Naše data mají tři pole:prodané jednotky, rok prodeje a kategorie. Aby byl náš příklad jednoduchý, použijeme pouze roky 2017 a 2018 a kategorie káva a čaj. Chceme vidět prodané jednotky podle kategorií podle roku. Tabulka by také měla zobrazovat součet prodaných jednotek pro každou kategorii a každý rok. Toto jsou naše data:

var products = [
  {
    UnitsSold: 100,
    SalesYear: 2017,
    Category: "Coffee",
      
  },
  {
    UnitsSold: 150,
    SalesYear: 2018,
    Category: "Coffee", 
  },
  {
    UnitsSold: 75,
    SalesYear: 2017,
    Category: "Tea"
  },
  {
    UnitsSold: 50,
    SalesYear: 2018,
    Category: "Tea"
  }];

Nejprve vytvoříme komponentu PivotDataSource a přidáme ji do naší šablony. Poté přidejte součásti PivotGrid a PivotConfigurator, které budou vázány na zdroj PivotDataSource. Následuje aktualizovaná šablona pro naši aplikaci:

<template>
  <div id="app">
    <kendo-pivotdatasource 
      ref="pivotDataSource"
      :data="data"
      :schema-model="schemaModel"
      :schema-cube="schemaCube"
      :measures="measures"
      :columns="columns"
      :rows="rows">
    </kendo-pivotdatasource>
    <kendo-pivotconfigurator
      :data-source-ref="'pivotDataSource'">
    </kendo-pivotconfigurator>
    <kendo-pivotgrid
      :data-source-ref="'pivotDataSource'">
    </kendo-pivotgrid>
  </div></template>

Zdroj PivotDataSource potřebuje ref atribut, abychom jej mohli svázat s mřížkou a konfigurátorem. Protože používáme místní zdroj dat, používáme data atribut pro nastavení dat. schema-model definuje strukturu našich dat. schema-cube ukládá rozměry a míry. Rozměry jsou seskupení našich dat. Naše data budou seskupena podle kategorie a roku. Míry jsou souhrnné hodnoty dat. Naším měřítkem jsou prodané jednotky. Míra je definována polem a agregací. Agregát může být průměr, počet, maximum, minimum nebo součet. Pro náš soubor dat definujeme součet a průměr.

measures atribut definuje, která míra se má použít na data, která byla definována v kostce schématu. Použijeme pouze součet. Průměrná míra bude stále k dispozici k použití v našem konfigurátoru. columns a rows atributy definují, která pole se mají pro každé použít. V tomto příkladu použijeme pole rok prodeje pro sloupec mřížky a kategorii pro řádek mřížky. Toto je skript pro naši komponentu App se všemi definovanými daty:

export default {
  name: 'app',
  data () {
    return {
      data: products,
      schemaModel: {
        fields: {
          ProductName: { type: "string" },
          UnitPrice: { type: "number" },
          UnitsInStock: { type: "number" },
          SalesYear: { type: "number" },
          Category: { type: "string" }
        }
      },
      schemaCube: {
        dimensions: {
          SalesYear: { caption: "All Years" },
          Category: { caption: "All Categories" },
        },
        measures: {
          "Sum": { field: "UnitsSold", aggregate: "sum" },
          "Average": { field: "UnitsSold", aggregate: "average" }
        }
      },
      measures: ["Sum"],
      columns: [{ name: "SalesYear", expand: true}],
      rows: [{name: "Category", expand: true}]
    }
  }
}
</script>



Při pohledu na mřížku je snadné vidět, že se celkově prodalo více kávy než čaje. Také množství prodané kávy se v roce 2018 zvýšilo, zatímco množství prodaného čaje kleslo. Tyto informace lze použít k obchodním rozhodnutím, jako je množství zásob nakoupit a držet na skladě.

Přehled

Vytvořili jsme kontingenční mřížku, která zobrazuje celkový počet prodaných produktů podle kategorií a podle roku. Kontingenční mřížka vkládá data do formátu, abychom viděli, jak spolu informace souvisí. Kontingenční mřížka je užitečná, když máte vícerozměrná nebo hierarchická data. Dimenze jsou pole, podle kterých seskupujete data. Hierarchická data mají více úrovní. Například kategorie a podkategorie jsou úrovně a také roky a měsíce. Jedinečnou vlastností mřížky je krychle. Kostka uchovává strukturu dat. To zahrnuje rozměry a míry. Míry jsou datové hodnoty v každé buňce. Pro náš příklad to byly prodané jednotky. Použili jsme velmi malou a jednoduchou datovou sadu, abychom ukázali, jak používat kontingenční mřížku. V mřížce je možné mít sloupce a řádky s více než jedním rozměrem a také s více mírami. Tyto funkce usnadňují analýzu velkého množství informací a získání cenných informací.

Zdroje

  • Přehled PivotGrid uživatelského rozhraní Kendo pro Vue
  • Přehled PivotDataSource uživatelského rozhraní Kendo pro Vue
  • Kendo UI PivotGrid JavaScript API Reference
  • Kendo UI PivotDataSource JavaScript API Reference
  • Reference API
  • Ukázky
  • Ikony webových písem uživatelského rozhraní Kendo
  • Dokumenty a ukázky Kendo UI Vue
  • Vue.js Webpack-Simple Template

Vyzkoušejte si uživatelské rozhraní Kendo sami

Chcete začít využívat výhod více než 70+ hotových komponent uživatelského rozhraní Kendo, jako je Grid nebo Scheduler? Můžete zahájit bezplatnou zkušební verzi Kendo UI pro Vue ještě dnes a začít vyvíjet své aplikace rychleji.

Spusťte zkušební verzi uživatelského rozhraní My Kendo

Verze Angular, React a jQuery

Hledáte komponentu uživatelského rozhraní pro podporu konkrétních rámců? Podívejte se na Kendo UI pro Angular, Kendo UI pro React nebo Kendo UI pro jQuery.