zoukankan      html  css  js  c++  java
  • 应用程序的图表如何绑定数据?Kendo UI有妙招

    Chart 支持将其数据系列和类别轴绑定到数组和 Observable。

    Kendo UI for Angular最新版工具下载

    绑定系列

    本节提供有关 Chart 系列的一般绑定方法的信息。

    值数组

    最简单的数据绑定形式涉及为每个系列提供一组值。

    UI组件库Kendo UI for Angular入门指南教程:图表如何绑定数据?
    import { Component } from '@angular/core';
    
    @Component({
    selector: 'my-app',
    template: `
    <kendo-chart>
    <kendo-chart-series>
    <kendo-chart-series-item [data]="seriesData">
    </kendo-chart-series-item>
    </kendo-chart-series>
    </kendo-chart>
    `
    })
    export class AppComponent {
    public seriesData: number[] = [1, 2, 3, 5];
    }

    数组

    某些系列要求每个点有多个值,例如 Scatter(x 和 y)和 Bubble(x、y 和大小)系列。以下示例演示如何将 Bubble 系列绑定到数组。

    @Component({
    selector: 'my-app',
    template: `
    <kendo-chart>
    <kendo-chart-series>
    <kendo-chart-series-item type="bubble" [data]="seriesData">
    </kendo-chart-series-item>
    </kendo-chart-series>
    </kendo-chart>
    `
    })
    export class AppComponent {
    public seriesData: number[] = [[1, 1, 10], [2, 2, 20], [3, 3, 30]];
    }

    对象

    图表允许您通过指定要使用的字段(值、类别、X 值、Y 值等)将其绑定到对象。 这是最常用的绑定类型,因为它允许您使用模型而只需很少或无需修改。以下示例演示如何使用绑定类别文本和值配置列系列。

    UI组件库Kendo UI for Angular入门指南教程:图表如何绑定数据?
    import { Component } from '@angular/core';
    
    interface Model {
    product: string;
    sales: number;
    }
    
    @Component({
    selector: 'my-app',
    template: `
    <kendo-chart>
    <kendo-chart-series>
    <kendo-chart-series-item
    type="column" [data]="seriesData"
    field="sales" categoryField="product">
    </kendo-chart-series-item>
    </kendo-chart-series>
    </kendo-chart>
    `
    })
    export class AppComponent {
    public seriesData: Model[] = [{
    product: 'Chai',
    sales: 200
    }, {
    product: 'Others',
    sales: 250
    }];
    }

    对象组

    为数据集中的每个独特类别绘制单独的系列通常很方便。 例如销售报告中每个产品的折线图,通常事先不知道确切的类别数量。

    Data Query包提供了一个方便的groupBy方法,您可以使用该方法将记录分成组。它需要数据和一个 GroupDescriptor,输出是一个包含组及其项目的GroupResult。

    以下示例演示如何为每个服务绘制折线图。

    UI组件库Kendo UI for Angular入门指南教程:图表如何绑定数据?
    import { Component } from '@angular/core';
    
    import { groupBy, GroupResult } from '@progress/kendo-data-query';
    
    interface Sample {
    interval: number;
    service: string;
    value: number;
    }
    
    @Component({
    selector: 'my-app',
    template: `
    <kendo-chart>
    <kendo-chart-series>
    <kendo-chart-series-item
    *ngFor="let item of series"
    [data]="item.items" [name]="item.value"
    field="value" categoryField="interval"
    type="line">
    </kendo-chart-series-item>
    </kendo-chart-series>
    </kendo-chart>
    `
    })
    export class AppComponent {
    public data: Sample[] = [{
    interval: 1, service: 'Service 1', value: 5
    }, {
    interval: 2, service: 'Service 1', value: 15
    }, {
    interval: 3, service: 'Service 1', value: 10
    }, {
    interval: 1, service: 'Service 2', value: 10
    }, {
    interval: 2, service: 'Service 2', value: 5
    }, {
    interval: 3, service: 'Service 2', value: 15
    }];
    
    public series: GroupResult[];
    
    constructor() {
    this.series = groupBy(this.data, [{ field: 'service' }]) as GroupResult[];
    
    // Inspect the resulting data structure in the console
    console.log(JSON.stringify(this.series, null, 2));
    }
    }
    绑定类别

    Categorical Charts 的类别轴是一个数据绑定组件,就像系列一样。它支持以下提供类别列表的基本方法:

    • 标签数组
    • 类别字段

    当 Chart 绑定日期时,类别轴提供专用功能。

    标签数组

    最简单的数据绑定形式涉及向轴提供类别标签数组,该列表将按原样显示,无需任何修改,系列数据点沿轴顺序定位。

    • 类别的顺序与系列数据点的顺序无关。
    • 类别的数量必须等于系列中数据点的数量。
    • 为了保持顺序,系列中的缺失值必须用 null 表示。
    UI组件库Kendo UI for Angular入门指南教程:图表如何绑定数据?
    import { Component } from '@angular/core';
    
    @Component({
    selector: 'my-app',
    template: `
    <kendo-chart>
    <kendo-chart-category-axis>
    <kendo-chart-category-axis-item [categories]="categories">
    </kendo-chart-category-axis-item>
    </kendo-chart-category-axis>
    <kendo-chart-series>
    <kendo-chart-series-item [data]="seriesData">
    </kendo-chart-series-item>
    </kendo-chart-series>
    </kendo-chart>
    `
    })
    export class AppComponent {
    public seriesData: number[] = [20, 40, 45, 30, 50];
    public categories: string[] = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
    }

    类别字段

    前一种方法容易出错,因为您需要维护类别和特定的数据顺序。 为避免此要求,请将类别绑定到与系列相同的模型对象。 这样,系列点和类别将始终自动匹配。

    UI组件库Kendo UI for Angular入门指南教程:图表如何绑定数据?
    import { Component } from '@angular/core';
    
    interface Model {
    product: string;
    sales: number;
    }
    
    @Component({
    selector: 'my-app',
    template: `
    <kendo-chart>
    <kendo-chart-series>
    <kendo-chart-series-item
    type="column" [data]="seriesData"
    field="sales" categoryField="product">
    </kendo-chart-series-item>
    </kendo-chart-series>
    </kendo-chart>
    `
    })
    export class AppComponent {
    public seriesData: Model[] = [{
    product: 'Chai',
    sales: 200
    }, {
    product: 'Others',
    sales: 250
    }];
    }

    处理重复类别

    绑定到类别字段可以让两个数据点具有相同的类别——以下示例演示了为“Chai”声明的两个值。

    UI组件库Kendo UI for Angular入门指南教程:图表如何绑定数据?
    import { Component } from '@angular/core';
    
    interface Model {
    product: string;
    sales: number;
    }
    
    @Component({
    selector: 'my-app',
    template: `
    <kendo-chart>
    <kendo-chart-series>
    <kendo-chart-series-item
    type="column" [data]="seriesData"
    field="sales" categoryField="product">
    </kendo-chart-series-item>
    </kendo-chart-series>
    </kendo-chart>
    `
    })
    export class AppComponent {
    public seriesData: Model[] = [{
    product: 'Chai',
    sales: 200
    }, {
    product: 'Chai',
    sales: 100
    }, {
    product: 'Others',
    sales: 250
    }];
    }

    在这种情况下,图表从源数据集中获取数据点,并使用聚合函数生成一个新点。

    默认情况下,聚合函数返回值字段的最大值。 如果类别只包含一个点,则不加修改地返回它。 即使类别仅包含一个数据点,其他聚合(例如计数和总和)也会产生自己的值。

    UI组件库Kendo UI for Angular入门指南教程:图表如何绑定数据?
    import { Component } from '@angular/core';
    
    interface Model {
    product: string;
    sales: number;
    }
    
    @Component({
    selector: 'my-app',
    template: `
    <kendo-chart>
    <kendo-chart-series>
    <kendo-chart-series-item
    aggregate="count"
    type="column" [data]="seriesData"
    field="sales" categoryField="product">
    </kendo-chart-series-item>
    </kendo-chart-series>
    </kendo-chart>
    `
    })
    export class AppComponent {
    public seriesData: Model[] = [{
    product: 'Chai',
    sales: 200
    }, {
    product: 'Chai',
    sales: 100
    }, {
    product: 'Others',
    sales: 250
    }];
    }

    也可以定义自己的聚合函数,如下例所示。

    使用类别绑定时,将对所有唯一类别执行聚合函数。

    UI组件库Kendo UI for Angular入门指南教程:图表如何绑定数据?
    import { Component } from '@angular/core';
    
    interface Model {
    product: string;
    sales: number;
    }
    
    @Component({
    selector: 'my-app',
    template: `
    <kendo-chart>
    <kendo-chart-series>
    <kendo-chart-series-item
    [aggregate]="myAggregate"
    type="column" [data]="seriesData"
    field="sales" categoryField="product">
    </kendo-chart-series-item>
    </kendo-chart-series>
    </kendo-chart>
    `
    })
    export class AppComponent {
    public seriesData: Model[] = [{
    product: 'Chai',
    sales: 200
    }, {
    product: 'Chai',
    sales: 100
    }, {
    product: 'Others',
    sales: 250
    }];
    
    public myAggregate(values: number[], series: any, dataItems: Model[], category: string) {
    /* Return a sum of the values */
    return values.reduce((n, acc) => acc + n, 0);
    }
    }
    更新数据

    替换数组实例

    为了提高浏览器的性能,Chart使用了OnPush更改检测策略。这意味着组件不会检测对数组实例的更改——例如,当添加元素时。 要触发更改检测,请为集合创建一个新的数组实例——例如,设置一个this.data = [...this.data, {new item}],来替代this.data.push({new item})数组。

    UI组件库Kendo UI for Angular入门指南教程:图表如何绑定数据?
    import { Component } from '@angular/core';
    
    @Component({
    selector: 'my-app',
    template: `
    <kendo-chart [transitions]="false">
    <kendo-chart-series>
    <kendo-chart-series-item [data]="seriesData">
    </kendo-chart-series-item>
    </kendo-chart-series>
    </kendo-chart>
    `
    })
    export class AppComponent {
    public seriesData: number[] = [];
    
    constructor() {
    setInterval(() => {
    // Clone the array
    const data = this.seriesData.slice(0);
    
    // Produce one random value each 100ms
    data.push(Math.random());
    
    if (data.length > 10) {
    // Keep only 10 items in the array
    data.shift();
    }
    
    // Replace with the new array instance
    this.seriesData = data;
    }, 100);
    }
    }

    绑定到 Observable

    当您将 Chart 绑定到 observable 时,组件会在每次新数据来自 observable 时自动更新它呈现的信息。 要将 Chart 绑定到 observable,请使用异步管道。

    UI组件库Kendo UI for Angular入门指南教程:图表如何绑定数据?
    import { Component } from '@angular/core';
    
    import { Observable, interval } from 'rxjs';
    import { bufferCount, map } from 'rxjs/operators';
    
    @Component({
    selector: 'my-app',
    template: `
    <kendo-chart [transitions]="false">
    <kendo-chart-series>
    <kendo-chart-series-item
    type="column" [data]="seriesData | async">
    </kendo-chart-series-item>
    </kendo-chart-series>
    </kendo-chart>
    `
    })
    export class AppComponent {
    /* Start with an empty observable */
    public seriesData: Observable<number[]>;
    
    constructor() {
    /* Produce 1 random value each 100ms
    and emit it in batches of 10. */
    this.seriesData = interval(100).pipe(
    map(i => Math.random()),
    bufferCount(10)
    );
    }
    }

    Kendo UI for Angular | 下载试用

    Kendo UI for Angular是Kendo UI系列商业产品的最新产品。Kendo UI for Angular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件,无需任何jQuery依赖关系。


    了解最新Kendo UI最新资讯,请关注Telerik中文网!

  • 相关阅读:
    BZOJ 1176: [Balkan2007]Mokia
    BZOJ 4034: [HAOI2015]T2
    BZOJ 4031: [HEOI2015]小Z的房间
    BZOJ 4128: Matrix
    JSP学习-08-JavaBean
    JSP学习-标准标签库
    电影剧本写作基础
    JSP学习-09-自定义标签
    JSP学习-07Cookie 与Session
    JSP学习-06过滤器
  • 原文地址:https://www.cnblogs.com/AABBbaby/p/15747548.html
Copyright © 2011-2022 走看看