Web Components チャート トレンドライン

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

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

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

Web Components チャート トレンドラインの例

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

EXAMPLE

DATA

TS

HTML

CSS

export class StocksHistory {
  /** gets stock OHLC prices for multiple stocks */

  public static async getMultipleStocks(): Promise<any[]> {
    // getting prices of multiples stocks asynchronously
    const dataSources: any[] = [
      //await this.getAmazonStock(),
      await this.getGoogleStock(),
      await this.getMicrosoftStock(),
      //await this.getTeslaStock()
    ];

    return new Promise<any[]>((resolve, reject) => {
      resolve(dataSources);
    });
  }

  /** gets Amazon stock OHLC prices from a .JSON file */
  public static async getAmazonStock(): Promise<StockItem[]> {
    let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
    let response = await fetch(url);
    let jsonData = await response.json();
    let stockData = this.convertData(jsonData);
    // setting data intent for Series Title, e.g. FinancialChart usage
    (stockData as any).__dataIntents = {
      close: ["SeriesTitle/Amazon"]
    };
    // console.log("fetchAmazonStock: ", stockData.length);

    return new Promise<StockItem[]>((resolve, reject) => {
      resolve(stockData);
    });
  }

  /** gets Tesla stock OHLC prices from a .JSON file */
  public static async getTeslaStock(): Promise<StockItem[]> {
    let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
    let response = await fetch(url);
    let jsonData = await response.json();
    let stockData = this.convertData(jsonData);
    // setting data intent for Series Title, e.g. FinancialChart usage
    (stockData as any).__dataIntents = {
      close: ["SeriesTitle/Tesla"]
    };
    return new Promise<StockItem[]>((resolve, reject) => {
      resolve(stockData);
    });
  }

  /** gets Microsoft stock OHLC prices from a .JSON file */
  public static async getMicrosoftStock(): Promise<StockItem[]> {
    let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
    let response = await fetch(url);
    let jsonData = await response.json();
    let stockData = this.convertData(jsonData);
    // setting data intent for Series Title, e.g. FinancialChart usage
    (stockData as any).__dataIntents = {
      close: ["SeriesTitle/Microsoft"]
    };
    return new Promise<StockItem[]>((resolve, reject) => {
      resolve(stockData);
    });
  }

  /** gets Google stock OHLC prices from a .JSON file */
  public static async getGoogleStock(): Promise<StockItem[]> {
    let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
    let response = await fetch(url);
    let jsonData = await response.json();
    let stockData = this.convertData(jsonData);
    // setting data intent for Series Title, e.g. FinancialChart usage
    (stockData as any).__dataIntents = {
      close: ["SeriesTitle/Google"]
    };
    return new Promise<StockItem[]>((resolve, reject) => {
      resolve(stockData);
    });
  }

  public static convertData(jsonData: any[]): StockItem[] {
    let stockItems: StockItem[] = [];

    for (let json of jsonData) {
      let parts = json.date.split("-"); // "2020-01-01"
      let item = new StockItem();
      item.date = new Date(parts[0], parts[1], parts[2]);
      item.open = json.open;
      item.high = json.high;
      item.low = json.low;
      item.close = json.close;
      item.volume = json.volume;
      stockItems.push(item);

    }

    return stockItems;
  }
}

export class StockItem {
  public open?: number;
  public close?: number;
  public high?: number;
  public low?: number;
  public volume?: number;

  public date?: Date;

}
tsコピー

import { IgcFinancialChartModule } from 'igniteui-webcomponents-charts';
import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
import { TrendLineType } from 'igniteui-webcomponents-core';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { StocksHistory } from './StocksHistory';

ModuleManager.register(IgcFinancialChartModule);

export class FinancialChartTrendlines {

    private chart: IgcFinancialChartComponent;
    public trendLineType: TrendLineType = TrendLineType.QuinticFit;

    constructor() {

        this.chart = document.getElementById('chart') as IgcFinancialChartComponent;
        this.chart.trendLineType = this.trendLineType;

        let trendLineSelect = document.getElementById('trendLineSelect');
        trendLineSelect!.addEventListener('change', this.onTrendlineChanged);

        StocksHistory.getMicrosoftStock().then((stocks: any[]) => {
            this.chart.dataSource = stocks;
        });
    }

