Web Components チャート ナビゲーション

Ignite UI for Web Components チャートを使用すると、マウス、キーボード、およびタッチを介してインタラクティブなパンやズームが可能になります。

Web Components チャート ナビゲーションの例

次の例は、使用可能なすべてのパンやズームのオプションを示しています。ボタンを使用して例を操作したり、ドロップダウンまたはチェックボックスを使用して目的のオプションを選択したりできます。

EXAMPLE

DATA

TS

HTML

CSS

export class SampleFinancialData {

    public static create(items?: number): any[] {
        // initial values
        let v = 10000;
        let o = 500;
        let h = Math.round(o + (Math.random() * 5));
        let l = Math.round(o - (Math.random() * 5));
        let c = Math.round(l + (Math.random() * (h - l)));

        if (items === undefined) {
            items = 200;
        }

        const today = new Date();
        const end = new Date(today.getFullYear(), 11, 1);
        let time = this.addDays(end, -items);

        const data: any[] = [];
        for (let i = 0; i < items; i++) {
            const date = time.toDateString();
            const label = this.getShortDate(time, false);
            // adding new data item
            data.push({"Time": time, "Date": date, "Label": label, "Close": c, "Open": o, "High": h, "Low": l, "Volume": v});
            // generating new values
            const mod = Math.random() - 0.45;
            o = Math.round(o + (mod * 5 * 2));
            v = Math.round(v + (mod * 5 * 100));
            h = Math.round(o + (Math.random() * 5));
            l = Math.round(o - (Math.random() * 5));
            c = Math.round(l + (Math.random() * (h - l)));
            time = this.addDays(time, 1);
        }
        return data;
    }

    public static addDays(dt: Date, days: number): Date {
        return new Date(dt.getTime() + days * 24 * 60 * 60 * 1000);
    }

    public static getShortDate(dt: Date, showYear: boolean): string {
        const months = [
            "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        ];
        const ind = dt.getMonth();
        const day = dt.getDay() + 1;
        let label = months[ind] + " " + day;
        if (showYear) {
            label += " " +  dt.getFullYear();
        }
        return label;
    }
}
tsコピー

import { ModuleManager } from 'igniteui-webcomponents-core';
// data chart's modules:
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
// financial series modules:
import { IgcDataChartFinancialModule } from 'igniteui-webcomponents-charts';
// data chart's elements:
import { IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcCategoryXAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcFinancialPriceSeriesComponent } from 'igniteui-webcomponents-charts';
import { InteractionState } from 'igniteui-webcomponents-core';
import { ModifierKeys } from 'igniteui-webcomponents-core';
import { SampleFinancialData } from './SampleFinancialData';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartFinancialModule,
    IgcDataChartInteractivityModule,
);

export class DataChartNavigation {

    private chart: IgcDataChartComponent;

    constructor() {

        this.chart = document.getElementById('chart') as IgcDataChartComponent;
        this.chart.dataSource = SampleFinancialData.create();

        this.chart.actualWindowScaleHorizontal = 0.60;
        this.chart.actualWindowScaleVertical = 0.60;
        this.chart.actualWindowPositionVertical = 0.20;
        this.chart.actualWindowPositionHorizontal = 0.20;

        const panUp = document.getElementById('panUp') as HTMLButtonElement;
        panUp!.addEventListener('click', this.onPanUpClick);

        const panLeft = document.getElementById('panLeft') as HTMLButtonElement;
        panLeft!.addEventListener('click', this.onPanLeftClick);

        const zoomIn = document.getElementById('zoomIn') as HTMLButtonElement;
        zoomIn!.addEventListener('click', this.onZoomInClick);

        const panDown = document.getElementById('panDown') as HTMLButtonElement;
        panDown!.addEventListener('click', this.onPanDownClick);

        const panRight = document.getElementById('panRight') as HTMLButtonElement;
        panRight!.addEventListener('click', this.onPanRightClick);

        const zoomOut = document.getElementById('zoomOut') as HTMLButtonElement;
        zoomOut!.addEventListener('click', this.onZoomOutClick);

        const panModSelect = document.getElementById('panModSelect') as HTMLSelectElement;
        panModSelect!.value = 'Alt';
        panModSelect!.addEventListener('change', this.onPanModifierChange);

        const interactionSelect = document.getElementById('interactionSelect') as HTMLSelectElement;
        interactionSelect!.value = 'DragPan';
        interactionSelect!.addEventListener('change', this.onDefaultInteractionChange);

        const dragModSelect = document.getElementById('dragModSelect') as HTMLSelectElement;
        dragModSelect!.value = 'Shift';
        dragModSelect!.addEventListener('change', this.onDragModifierChange);

        const zoomEnabled = document.getElementById('zoomEnabled') as HTMLInputElement;
        zoomEnabled!.checked = true;
        zoomEnabled!.addEventListener('change', this.onZoomEnabledChange);
    }

