Angular チャート トレンドライン

Ignite UI for Angular チャートでは、トレンドラインはトレンドの識別やデータ内のパターンの検索に役立ちます。トレンドラインは、常にチャートにバインドされたデータ ポイントの前に描画されます。積層シリーズ、シェイプ シリーズ、および範囲シリーズを除き、これらは IgxCategoryChartComponent、IgxFinancialChartComponent、および IgxDataChartComponent (積層型シリーズ、シェイプ シリーズ、範囲シリーズを除く) でサポートされています。

トレンドラインはデフォルトでオフになっていますが、trendLineType プロパティを設定することで有効にできます。また、ブラシ、期間、太さなど、トレンドラインの複数の外観プロパティを変更できます。

トレンドラインを有効にすると、ダッシュ配列を適用することもできます。これを行うには、TrendLineDashArray プロパティを数値の配列に設定します。数値配列は、トレンドラインの破線の長さを表します。

Angular チャート トレンドラインの例

次のサンプルは、QuinticFit トレンドラインが最初に適用された、2013 年から 2017 年までの Microsoft の株価トレンドを示す IgxFinancialChartComponent を示しています。適用されるトレンドラインのタイプを変更できるドロップダウンがあり、可能なすべてのトレンドライン タイプがそのドロップダウン内に一覧表示されます。

EXAMPLE

このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

Angular チャート トレンドラインのダッシュ配列の例

次のサンプルは、TrendLineDashArray プロパティを介して適用された QuarticFit 破線トレンドラインを持つ IgxFinancialPriceSeriesComponent を示す IgxDataChartComponent を示しています。

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

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)));
        }
    }
}
tsコピー

import { 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 {}
tsコピー

import { 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コピー

Edit in: Codesandbox

その他のリソース

関連するチャート機能の詳細については、以下のトピックを参照してください。

• チャート注釈
• チャートのハイライト表示

API リファレンス

IgxCategoryChartComponent コンポーネントと IgxFinancialChartComponent コンポーネントは、次の API プロパティを共有します:

• trendLineBrushes
• trendLinePeriod
• trendLineThickness
• trendLineType

IgxDataChartComponent コンポーネントでは、シリーズのほとんどのタイプに次の API プロパティがあります:

• trendLineBrush
• trendLineDashArray
• trendLinePeriod
• trendLineThickness
• trendLineType