    public onTrendlineChanged = (e: any) => {
        const type = e.target.value;
        switch (type) {
            case 'CubicFit':
                this.trendLineType = TrendLineType.CubicFit;
            break;
            case 'LinearFit':
                this.trendLineType = TrendLineType.LinearFit;
            break;
            case 'QuinticFit':
                this.trendLineType = TrendLineType.QuinticFit;
            break;
            case 'QuarticFit':
                this.trendLineType = TrendLineType.QuarticFit;
            break;
            case 'ExponentialFit':
                this.trendLineType = TrendLineType.ExponentialFit;
            break;
            case 'PowerLawFit':
                this.trendLineType = TrendLineType.PowerLawFit;
            break;
            case 'LogarithmicFit':
                this.trendLineType = TrendLineType.LogarithmicFit;
            break;
            case 'CumulativeAverage':
                this.trendLineType = TrendLineType.CumulativeAverage;
            break;
            case 'ExponentialAverage':
                this.trendLineType = TrendLineType.ExponentialAverage;
            break;
            case 'SimpleAverage':
                this.trendLineType = TrendLineType.SimpleAverage;
            break;
            case 'ModifiedAverage':
                this.trendLineType = TrendLineType.ModifiedAverage;
            break;
            case 'WeightedAverage':
                this.trendLineType = TrendLineType.WeightedAverage;
            break;
            case 'None':
                this.trendLineType = TrendLineType.None;
            break;
        }
        this.chart.trendLineType = this.trendLineType;
    }
}

new FinancialChartTrendlines();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>FinancialChartTrendlines</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options horizontal">
        <label class="options-label">Trendline Type:</label>
        <select id="trendLineSelect">
            <option>QuinticFit</option>
            <option>CubicFit</option>
            <option>LinearFit</option>
            <option>QuarticFit</option>
            <option>ExponentialFit</option>
            <option>PowerLawFit</option>
            <option>LogarithmicFit</option>
            <option>CumulativeAverage</option>
            <option>ExponentialAverage</option>
            <option>SimpleAverage</option>
            <option>ModifiedAverage</option>
            <option>WeightedAverage</option>
            <option>None</option>
        </select>
    </div>

    <div class="container" style="height: calc(100% - 3rem)">
        <igc-financial-chart id="chart" width="100%" height="100%"
            chart-type="Bar"
            thickness="2"
            trend-line-thickness="2"
            trend-line-period="10"
            trend-line-brushes="rgba(0, 101, 209, 1)"
            chart-title="Microsoft Trend"
            subtitle="Between 2013 and 2017"
            zoom-slider-type="None"
            is-horizontal-zoom-enabled="false"
            is-vertical-zoom-enabled="false"
            >
        </igc-financial-chart>
    </div>
</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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

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

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

EXAMPLE

DATA

TS

HTML

CSS

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 { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartCategoryTrendLineModule, IgcDataChartFinancialCoreModule, IgcDataChartFinancialModule, IgcDataChartFinancialOverlaysModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcFinancialPriceSeriesComponent } from 'igniteui-webcomponents-charts';
import { Stock2YearsItem, Stock2Years } from './Stock2Years';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartCategoryCoreModule,
    IgcDataChartCategoryTrendLineModule,
    IgcDataChartFinancialCoreModule,
    IgcDataChartFinancialModule,
    IgcDataChartFinancialOverlaysModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule
);

export class Sample {

    private chart: IgcDataChartComponent
    private xAxis: IgcCategoryXAxisComponent
    private yAxis: IgcNumericYAxisComponent
    private series1: IgcFinancialPriceSeriesComponent
    private _bind: () => void;

    constructor() {
        var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
        var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
        var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
        var series1 = this.series1 = document.getElementById('Series1') as IgcFinancialPriceSeriesComponent;

        this._bind = () => {
            xAxis.dataSource = this.stock2Years;
            series1.xAxis = this.xAxis;
            series1.yAxis = this.yAxis;
            series1.dataSource = this.stock2Years;
        }
        this._bind();
    }

    private _stock2Years: Stock2Years = null;
    public get stock2Years(): Stock2Years {
        if (this._stock2Years == null)
        {
            this._stock2Years = new Stock2Years();
        }
        return this._stock2Years;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">

    <div class="container fill">
        <igc-data-chart
        name="chart"
        id="chart"
        should-auto-expand-margin-for-initial-labels="true"
        computed-plot-area-margin-mode="Series"
        is-vertical-zoom-enabled="true"
        is-horizontal-zoom-enabled="true">
            <igc-category-x-axis
            name="xAxis"
            id="xAxis"
            label-location="OutsideBottom"
            label="month"
            interval="1"
            label-extent="30">
            </igc-category-x-axis>
            <igc-numeric-y-axis
            name="yAxis"
            id="yAxis"
            label-location="OutsideRight">
            </igc-numeric-y-axis>
            <igc-financial-price-series
            name="Series1"
            id="Series1"
            title="Stock Price"
            display-type="Candlestick"
            open-member-path="open"
            high-member-path="high"
            low-member-path="low"
            close-member-path="close"
            volume-member-path="volume"
            show-default-tooltip="true"
            trend-line-type="QuarticFit"
            trend-line-brush="dodgerblue"
            trend-line-dash-array="5, 5">
            </igc-financial-price-series>
        </igc-data-chart>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

その他のリソース

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

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

API リファレンス

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

• trendLineBrushes
• trendLinePeriod
• trendLineThickness
• trendLineType

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

• trendLineBrush
• trendLineDashArray
• trendLinePeriod
• trendLineThickness
• trendLineType