    public onDefaultInteractionChange = (e: any) => {
        switch (e.target.value) {
            case 'DragZoom':
                this.chart.defaultInteraction = InteractionState.DragZoom;
                break;
            case 'DragPan':
                this.chart.defaultInteraction = InteractionState.DragPan;
                break;
            case 'None':
                this.chart.defaultInteraction = InteractionState.None;
                break;
        }
    }

    public onPanModifierChange = (e: any) => {
        switch (e.target.value) {
            case 'Alt':
                this.chart.panModifier = ModifierKeys.Alt;
                break;
            case 'Control':
                this.chart.panModifier = ModifierKeys.Control;
                break;
            case 'Shift':
                this.chart.panModifier = ModifierKeys.Shift;
                break;
            case 'Windows':
                this.chart.panModifier = ModifierKeys.Windows;
                break;
            case 'Apple':
                this.chart.panModifier = ModifierKeys.Apple;
                break;
            case 'None':
                this.chart.panModifier = ModifierKeys.None;
                break;
        }
    }

    public onDragModifierChange = (e: any) => {
        switch (e.target.value) {
            case 'Alt':
                this.chart.dragModifier = ModifierKeys.Alt;
                break;
            case 'Control':
                this.chart.dragModifier = ModifierKeys.Control;
                break;
            case 'Shift':
                this.chart.dragModifier = ModifierKeys.Shift;
                break;
            case 'Windows':
                this.chart.dragModifier = ModifierKeys.Windows;
                break;
            case 'Apple':
                this.chart.dragModifier = ModifierKeys.Apple;
                break;
            case 'None':
                this.chart.dragModifier = ModifierKeys.None;
                break;
        }
    }

    public onZoomEnabledChange = (e: any) => {
        const isZoomEnabled = e.target.checked;
        this.chart.isHorizontalZoomEnabled = isZoomEnabled;
        this.chart.isVerticalZoomEnabled = isZoomEnabled;
    }

    public onPanUpClick = (e: any) => {
        this.chart.actualWindowPositionVertical -= 0.05;
    }

    public onPanDownClick = (e: any) => {
        this.chart.actualWindowPositionVertical += 0.05;
    }

    public onPanLeftClick = (e: any) => {
        this.chart.actualWindowPositionHorizontal -= 0.05;
    }

    public onPanRightClick = (e: any) => {
        this.chart.actualWindowPositionHorizontal += 0.05;
    }

    public onZoomOutClick = (e: any) => {
        if (this.chart.actualWindowPositionHorizontal > 0.025) {
            this.chart.actualWindowPositionHorizontal -= 0.025;
        }
        if (this.chart.actualWindowPositionVertical > 0.025) {
            this.chart.actualWindowPositionVertical -= 0.025;
        }

        if (this.chart.actualWindowScaleHorizontal < 1.0) {
            this.chart.actualWindowScaleHorizontal += 0.05;
        }
        if (this.chart.actualWindowScaleVertical < 1.0) {
            this.chart.actualWindowScaleVertical += 0.05;
        }
    }

    public onZoomInClick = (e: any) => {
        if (this.chart.actualWindowPositionHorizontal < 1.0) {
            this.chart.actualWindowPositionHorizontal += 0.025;
        }
        if (this.chart.actualWindowPositionVertical < 1.0) {
            this.chart.actualWindowPositionVertical += 0.025;
        }

        if (this.chart.actualWindowScaleHorizontal > 0.05) {
            this.chart.actualWindowScaleHorizontal -= 0.05;
        }
        if (this.chart.actualWindowScaleVertical > 0.05) {
            this.chart.actualWindowScaleVertical -= 0.05;
        }
    }
}

