界面组件库Kendo UI for Angular入门指南教程：图表 - 皮肤设置

设置尺寸

默认情况下，图表高 400 像素，与容器一样宽。 要设置图表的尺寸，请使用内联样式和 CSS。

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: 
})
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. 设置类别轴的min 和 max选项；
2. 启用平移和缩放，以便用户能够查看其余数据。

app.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
template:
})
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);

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_11111