Kendo UI for Angular Chart控件支持兩種渲染數(shù)據(jù)的模式——Canvas（位圖）和 SVG（矢量圖形）。

Kendo UI for Angular最新版工具下載

默認情況下，圖表以SVG格式提供其數(shù)據(jù)，您可以在渲染模式之間導航并通過設(shè)置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 ？

建議一般使用默認的 SVG 渲染模式，使用矢量圖形可確保：

• 瀏覽器縮放不會降低圖像質(zhì)量。
• 無論分辨率如何，打印件都很清晰。

何時使用Canvas？

當性能至關(guān)重要時，渲染大型儀表板和頻繁更新的圖表時——建議使用 Canvas。

瀏覽器不必為圖表維護實時 DOM 樹，這會導致：

• 更快的屏幕更新。
• 較低的內(nèi)存使用率。

不利的一面是，渲染到固定分辨率位圖會導致：

• 變焦時圖像模糊。
• 印刷質(zhì)量差。

Kendo UI for Angular | 下載試用

Kendo UI for Angular是Kendo UI系列商業(yè)產(chǎn)品的最新產(chǎn)品。Kendo UI for Angular是專用于Angular開發(fā)的專業(yè)級Angular組件。telerik致力于提供純粹的高性能Angular UI組件，無需任何jQuery依賴關(guān)系。