Stockcharts 包括廣泛的觸摸支持和導(dǎo)航窗格，可輕松瀏覽延長(zhǎng)的時(shí)間段。 通常，StockChart 擴(kuò)展了Kendo UI圖表組件并共享其大部分功能。Stockchart組件是Kendo UI for Angular的一部分，這是一個(gè)專業(yè)級(jí)的UI庫(kù)，包含100多個(gè)組件，用于構(gòu)建現(xiàn)代且功能豐富的應(yīng)用程序。

Kendo UI for Angular最新版工具下載

概述

以下示例演示了 StockChart 的實(shí)際應(yīng)用。

app.component.ts

import { Component } from '@angular/core';
import { StockDataService } from './stock-data.service';

@Component({
selector: 'my-app',
template: `
<kendo-stockchart>
<kendo-chart-title text="The Boeing Company\nNYSE:BA">
</kendo-chart-title>
<kendo-chart-series>
<kendo-chart-series-item
type="candlestick"
[data]="data"
openField="Open"
closeField="Close"
lowField="Low"
highField="High"
categoryField="Date">
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-navigator>
<kendo-chart-navigator-select [from]="from" [to]="to">
</kendo-chart-navigator-select>
<kendo-chart-navigator-series>
<kendo-chart-navigator-series-item type="area" [data]="data" field="Close" categoryField="Date">
</kendo-chart-navigator-series-item>
</kendo-chart-navigator-series>
</kendo-chart-navigator>
</kendo-stockchart>
`
})
export class AppComponent {

public data: any[] = [];
public from: Date = new Date('2009/02/05');
public to: Date = new Date('2011/10/07');

constructor(private service: StockDataService) {
this.service.get().then((data) => {
this.data = data;
});
}
}

app.module.ts

import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { StockChartModule } from '@progress/kendo-angular-charts';
import { AppComponent } from './app.component';
import { StockDataService } from './stock-data.service';

import 'hammerjs';

@NgModule({
bootstrap: [ AppComponent ],
declarations: [ AppComponent ],
imports: [ BrowserModule, BrowserAnimationsModule, HttpClientModule, HttpClientJsonpModule , StockChartModule ],
providers: [ StockDataService ]
})
export class AppModule {}

stock-data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

@Injectable()
export class StockDataService {
private url = '//demos.telerik.com/kendo-ui/service/StockData';

constructor(private http: HttpClient) {
}

public get(filter?: any): Promise<any[]> {
return new Promise<any[]>((resolve: Function) => {
this.http.jsonp(this.url + this.getOptions(filter), 'callback')
.subscribe(result => resolve(result));
});
}

private getOptions(filter: any): string {
let params = new HttpParams();

if (filter) {
const filters = {
logic: 'and',
filters: [{
field: 'Date',
operator: 'gte',
value: filter.from
}, {
field: 'Date',
operator: 'lt',
value: filter.to
}]
};

params = params.append('filter', JSON.stringify(filters));
}

return params.keys.length ? '&' + params.toString() : '';
}
}

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

主要特點(diǎn)

• 導(dǎo)航器 — 您可以使用 StockChart 的導(dǎo)航器窗格來(lái)更改主窗格的日期間隔。
• StockChart支持適用于圖表的所有配置選項(xiàng)。

Kendo UI for Angular | 下載試用

Kendo UI for Angular是Kendo UI系列商業(yè)產(chǎn)品的最新產(chǎn)品。Kendo UI for Angular是專用于Angular開(kāi)發(fā)的專業(yè)級(jí)Angular組件。telerik致力于提供純粹的高性能Angular UI組件，無(wú)需任何jQuery依賴關(guān)系。