Angular チャートのオーバーレイ

Angular IgxDataChartComponent を使用すると、IgxValueOverlayComponent を使用して定義した単一の数値で水平線または垂直線を配置できます。特定のシリーズの平均値や中央値などのデータを視覚化するのに役立ちます。

60 以上のリアルタイム Angular チャート を使用して、何百万ものデータ ポイントを描画し、視覚化を構築します。これは、あらゆるアプリケーション シナリオに対応する最も広範なチャート ライブラリです。

無料で試してみる

Angular 値オーバーレイの例

次の例は、いくつかの水平値オーバーレイがプロットされた縦棒チャートを示しています。

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

import { Injectable } from "@angular/core";

@Injectable()
export class SharedData {

    public static getEnergyProduction() {
        const data: any[] = [
            {
                Coal: 400000000,
                Country: "Canada",
                Gas: 175000000,
                Hydro: 350000000,
                Nuclear: 225000000,
                Oil: 100000000
            },
            {
                Coal: 925000000,
                Country: "China",
                Gas: 350000000,
                Hydro: 625000000,
                Nuclear: 400000000,
                Oil: 200000000
            },
            {
                Coal: 550000000,
                Country: "Russia",
                Gas: 250000000,
                Hydro: 425000000,
                Nuclear: 475000000,
                Oil: 200000000
            },
            {
                Coal: 450000000,
                Country: "Australia",
                Gas: 150000000,
                Hydro: 350000000,
                Nuclear: 175000000,
                Oil: 100000000
            },
            {
                Coal: 800000000,
                Country: "United States",
                Gas: 475000000,
                Hydro: 750000000,
                Nuclear: 575000000,
                Oil: 250000000
            },
            {
                Coal: 375000000,
                Country: "France",
                Gas: 350000000,
                Hydro: 325000000,
                Nuclear: 275000000,
                Oil: 150000000
            }
        ];
        return data;
    }

    public static getItems(startValue: number, maxPoints: number, useShortLabels?: boolean): any[] {

        const data: any[] = [];
        let value = startValue;
        for (let i = 0; i <= maxPoints; i++) {
            value += Math.random() * 4.0 - 2.0;
            const v = Math.round(value);
            let l = i.toString();
            if (useShortLabels) {
                l = this.toShortString(i);
            }
            data.push({ Label: l, Value: v });
        }
        return data;
    }

    public static getTemperatures(startValue: number, startYear: number, endYear: number): any[] {
        const data: any[] = [];
        let value = startValue;
        for (let i = startYear; i <= endYear; i++) {
            value += (Math.random() - 0.5) * 0.5;
            const high = value + (Math.random() * 2);
            const low = value - (Math.random() * 2);
            const v = Math.abs(Math.round(value * 10) / 10);
            const h = Math.abs(Math.round(high * 10) / 10);
            const l = Math.abs(Math.round(low * 10) / 10);
            data.push({ Label: i.toString(), Value: v, High: h, Low: l });
        }
        return data;
    }

    public static getLastItem(array: any[]): any {
        if (array.length === 0) {
            return null;
        }
        return array[array.length - 1];
    }

    public static getNewItem(array: any[], index: number): any {
        const lastItem = this.getLastItem(array);
        const newValue = lastItem.Value + Math.random() * 4.0 - 2.0;
        return { Label: index.toString(), Value: newValue };
    }

    public static toShortString(largeValue: number): string {
        let roundValue: number;

        if (largeValue >= 1000000) {
            roundValue = Math.round(largeValue / 100000) / 10;
            return roundValue + "m";
        }
        if (largeValue >= 1000) {
            roundValue = Math.round(largeValue / 100) / 10;
            return roundValue + "k";
        }

        roundValue = Math.round(largeValue);
        return roundValue + "";
    }

    public static addDays(date: Date, days: number): Date {
        date.setDate(date.getDate() + days);
        return date;
    }
}
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, IgxValueOverlayModule, IgxLegendModule } from "igniteui-angular-charts";
import { SharedData } from "./SharedData";


@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxDataChartCoreModule,
    IgxDataChartCategoryModule,
    IgxValueOverlayModule,
    IgxLegendModule
],
  providers: [SharedData],
schemas: []
})
export class AppModule {}
tsコピー

import { Component, OnInit } from "@angular/core";

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html"
})
export class AppComponent {

    public data: any[];

    constructor() {
        this.initData();
    }

    public initData() {
        this.data = [
            { Label: 1, Value: 1.0 },
            { Label: 2, Value: 2.0 },
            { Label: 3, Value: 6.0 },
            { Label: 4, Value: 8.0 },
            { Label: 5, Value: 2.0 },
            { Label: 6, Value: 6.0 },
            { Label: 7, Value: 4.0 },
            { Label: 8, Value: 2.0 },
            { Label: 9, Value: 1.0 }
        ];
    }
}
tsコピー

<div class="container vertical">
    <igx-legend #legend orientation="horizontal"></igx-legend>

    <igx-data-chart #chart height="100%" width="100%" [dataSource]="data">
        <igx-category-x-axis #xAxis label="Label"></igx-category-x-axis>
        <igx-numeric-y-axis #yAxis minimumValue=0 maximumValue=10></igx-numeric-y-axis>

        <igx-column-series [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Value" showDefaultTooltip=true
            markerType="None"></igx-column-series>

        <igx-value-overlay [axis]="yAxis" value=2.0 thickness=5></igx-value-overlay>
        <igx-value-overlay [axis]="yAxis" value=3.6 thickness=5></igx-value-overlay>
        <igx-value-overlay [axis]="yAxis" value=5.8 thickness=5></igx-value-overlay>
        <igx-value-overlay [axis]="yAxis" value=1.0 thickness=5></igx-value-overlay>
        <igx-value-overlay [axis]="yAxis" value=8.0 thickness=5></igx-value-overlay>
        <igx-value-overlay [axis]="yAxis" value=7.0 thickness=5></igx-value-overlay>
        <igx-value-overlay [axis]="yAxis" value=5.0 thickness=5></igx-value-overlay>

    </igx-data-chart>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

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

Angular 値オーバーレイのプロパティ

データバインディングに DataSource を使用する他のシリーズ タイプとは異なり、値オーバーレイは ValueMemberPath プロパティを使用して単一の数値をバインドします。さらに、値オーバーレイでは、使用する単一の axis を定義する必要があります。X 軸を使用する場合、値のオーバーレイは垂直線になり、Y 軸を使用する場合は、水平線になります。

数値の X 軸または Y 軸を使用する場合、ValueMemberPath プロパティは、値のオーバーレイを描画する軸上の実際の数値を反映する必要があります。カテゴリ X または Y 軸を使用する場合、ValueMemberPath は、値オーバーレイを表示するカテゴリのインデックスを反映する必要があります。

数値オーバーレイを角度角軸で使用すると、チャートの中心からの線として表示され、半径半径軸を使用すると、円として表示されます。

IgxValueOverlayComponent 外観プロパティは、IgxSeriesComponent から継承されているため、例えば brush と thickness を使用でき、他のタイプのシリーズと同じように機能します。

IgxValueOverlayComponent に軸注釈を表示して、所有する軸にオーバーレイの値を表示することもできます。これを示すために、isAxisAnnotationEnabled プロパティを true に設定できます。

Angular 値レイヤー

Angular チャート コンポーネントは、値の線を使用して、最小値、最大値、平均値などのデータのさまざまな焦点を示す機能も公開します。

IgxCategoryChartComponent および IgxFinancialChartComponent コンポーネントに IgxValueLayerComponent を適用するには、チャート上で valueLines プロパティを設定します。このプロパティは、ValueLayerValueMode 列挙体のコレクションを受け取ります。複数の ValueLayerValueMode 列挙をチャートの valueLines コレクションに追加することで、同じチャート内で複数の値レイヤーを組み合わせたりできます。

IgxDataChartComponent では、これは、チャートの IgxSeriesComponent コレクションに IgxValueLayerComponent を追加し、次に valueMode プロパティを ValueLayerValueMode 列挙の 1 つに設定することによって行われます。これらの各列挙とその意味を以下に示します。

• Auto: ValueLayerValueMode 列挙体のデフォルト値モード。
• Average: 複数の値の線を適用して、チャートにプロットされた各系列の平均値を呼び出します。
• GlobalAverage: 単一の値線を適用して、チャート内のすべての系列値の平均を呼び出します。
• GlobalMaximum: 単一の値線を適用して、チャート内のすべての系列値の絶対最大値を呼び出します。
• GlobalMinimum: 単一の値線を適用して、チャート内のすべての系列値の絶対最小値を呼び出します。
• Maximum: チャートにプロットされた各系列の最大値を示すために、複数の値線を適用する可能性があります。
• Minimum: チャートにプロットされた各系列の最小値を示すために、複数の値線を適用する可能性があります。

IgxValueLayerComponent 要素を使用するときに特定のシリーズが考慮されないようにする場合は、レイヤーに targetSeries プロパティを設定できます。これにより、レイヤーは定義したシリーズを強制的にターゲットにするようになります。単一の IgxDataChartComponent 内に必要な数の IgxValueLayerComponent 要素を含めることができます。

次のサンプルは、IgxCategoryChartComponent 内のさまざまな valueLines の使用法を示しています。

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

export class CountryRenewableElectricityItem {
    public constructor(init: Partial<CountryRenewableElectricityItem>) {
        Object.assign(this, init);
    }

    public year: string;
    public europe: number;
    public china: number;
    public america: number;

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
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 { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts';
import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxPropertyEditorPanelModule,
    IgxLegendModule,
    IgxCategoryChartModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxPropertyEditorPropertyDescriptionChangedEventArgs, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';
import { IgxCategoryChartComponent, MarkerType, MarkerType_$type } from 'igniteui-angular-charts';
import { EnumUtil } from 'igniteui-angular-core';
import { IgxLegendComponent } from 'igniteui-angular-charts';
import { IgxPropertyEditorPanelComponent } from 'igniteui-angular-layouts';

import { defineAllComponents } from 'igniteui-webcomponents';

defineAllComponents();

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent implements AfterViewInit
{

    @ViewChild("legend", { static: true } )
    private legend: IgxLegendComponent
    @ViewChild("propertyEditor", { static: true } )
    private propertyEditor: IgxPropertyEditorPanelComponent
    @ViewChild("valueListEditor", { static: true } )
    private valueListEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxCategoryChartComponent
    private _countryRenewableElectricity: CountryRenewableElectricity = null;
    public get countryRenewableElectricity(): CountryRenewableElectricity {
        if (this._countryRenewableElectricity == null)
        {
            this._countryRenewableElectricity = new CountryRenewableElectricity();
        }
        return this._countryRenewableElectricity;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            LegendDescriptionModule.register(context);
            CategoryChartDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

    public editorChangeUpdateValueLines({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void {
        var item = sender as IgxPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart;

        var valueLineType = item.primitiveValue;
        chart.valueLines = valueLineType;
    }

}

tsコピー

<div class="container vertical sample">
  <div class="options vertical">
      <igx-property-editor-panel
      name="PropertyEditor"
      #propertyEditor
      [componentRenderer]="renderer"
      [target]="chart"
      descriptionType="CategoryChart"
      isHorizontal="true"
      isWrappingEnabled="true">
          <igx-property-editor-property-description
          propertyPath="ValueListHandler"
          name="ValueListEditor"
          #valueListEditor
          label="Value List"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownValues="Auto, Average, GlobalAverage, GlobalMaximum, GlobalMinimum, Maximum, Minimum"
          dropDownNames="Auto, Average, GlobalAverage, GlobalMaximum, GlobalMinimum, Maximum, Minimum"
          primitiveValue="Auto"
          (changed)="this.editorChangeUpdateValueLines($event)">
          </igx-property-editor-property-description>
      </igx-property-editor-panel>
  </div>
  <div class="legend-title">
      Renewable Electricity Generated
  </div>
  <div class="legend">
      <igx-legend
      name="legend"
      #legend
      orientation="Horizontal">
      </igx-legend>
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      [dataSource]="countryRenewableElectricity"
      includedProperties="year, america, europe"
      chartType="Column"
      [legend]="legend"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      crosshairsDisplayMode="None"
      isTransitionInEnabled="false"
      yAxisMinimumValue="0"
      yAxisMaximumValue="100">
      </igx-category-chart>
  </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

Angular ファイナンシャル オーバーレイ

Angular 株価チャートに組み込みのファイナンシャル オーバーレイとインジケーターをプロットすることもできます。

その他のリソース

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

• チャート注釈
• 縦棒チ株価チャートャート
• 折れ線チャート
• 株価チャート

API リファレンス

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

• IgxDataChartComponent
• ItemsSource
• IgxValueOverlayComponent
• axis
• brush
• IsAxisAnnotationsEnabled
• IgxSeriesComponent
• thickness
• IgxValueLayerComponent
• ValueLayerValueMode
• valueLines