欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

UI组件库Kendo UI for Angular入门指南 - 图表的渲染模式 UIKendo UIAngulartelerik 

程序员文章站 2022-03-03 17:40:30
...

Kendo UI for Angular Chart控件支持两种渲染数据的模式——Canvas(位图)和 SVG(矢量图形)。

Kendo UI for Angular最新版工具下载

默认情况下,图表以SVG格式提供其数据,您可以在渲染模式之间导航并通过设置renderAs属性来修改它们。

UI组件库Kendo UI for Angular入门指南 - 图表的渲染模式
            
    
    
        UIKendo UIAngulartelerik 

app.component.ts

 

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<kendo-chart renderAs="canvas">
<kendo-chart-title text="Sample Chart"></kendo-chart-title>
<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];
}

 

app.module.ts

 

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})

export class AppModule { }

 

main.ts

 

import './polyfills';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

 

何时使用 SVG 

建议一般使用默认的 SVG 渲染模式,使用矢量图形可确保:

  • 浏览器缩放不会降低图像质量。
  • 无论分辨率如何,打印件都很清晰。
何时使用Canvas?

当性能至关重要时,渲染大型仪表板和频繁更新的图表时——建议使用 Canvas。

浏览器不必为图表维护实时 DOM 树,这会导致:

  • 更快的屏幕更新。
  • 较低的内存使用率。

不利的一面是,渲染到固定分辨率位图会导致:

  • 变焦时图像模糊。
  • 印刷质量差。

Kendo UI for Angular | 下载试用

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


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