UI组件库Kendo UI for Angular入门指南教程：平移和缩放

要执行平移，请拖动图表的绘图区域。

要执行缩放，请执行以下任一操作：

• 鼠标滚轮（桌面）或捏缩放（移动），或
• 按住 Shift 键并选择一个区域。

要启用平移和缩放功能，请使用pannable 和 zoomable选项。

app.component.ts

import { Component } from '@angular/core';import { data } from './data';@Component({selector: 'my-app',template: `<kendo-chart renderAs="canvas" [pannable]="true" [zoomable]="true" [categoryAxis]="categoryAxis" [valueAxis]="valueAxis"><kendo-chart-series><kendo-chart-series-item [data]="data" field="value" categoryField="category"></kendo-chart-series-item></kendo-chart-series></kendo-chart>`})export class AppComponent {public data: any[] = data;public categoryAxis: any = {max: new Date(2000, 1, 0),maxDivisions: 10};public valueAxis: any = {labels: {format: '#.00'}};}

data.ts

export const data = [];for (let idx = 0; idx < 500; idx++) {data.push({value: Math.floor(Math.random() * 100) + 1,category: new Date(2000, 0, idx)});}

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);

禁用平移和缩放方向

您可以使用锁定配置来防止轴的平移和缩放：

• 要禁用垂直方向的平移和缩放，请将 pannable.lock、zoomable.mousewheel.lock 和 zoomable.selection.lock 选项设置为’y’。
• 要禁用水平方向的平移和缩放，请将 pannable.lock、zoomable.mousewheel.lock 和 zoomable.selection.lock 选项设置为’x’。

app.component.ts

import { Component } from '@angular/core';import { data } from './data';@Component({selector: 'my-app',template: `<kendo-chart renderAs="canvas" [pannable]="{ lock: 'y' }" [zoomable]="{ mousewheel: { lock: 'y' }, selection: { lock: 'y' } }"[categoryAxis]="categoryAxis"><kendo-chart-series><kendo-chart-series-item [data]="data" field="value" categoryField="category"></kendo-chart-series-item></kendo-chart-series></kendo-chart>`})export class AppComponent {public data: any[] = data;public categoryAxis: any = {max: new Date(2000, 1, 0),maxDivisions: 10};}

data.ts

export const data = [];for (let idx = 0; idx < 500; idx++) {data.push({value: Math.floor(Math.random() * 100) + 1,category: new Date(2000, 0, idx)});}

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);

设置鼠标滚轮缩放率

默认情况下，单击鼠标滚轮会将轴范围扩大或缩小 30%。 要将缩放率设置为不同的值，请将缩放率设置为 0.01 到 0.9（1% 到 90%）范围内的数字。

app.component.ts

import { Component } from '@angular/core';import { CategoryAxis, ValueAxis } from '@progress/kendo-angular-charts';import { data } from './data';@Component({selector: 'my-app',template: `<div class="example-config"><div><label for="zoomRate">Zoom rate ({{ zoomRate | number:'1.2-2' }})</label></div><kendo-sliderid="zoomRate"[min]="0.05"[max]="0.9"[smallStep]="0.05"[(ngModel)]="zoomRate"[showButtons]="false"tickPlacement="none"></kendo-slider></div><kendo-chart renderAs="canvas" [transitions]="false"[pannable]="true" [zoomable]="{ mousewheel: { rate: zoomRate } }"[categoryAxis]="categoryAxis" [valueAxis]="valueAxis"><kendo-chart-series><kendo-chart-series-item [data]="data" field="value" categoryField="category"></kendo-chart-series-item></kendo-chart-series></kendo-chart>`})export class AppComponent {public data: any[] = data;public zoomRate = 0.3;public categoryAxis: CategoryAxis = {max: new Date(2021, 1, 0),maxDivisions: 10};public valueAxis: ValueAxis = {labels: {format: 'N2'}};}

data.ts

export const data = [];for (let idx = 0; idx < 300; idx++) {data.push({value: Math.floor(Math.random() * 100) + 1,category: new Date(2021, 0, idx)});}

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 { SliderModule } from '@progress/kendo-angular-inputs';import 'hammerjs';import { AppComponent } from './app.component';@NgModule({imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule, SliderModule ],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);

平移和缩放事件

当用户平移或缩放图表时，组件会触发以下事件，其中包含修改后的轴范围。

• dragStart—当图表开始平移时触发。 如果您阻止该事件，图表将停止平移。
• drag—在图表平移时触发。 如果您阻止该事件，则当前坐标轴范围的更改也将被阻止。
• dragEnd—在图表停止平移后触发。
• zoomStart—当图表开始缩放时触发。 如果您阻止该事件，图表将停止缩放。
• zoom—图表缩放时触发。 如果您阻止该事件，则当前坐标轴范围的更改也将被阻止。
• zoomEnd—当图表停止缩放时触发。

为了使轴包含在axisRanges 字段中，请为轴提供名称。 如果轴范围未更改，则拖动和缩放事件将不包括它。

app.component.ts

import { Component } from '@angular/core';import { data } from './data';@Component({selector: 'my-app',template: `<kendo-chart renderAs="canvas" [pannable]="true" [zoomable]="true" [categoryAxis]="categoryAxis" [valueAxis]="valueAxis"(dragStart)="onDragStart($event)" (drag)="onDrag($event)" (dragEnd)="onDragEnd($event)"(zoomStart)="onZoomStart($event)" (zoom)="onZoom($event)" (zoomEnd)="onZoomEnd($event)"><kendo-chart-series><kendo-chart-series-item [data]="data" field="value" categoryField="category"></kendo-chart-series-item></kendo-chart-series></kendo-chart>`})export class AppComponent {public data: any[] = data;public categoryAxis: any = {name: 'category',max: new Date(2000, 1, 0),maxDivisions: 10};public valueAxis: any = {name: 'value',labels: {format: '#.00'}};public onDragStart(args: any): void {console.log('dragStart', this.axisRanges(args));}public onDrag(args: any): void {console.log('drag', this.axisRanges(args));}public onDragEnd(args: any): void {console.log('dragEnd', this.axisRanges(args));}public onZoomStart(args: any): void {console.log('zoomStart', this.axisRanges(args));}public onZoom(args: any): void {console.log('zoom', this.axisRanges(args));}public onZoomEnd(args: any): void {console.log('zoomEnd', this.axisRanges(args));}private axisRanges(args: any): string {const { value, category } = args.axisRanges;const valueRange = value `value: ${ value.min } - ${ value.max };` : '';const categoryRange = category `category: ${ category.min } - ${ category.max };` : '';return valueRange + categoryRange;}}

data.ts

export const data = [];for (let idx = 0; idx < 500; idx++) {data.push({value: Math.floor(Math.random() * 100) + 1,category: new Date(2000, 0, idx)});}

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系列商业产品的最新产品。Kendo UI for Angular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件，无需任何jQuery依赖关系。