Kendo UI for Angular Chart使用戶能夠通過對組件應(yīng)用平移和縮放來查看特定范圍。

Kendo UI for Angular最新版工具下載

要執(zhí)行平移，請拖動圖表的繪圖區(qū)域。

要執(zhí)行縮放，請執(zhí)行以下任一操作：

• 鼠標滾輪（桌面）或捏縮放（移動），或
• 按住 Shift 鍵并選擇一個區(qū)域。

要啟用平移和縮放功能，請使用 和 選項。

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 選項設(shè)置為'y'。
• 要禁用水平方向的平移和縮放，請將 pannable.lock、zoomable.mousewheel.lock 和 zoomable.selection.lock 選項設(shè)置為'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);

設(shè)置鼠標滾輪縮放率

默認情況下，單擊鼠標滾輪會將軸范圍擴大或縮小 30%。 要將縮放率設(shè)置為不同的值，請將縮放率設(shè)置為 0.01 到 0.9（1% 到 90%）范圍內(nèi)的數(shù)字。

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-slider
id="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);

平移和縮放事件

當(dāng)用戶平移或縮放圖表時，組件會觸發(fā)以下事件，其中包含修改后的軸范圍。

• —當(dāng)圖表開始平移時觸發(fā)。 如果您阻止該事件，圖表將停止平移。
• —在圖表平移時觸發(fā)。 如果您阻止該事件，則當(dāng)前坐標軸范圍的更改也將被阻止。
• —在圖表停止平移后觸發(fā)。
• —當(dāng)圖表開始縮放時觸發(fā)。 如果您阻止該事件，圖表將停止縮放。
• —圖表縮放時觸發(fā)。 如果您阻止該事件，則當(dāng)前坐標軸范圍的更改也將被阻止。
• —當(dāng)圖表停止縮放時觸發(fā)。

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