Angular チャート トレンドライン
Ignite UI for Angular チャートでは、トレンドラインはトレンドの識別やデータ内のパターンの検索に役立ちます。トレンドラインは、常にチャートにバインドされたデータ ポイントの前に描画されます。積層シリーズ、シェイプ シリーズ、および範囲シリーズを除き、これらは IgxCategoryChartComponent
、IgxFinancialChartComponent
、および IgxDataChartComponent
(積層型シリーズ、シェイプ シリーズ、範囲シリーズを除く) でサポートされています。
トレンドラインはデフォルトでオフになっていますが、trendLineType
プロパティを設定することで有効にできます。また、ブラシ、期間、太さなど、トレンドラインの複数の外観プロパティを変更できます。
トレンドラインを有効にすると、ダッシュ配列を適用することもできます。これを行うには、TrendLineDashArray
プロパティを数値の配列に設定します。数値配列は、トレンドラインの破線の長さを表します。
Angular チャート トレンドラインの例
次のサンプルは、QuinticFit トレンドラインが最初に適用された、2013 年から 2017 年までの Microsoft の株価トレンドを示す IgxFinancialChartComponent
を示しています。適用されるトレンドラインのタイプを変更できるドロップダウンがあり、可能なすべてのトレンドライン タイプがそのドロップダウン内に一覧表示されます。
このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Angular チャート トレンドラインのダッシュ配列の例
次のサンプルは、TrendLineDashArray
プロパティを介して適用された QuarticFit 破線トレンドラインを持つ IgxFinancialPriceSeriesComponent
を示す IgxDataChartComponent
を示しています。
export class Stock2YearsItem {
public constructor(init: Partial<Stock2YearsItem>) {
Object.assign(this, init);
}
public month: string;
public open: number;
public high: number;
public low: number;
public close: number;
public volume: number;
}
export class Stock2Years extends Array<Stock2YearsItem> {
public constructor(items: Array<Stock2YearsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new Stock2YearsItem(
{
month: `2020`,
open: 41.1,
high: 41.6,
low: 41.1,
close: 41.4,
volume: 32610
}),
new Stock2YearsItem(
{
month: `FEB`,
open: 41.4,
high: 41.7,
low: 41.2,
close: 41.4,
volume: 28666
}),
new Stock2YearsItem(
{
month: `MAR`,
open: 41.3,
high: 41.3,
low: 40.7,
close: 41,
volume: 30139
}),
new Stock2YearsItem(
{
month: `APR`,
open: 41.3,
high: 41.4,
low: 39.6,
close: 39.9,
volume: 51409
}),
new Stock2YearsItem(
{
month: `MAY`,
open: 40,
high: 40.3,
low: 39.7,
close: 39.8,
volume: 37559
}),
new Stock2YearsItem(
{
month: `JUN`,
open: 39.8,
high: 39.9,
low: 39.2,
close: 39.8,
volume: 35919
}),
new Stock2YearsItem(
{
month: `JUL`,
open: 39.9,
high: 40.5,
low: 39.9,
close: 40.5,
volume: 27398
}),
new Stock2YearsItem(
{
month: `AUG`,
open: 40.4,
high: 40.7,
low: 39.1,
close: 39.4,
volume: 45960
}),
new Stock2YearsItem(
{
month: `SEP`,
open: 39,
high: 39.8,
low: 39,
close: 39.2,
volume: 34333
}),
new Stock2YearsItem(
{
month: `OCT`,
open: 39.1,
high: 39.4,
low: 38.9,
close: 39.2,
volume: 32006
}),
new Stock2YearsItem(
{
month: `NOV`,
open: 39.3,
high: 40,
low: 39,
close: 39.8,
volume: 33978
}),
new Stock2YearsItem(
{
month: `DEC`,
open: 40.1,
high: 40.4,
low: 39.9,
close: 40.4,
volume: 30616
}),
new Stock2YearsItem(
{
month: `2021`,
open: 40,
high: 40.2,
low: 39.5,
close: 40,
volume: 36689
}),
new Stock2YearsItem(
{
month: `FEB`,
open: 40.1,
high: 40.1,
low: 39.8,
close: 39.9,
volume: 22222
}),
new Stock2YearsItem(
{
month: `MAR`,
open: 40,
high: 40.1,
low: 39.8,
close: 40,
volume: 27057
}),
new Stock2YearsItem(
{
month: `APR`,
open: 40,
high: 40,
low: 39.5,
close: 39.7,
volume: 24602
}),
new Stock2YearsItem(
{
month: `MAY`,
open: 39.7,
high: 40,
low: 39.3,
close: 39.9,
volume: 42381
}),
new Stock2YearsItem(
{
month: `JUN`,
open: 40.3,
high: 40.7,
low: 39.8,
close: 39.9,
volume: 56883
}),
new Stock2YearsItem(
{
month: `JUL`,
open: 40.1,
high: 41.3,
low: 40.1,
close: 40.9,
volume: 50610
}),
new Stock2YearsItem(
{
month: `AUG`,
open: 41.1,
high: 41.2,
low: 40.4,
close: 40.5,
volume: 29637
}),
new Stock2YearsItem(
{
month: `SEP`,
open: 39,
high: 39.8,
low: 39,
close: 39.2,
volume: 34333
}),
new Stock2YearsItem(
{
month: `OCT`,
open: 39.1,
high: 39.4,
low: 38.9,
close: 39.2,
volume: 32006
}),
new Stock2YearsItem(
{
month: `NOV`,
open: 39.3,
high: 40,
low: 39,
close: 39.8,
volume: 33978
}),
new Stock2YearsItem(
{
month: `DEC`,
open: 40.1,
high: 40.4,
low: 39.9,
close: 40.4,
volume: 30616
}),
];
super(...(newItems.slice(0, items)));
}
}
}
tsimport { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartCategoryTrendLineModule, IgxDataChartFinancialCoreModule, IgxDataChartFinancialModule, IgxDataChartFinancialOverlaysModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartCategoryModule,
IgxDataChartCategoryCoreModule,
IgxDataChartCategoryTrendLineModule,
IgxDataChartFinancialCoreModule,
IgxDataChartFinancialModule,
IgxDataChartFinancialOverlaysModule,
IgxDataChartInteractivityModule,
IgxDataChartAnnotationModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { Stock2YearsItem, Stock2Years } from './Stock2Years';
import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxFinancialPriceSeriesComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("chart", { static: true } )
private chart: IgxDataChartComponent
@ViewChild("xAxis", { static: true } )
private xAxis: IgxCategoryXAxisComponent
@ViewChild("yAxis", { static: true } )
private yAxis: IgxNumericYAxisComponent
@ViewChild("series1", { static: true } )
private series1: IgxFinancialPriceSeriesComponent
private _stock2Years: Stock2Years = null;
public get stock2Years(): Stock2Years {
if (this._stock2Years == null)
{
this._stock2Years = new Stock2Years();
}
return this._stock2Years;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="container fill">
<igx-data-chart
name="chart"
#chart
shouldAutoExpandMarginForInitialLabels="true"
computedPlotAreaMarginMode="Series"
isVerticalZoomEnabled="true"
isHorizontalZoomEnabled="true">
<igx-category-x-axis
name="xAxis"
#xAxis
[dataSource]="stock2Years"
labelLocation="OutsideBottom"
label="month"
interval="1"
labelExtent="30">
</igx-category-x-axis>
<igx-numeric-y-axis
name="yAxis"
#yAxis
labelLocation="OutsideRight">
</igx-numeric-y-axis>
<igx-financial-price-series
name="Series1"
#series1
title="Stock Price"
displayType="Candlestick"
[xAxis]="xAxis"
[yAxis]="yAxis"
[dataSource]="stock2Years"
openMemberPath="open"
highMemberPath="high"
lowMemberPath="low"
closeMemberPath="close"
volumeMemberPath="volume"
showDefaultTooltip="true"
trendLineType="QuarticFit"
trendLineBrush="dodgerblue"
trendLineDashArray="5, 5">
</igx-financial-price-series>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
その他のリソース
関連するチャート機能の詳細については、以下のトピックを参照してください。
API リファレンス
IgxCategoryChartComponent
コンポーネントと IgxFinancialChartComponent
コンポーネントは、次の API プロパティを共有します:
IgxDataChartComponent
コンポーネントでは、シリーズのほとんどのタイプに次の API プロパティがあります: