UI组件库Kendo UI for Angular入门指南教程：图表控件的渲染模式

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

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

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 /h5>

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

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

何时使用Canvas/strong>

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

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

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

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

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

Kendo UI for Angular | 下载试用

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

标签：