new DataChartNavigation();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartNavigation</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">
        <div class="options vertical" style="width: 100px">
            <button id="panUp">Pan Up</button>
            <button id="panDown">Pan Down</button>
        </div>
        <div class="options vertical" style="width: 100px">
            <button id="panLeft">Pan Left</button>
            <button id="panRight">Pan Right</button>
        </div>
        <div class="options vertical" style="width: 100px">
            <button id="zoomIn">Zoom In</button>
            <button id="zoomOut">Zoom Out</button>
        </div>
        <div class="options vertical" style="width: 120px; align-self: center">
            <label class="options-label" style="margin: 5px">Pan Modifier:</label>
            <label class="options-label" style="margin: 5px">Zoom Modifier:</label>
        </div>
        <div class="options vertical" style="width: 100px">
            <select id="panModSelect" style="margin: 5px">
                <option>Alt</option>
                <option>Control</option>
                <option>Shift</option>
                <option>Windows</option>
                <option>Apple</option>
                <option>None</option>
            </select>
            <select id="dragModSelect" style="margin: 5px">
                <option>Alt</option>
                <option>Control</option>
                <option>Shift</option>
                <option>Windows</option>
                <option>Apple</option>
                <option>None</option>
            </select>
        </div>
        <div class="options vertical" style="width: 150px; align-self: center">
            <label class="options-label" style="margin: 5px;">Interaction:</label>
            <label class="options-label" style="margin: 5px;">Zooming:</label>
        </div>
        <div class="options vertical" style="width: 100px">
            <select id="interactionSelect" style="margin: 5px">
                <option>DragZoom</option>
                <option>DragPan</option>
                <option>None</option>
            </select>
            <input id="zoomEnabled" class="options-item" type="checkbox" @onchange="OnEnableZoomingChange" checked="@IsZoomingEnabled" />
        </div>
    </div>

    <div class="container vertical">
        <igc-data-chart
            id="chart"
            width="100%"
            height="100%"
            subtitle="Stock Prices Series in Candlestick Display Type"
            subtitle-top-margin="10"
            is-horizontal-zoom-enabled="true"
            is-vertical-zoom-enabled="true"
            pan-modifier="Alt"
            drag-modifier="Shift"
            default-interaction="DragPan">
            <igc-category-x-axis
                name="xAxis"
                label="Label"></igc-category-x-axis>
            <igc-numeric-y-axis
                name="yAxis"
                title="Amount (in USD)"
                title-right-margin="10"
                label-right-margin="10"
                label-horizontal-alignment="Left"
                label-location="OutsideRight"></igc-numeric-y-axis>
            <igc-financial-price-series
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                display-type="Candlestick"
                open-member-path="Open"
                close-member-path="Close"
                high-member-path="High"
                low-member-path="Low"
                volume-member-path="Volume"
                show-default-tooltip="true"
                is-transition-in-enabled="true"
                title="Price"></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

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

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

ユーザー インタラクションによるチャート ナビゲーション

ズームがデフォルトでオンになっているかどうかは、使用しているチャートによって異なります。IgcCategoryChartComponent を使用している場合、デフォルトでオンになっていますが、IgcDataChartComponent ではオフです。+UI でナビゲーションを有効または無効にするには、ズームを無効にする方向に応じて、チャートの isHorizontalZoomEnabled プロパティおよび/または isVerticalZoomEnabled プロパティを設定する必要があります。

またマウスやタッチでズームまたはパンニングできます。チャートの defaultInteraction プロパティは、マウスクリック イベントやタッチ イベントで何が起こるかを決定します。このプロパティはデフォルトで DragZoom に設定されており、ズームを有効に設定すると、クリックしてドラッグした際にプロット領域の上に四角形のプレビューが配置され、グラフのズーム領域になります。この defaultInteraction プロパティは、パンニングを許可する場合は DragPan、これらの操作を禁止する場合は None に設定することもできます。

タッチ、マウスとキーボードによるチャート ナビゲーション

Web Components データ チャートのナビゲーションは、タッチ、マウスまたはキーボードのいずれかを使用して発生します。以下の操作は、デフォルトで以下のタッチ、マウスまたはキーボード操作を使用して呼び出すことができます。

• パン: キーボードの矢印キーを使用するか、Shift キーを押したまま、マウスでクリックしてドラッグするか、タッチで指を押して移動します。
• ズームイン: キーボードの PageUp キーを使用するか、マウスホイールを上に回転させるか、ピンチしてタッチでズームインします。
• ズームアウト: キーボードの PageDown キーを使用するか、マウスホイールを下に回転させるか、ピンチしてタッチでズームアウトします。
• チャート プロット領域に合わせる: キーボードのホームキーを使用します。これに対するマウスまたはタッチ操作はありません。
• 領域ズーム: defaultInteraction プロパティをデフォルトの DragZoom に設定して、プロット領域内でマウスをクリックしてドラッグします。

