翻譯|使用教程|編輯:龔雪|2022-02-08 13:38:23.167|閱讀 321 次
概述:本文主要介紹如何設置Kendo UI for Angular圖表控件的主題皮膚,歡迎下載最新版產品體驗!
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
圖表的顏色源自激活的Kendo UI 主題,可以通過主題變量和配置自定義它們。
默認情況下,圖表高 400 像素,與容器一樣寬。 要設置圖表的尺寸,請使用內聯樣式和 CSS。
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-chart style="width: 300px; height: 200px;">
<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);
 
 
要限制圖表顯示的范圍:
app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-chart
[categoryAxis]="{ categories: categories, max: 20, labels: { rotation: 'auto'} }"
renderAs="canvas"
[pannable]="{ lock: 'y' }"
[zoomable]="{ mousewheel: { lock: 'y' } }"
>
<kendo-chart-title text="My line chart"></kendo-chart-title>
<kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
<kendo-chart-tooltip format="{0}"></kendo-chart-tooltip>
<kendo-chart-series>
<kendo-chart-series-item type="line" style="smooth" [data]="serie.data" [name]="serie.name">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent implements OnInit {
serie: any = {
name: 'My data over time',
data: []
};
categories: number[] = [];
ngOnInit() {
const baseYear = 2000;
for (let i = 0; i < 200; i++) {
this.categories.push(baseYear + i);
this.serie.data.push(Math.floor(Math.random() * 200));
}
}
}
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);
 
 
Kendo UI for Angular是Kendo UI系列商業產品的最新產品。Kendo UI for Angular是專用于Angular開發的專業級Angular組件。telerik致力于提供純粹的高性能Angular UI組件,無需任何jQuery依賴關系。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都網