Stockcharts 包括廣泛的觸摸支持和導航窗格，可輕松瀏覽延長的時間段。 通常，StockChart 擴展了Kendo UI圖表組件并共享其大部分功能。Stockchart組件是Kendo UI for Angular的一部分，這是一個專業級的UI庫，包含100多個組件，用于構建現代且功能豐富的應用程序。

Kendo UI for Angular最新版工具下載

概述

以下示例演示了 StockChart 的實際應用。

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

主要特點

• 導航器 — 您可以使用 StockChart 的導航器窗格來更改主窗格的日期間隔。
• StockChart支持適用于圖表的所有配置選項。

Kendo UI for Angular | 下載試用

Kendo UI for Angular是Kendo UI系列商業產品的最新產品。Kendo UI for Angular是專用于Angular開發的專業級Angular組件。telerik致力于提供純粹的高性能Angular UI組件，無需任何jQuery依賴關系。