圖表的顏色源自激活的Kendo UI 主題，可以通過主題變量和配置自定義它們。

Kendo UI for Angular最新版工具下載

設(shè)置尺寸

默認(rèn)情況下，圖表高 400 像素，與容器一樣寬。 要設(shè)置圖表的尺寸，請使用內(nèi)聯(lián)樣式和 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);

限制顯示范圍

要限制圖表顯示的范圍：

1. 設(shè)置類別軸的min 和 max選項；
2. 啟用平移和縮放，以便用戶能夠查看其余數(shù)據(jù)。

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