翻譯|使用教程|編輯:龔雪|2022-01-10 10:18:53.787|閱讀 207 次
概述:本文主要介紹Kendo UI for Angular圖表控件的渲染模式,歡迎下載最新版產品體驗!
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
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 渲染模式,使用矢量圖形可確保:
當性能至關重要時,渲染大型儀表板和頻繁更新的圖表時——建議使用 Canvas。
瀏覽器不必為圖表維護實時 DOM 樹,這會導致:
不利的一面是,渲染到固定分辨率位圖會導致:
Kendo UI for Angular是Kendo UI系列商業產品的最新產品。Kendo UI for Angular是專用于Angular開發的專業級Angular組件。telerik致力于提供純粹的高性能Angular UI組件,無需任何jQuery依賴關系。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都網