ズーム操作とパン操作は、それぞれ dragModifier プロパティと panModifier プロパティを設定し、修飾キーを使用して有効にすることもできます。これらのプロパティは以下の修飾キーに設定することができ、押すと対応する操作が実行されます。

修飾値	対応するキー
Shift	Shift
Control	Ctrl
Windows	Win
Apple	Apple
None	なし

スクロールバーを使用したチャート ナビゲーション

チャートは、verticalViewScrollbarMode プロパティと horizontalViewScrollbarMode プロパティを有効にすることでスクロールできます。

これらは、次のオプションに構成できます:

• Persistent - チャートがズームインされている限り、スクロールバーは常に表示されたままになり、完全にズームアウトされるとフェードアウトします。
• Fading - スクロールバーは使用後に消え、マウスがその位置に近づくと再び表示されます。
• FadeToLine - ズームを使用していないときは、スクロールバーが細い線に縮小されます。
• None - 既定値で、スクロールバーは表示されません。

次の例は、スクロールバーを有効にする方法を示しています。

EXAMPLE

DATA

TS

HTML

CSS

//begin async data
export class MultipleStocks extends Array<Array<StockItem>> {
    public static async fetch(): Promise<MultipleStocks> {
        const dataSources: any[] = [
          //await this.getAmazonStock(),
          await this.getGoogleStock(),
          await this.getAmazonStock(),
          //await this.getTeslaStock()
        ];
        return new Promise<MultipleStocks>((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],13,0,0);
        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;

  }
//end async datatsコピー

import { IgcFinancialChartModule, IgcDataChartInteractivityModule, IgcLegendModule } from 'igniteui-webcomponents-charts';
import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
import { MultipleStocks } from './MultipleStocks';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcFinancialChartModule,
    IgcDataChartInteractivityModule,
    IgcLegendModule
);

export class Sample {

    private chart: IgcFinancialChartComponent
    private _bind: () => void;

    constructor() {
        var chart = this.chart = document.getElementById('chart') as IgcFinancialChartComponent;

        this._bind = () => {
            chart.dataSource = this.multipleStocks;
        }
        this._bind();
    }

    private _multipleStocks: MultipleStocks = null;
    private _isFetching: boolean = false;
    public get multipleStocks(): MultipleStocks {
        if (this._multipleStocks == null && !this._isFetching)
        {
            this._isFetching = true;
            ( async () => { this._multipleStocks = await (await MultipleStocks.fetch()); if ((this as any)._bind) { (this as any)._bind(); }  })();
        }
        return this._multipleStocks;
    }

}

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-financial-chart
        name="chart"
        id="chart"
        is-toolbar-visible="false"
        is-vertical-zoom-enabled="true"
        is-horizontal-zoom-enabled="true"
        vertical-view-scrollbar-mode="Fading"
        horizontal-view-scrollbar-mode="Persistent"
        zoom-slider-type="None"
        window-rect="0, 0, 0.5, 1">
        </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

コードによるチャート ナビゲーション

チャートのコード ナビゲーションは、IgcDataChartComponent コントロールにのみ使用できます。

Web Components データ チャートは、チャートでズームまたはパン操作が行われるたびに更新されるいくつかのナビゲーション プロパティを提供します。各プロパティは、チャートでズームやパンニングするためにコードで設定できます。以下は、これらのプロパティの一覧です。

• windowPositionHorizontal: コンテンツ ビュー長方形の X 部分を表す数値は、チャートで表示されます。
• windowPositionVertical: 数値は、チャートに表示されるコンテンツビュー四角形のの Y 部分を表します。
• windowRect: 長方形を表す Rect オブジェクトは、現在ビューにあるチャート部分を表します。例えば、windowRect の "0, 0, 1, 1" はチャート全体になります。
• windowScaleHorizontal: チャートで表示されるコンテンツ ビュー長方形の幅部分を表す数値。
• windowScaleVertical: チャートで表示されるコンテンツ ビュー長方形の高さ部分を表す数値。

その他のリソース

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

• チャート ツールチップ
• チャート トレンドライン

API リファレンス

以下は、上記のセクションで説明した API メンバーのリストです。

• defaultInteraction
• dragModifier
• isHorizontalZoomEnabled
• isVerticalZoomEnabled
• panModifier
• IgcCategoryChartComponent
• IgcDataChartComponent
• IgcFinancialChartComponent