Angular スパークライン

Ignite UI for Angular スパークラインは、軽量なチャート コントロールです。グリッド セル内などのコンパクトなレイアウト内でのレンダリングを目的としていますが、単独でレンダリングすることもできます。Sparkline には、チャートの種類、マーカー、範囲、トレンドライン、不明な値のプロット、ツールチップなど、構成およびカスタマイズが可能ないくつかの視覚的要素とそれに対応する機能があります。

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

無料で試してみる

Angular スパークラインの例

次の例は、使用可能なすべての異なる Sparkline のタイプを示しています。タイプは displayType プロパティの設定により定義されます。displayType プロパティが指定されていない場合は、既定では Line 型が表示されます。

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

export class SharedData {

    public static getSharedData() {
        const data: any[] = [
            { Label: 4, Value: 4 },
            { Label: 5, Value: 5 },
            { Label: 2, Value: 2 },
            { Label: 7, Value: 7 },
            { Label: -1, Value: -1 },
            { Label: 3, Value: 3 },
            { Label: -2, Value: -2 },
            { Label: 5, Value: 5 },
            { Label: 2, Value: 2 },
            { Label: 6, Value: 6 }
        ];
        return data;
    }

    public static getPaddedDataForMarkers() {
        const data: any[] = [
            { Label: null, Value: null },
            { Label: 4, Value: 4 },
            { Label: 5, Value: 5 },
            { Label: 2, Value: 2 },
            { Label: 7, Value: 7 },
            { Label: -1, Value: -1 },
            { Label: 3, Value: 3 },
            { Label: -2, Value: -2 },
            { Label: 5, Value: 5 },
            { Label: 2, Value: 2 },
            { Label: 6, Value: 6 },
            { Label: null, Value: null }
        ];
        return data;
    }

    public static getSharedDataWithNullValues() {
        const data: any[] = [
            { Label: 4, Value: 4 },
            { Label: 5, Value: 5 },
            { Label: 2, Value: null },
            { Label: 7, Value: 7 },
            { Label: -1, Value: -1 },
            { Label: 3, Value: 3 },
            { Label: -2, Value: -2 },
            { Label: 5, Value: null },
            { Label: 2, Value: 2 },
            { Label: 6, Value: 6 }
        ];
        return data;
    }
}
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 { IgxSparklineModule } from "igniteui-angular-charts";


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

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxSparklineModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ViewChild } from "@angular/core";
import { IgxSparklineComponent } from "igniteui-angular-charts";
import { SparklineDisplayType } from "igniteui-angular-charts";
import { SharedData } from "./SharedData";

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

    public data: any[];

    @ViewChild("sparkline", { static: true })
    public sparkline: IgxSparklineComponent;

    constructor() {
        this.data = SharedData.getSharedData();
    }

    public onDisplayTypeChanged(e: any) {
        const selection = e.target.value.toString();

        switch (selection) {
            case "Area": {
                this.sparkline.displayType = SparklineDisplayType.Area;
                break;
            }
            case "Column": {
                this.sparkline.displayType = SparklineDisplayType.Column;
                break;
            }
            case "Line": {
                this.sparkline.displayType = SparklineDisplayType.Line;
                break;
            }
            case "WinLoss": {
                this.sparkline.displayType = SparklineDisplayType.WinLoss;
                break;
            }
        }
    }
}
tsコピー

<div class="container vertical">
    <div class="options horizontal">
        <span class="options-item">Display Type:</span>
        <select (change)="onDisplayTypeChanged($event)">
            <option>Area</option>
            <option>Column</option>
            <option>Line</option>
            <option>WinLoss</option>
        </select>
    </div>
    <div class="container">
        <igx-sparkline #sparkline height="100%" width="100%"
            [dataSource]="data"
            valueMemberPath="Value"
            displayType="Area"></igx-sparkline>
    </div>
</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 ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

スパークラインの推奨事項

スパークライン チャートはプロジェクトに適していますか?

他のチャート コントロールと比較したスパークラインの利点は、グリッド セルなどの限られたスペースに、そのすべてのビジュアル要素を表示できることです。

Angular スパークライン コンポーネントには、最高、最低、最初、最後、そして負の値を示す楕円形のアイコンによってデータ ポイントをマークする機能があります。マーカーは、任意のシェイプ、色、または画像でカスタマイズできます。

スパークライン ユースケース

• チャートを表示するためのコンパクトなスペースがある場合。
• 週ごとの収益など、一連の値の傾向を示したい場合。

スパークラインのベスト プラクティス

• データ比較が正確になるように Y 軸 (左軸または右軸) を常に 0 から開始する。
• 時系列データを左から右へ並べ替える。
• 実線などの視覚属性を使用して一連のデータを表示する。

次の場合にスパークラインを使用しないでください:

• データを詳細に分析する必要がある場合。
• データ ポイントのすべてのラベルを表示する必要がある場合。Y 軸上には最大値と最小値のみを表示でき、X 軸には最初の値と最後の値のみを表示できます。

スパークラインのデータ構造

• 一次元データが必要です。
• データ セットには少なくとも 2 つの数値フィールドを含む必要があります。
• データ ソース フィールドのテキストを使用して、X 軸の最初と最後のラベルを表示できます。

スパークラインのタイプ

Angular スパークライン コンポーネントは、それに応じて displayType プロパティを設定することにより、以下のスパークライン タイプをサポートしています。

• Line: スパークラインの折れ線チャート タイプを数値データで表示し、データ ポイントを線分で接続します。スパークラインでデータを視覚化するには、少なくとも 2 つのデータ ポイントを指定する必要があります。
• Area: スパークラインのエリア チャート タイプを数値データで表示します。これは折れ線タイプに似ており、各線が描画された後に領域を閉じる追加の手順があります。スパークラインでデータを視覚化するには、少なくとも 2 つのデータ ポイントを指定する必要があります。
• Column: スパークラインの縦棒チャート タイプを数値データで表示します。縦棒と表現される場合もあります。このタイプは単一データ ポイントを描画できますが、Sparkline に最小の値範囲プロパティ (minimum) を指定する必要があるので、供給される単一データ ポイントは表示可能です。そうでなければ、値は最小値として取り扱われ、表示されません。
• WinLoss: このタイプは、外観は柱状チャートに似ています。各列の値はデータセットの正の最大値 (正の値の場合) または負の最小値 (負の値の場合) に等しくなります。ウィンまたはロス シナリオを示すのが目的です。Win/Loss チャートを正しく表示するには、データセットには正の値と負の値がなければなりません。WinLoss スパークラインが、数値のコレクションにバインドできる Line タイプなどの他のタイプと同じデータにバインドされている場合、Angular スパークライン コンポーネントはそのコレクションから最大値と最小値の 2 つの値を選択し、それらの値に基づいてスパークラインをレンダリングします。

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

export class SharedData {

    public static getSharedData() {
        const data: any[] = [
            { Label: 4, Value: 4 },
            { Label: 5, Value: 5 },
            { Label: 2, Value: 2 },
            { Label: 7, Value: 7 },
            { Label: -1, Value: -1 },
            { Label: 3, Value: 3 },
            { Label: -2, Value: -2 },
            { Label: 5, Value: 5 },
            { Label: 2, Value: 2 },
            { Label: 6, Value: 6 }
        ];
        return data;
    }

    public static getPaddedDataForMarkers() {
        const data: any[] = [
            { Label: null, Value: null },
            { Label: 4, Value: 4 },
            { Label: 5, Value: 5 },
            { Label: 2, Value: 2 },
            { Label: 7, Value: 7 },
            { Label: -1, Value: -1 },
            { Label: 3, Value: 3 },
            { Label: -2, Value: -2 },
            { Label: 5, Value: 5 },
            { Label: 2, Value: 2 },
            { Label: 6, Value: 6 },
            { Label: null, Value: null }
        ];
        return data;
    }

    public static getSharedDataWithNullValues() {
        const data: any[] = [
            { Label: 4, Value: 4 },
            { Label: 5, Value: 5 },
            { Label: 2, Value: null },
            { Label: 7, Value: 7 },
            { Label: -1, Value: -1 },
            { Label: 3, Value: 3 },
            { Label: -2, Value: -2 },
            { Label: 5, Value: null },
            { Label: 2, Value: 2 },
            { Label: 6, Value: 6 }
        ];
        return data;
    }
}
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 { IgxSparklineModule } from "igniteui-angular-charts";


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

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxSparklineModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ViewChild } from "@angular/core";
import { IgxSparklineComponent } from "igniteui-angular-charts";
import { SparklineDisplayType } from "igniteui-angular-charts";
import { SharedData } from "./SharedData";

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

    public data: any[];

    @ViewChild("sparkline", { static: true })
    public sparkline: IgxSparklineComponent;

    constructor() {
        this.data = SharedData.getSharedData();
    }

    public onDisplayTypeChanged(e: any) {
        const selection = e.target.value.toString();

        switch (selection) {
            case "Area": {
                this.sparkline.displayType = SparklineDisplayType.Area;
                break;
            }
            case "Column": {
                this.sparkline.displayType = SparklineDisplayType.Column;
                break;
            }
            case "Line": {
                this.sparkline.displayType = SparklineDisplayType.Line;
                break;
            }
            case "WinLoss": {
                this.sparkline.displayType = SparklineDisplayType.WinLoss;
                break;
            }
        }
    }
}
tsコピー

<div class="container vertical">
    <div class="options horizontal">
        <span class="options-item">Display Type:</span>
        <select (change)="onDisplayTypeChanged($event)">
            <option>Area</option>
            <option>Column</option>
            <option>Line</option>
            <option>WinLoss</option>
        </select>
    </div>
    <div class="container">
        <igx-sparkline #sparkline height="100%" width="100%"
            [dataSource]="data"
            valueMemberPath="Value"
            displayType="Area"></igx-sparkline>
    </div>
</div >
htmlコピー

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

Edit in: Codesandbox

マーカー

Angular スパークライン コンポーネントを使用すると、マーカーをシリーズ上の円形のアイコンとして表示して、X/Y 座標に基づいて個々のデータポイントを示すことができます。マーカーは、表示タイプが Line、Area、および Column のスパークラインに設定できます。WinLoss 型のスパークラインは、現在マーカーを設定できません。デフォルトでは、マーカーは表示されませんが、対応するマーカーの可視性プロパティを設定することで有効にできます。

スパークライン内のマーカーは、以下の場所を任意に組み合わせて配置できます。

• All (すべて): スパークライン内のすべてのデータ ポイントにマーカーを表示します。
• Low (低値): 最低値のデータ ポイントにマーカーを表示します。最小値に複数の点がある場合は、その値を持つ各点に表示されます。
• High (高値): 最低値のデータ ポイントにマーカーを表示します。最高値に複数のポイントがある場合は、その値を持つ各ポイントに表示されます。
• First (始値): スパークラインの最初のデータポイントにマーカーを表示します。
• Last: (終値)スパークラインの最後のデータ ポイントにマーカーを表示します。
• Negative (負数): スパークラインにプロットされた負のデータ点にマーカーを表示します。

上記のすべてのマーカーは、色、可視性、およびサイズの観点で関連マーカー タイプのプロパティを使用してカスタマイズできます。たとえば、上記の Low マーカーは、lowMarkerBrush、lowMarkerVisibility、lowMarkerSize の各プロパティを持ちます。

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

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

    public value: number;
    public label: string;

}
export class SparklineProfitData extends Array<SparklineProfitDataItem> {
    public constructor(items: Array<SparklineProfitDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new SparklineProfitDataItem(
                {
                    value: 30,
                    label: `A`
                }),
                new SparklineProfitDataItem(
                {
                    value: 40,
                    label: `B`
                }),
                new SparklineProfitDataItem(
                {
                    value: 50,
                    label: `C`
                }),
                new SparklineProfitDataItem(
                {
                    value: 40,
                    label: `D`
                }),
                new SparklineProfitDataItem(
                {
                    value: 30,
                    label: `E`
                }),
                new SparklineProfitDataItem(
                {
                    value: 20,
                    label: `F`
                }),
                new SparklineProfitDataItem(
                {
                    value: 30,
                    label: `G`
                }),
                new SparklineProfitDataItem(
                {
                    value: 40,
                    label: `H`
                }),
            ];
            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 { IgxSparklineModule } from 'igniteui-angular-charts';

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

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescriptionModule } from 'igniteui-angular-core';
import { SparklineProfitDataItem, SparklineProfitData } from './SparklineProfitData';
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';
import { IgxSparklineComponent } from 'igniteui-angular-charts';

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("propertyEditorPanel1", { static: true } )
    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
    @ViewChild("firstMarkerVisibilityEditor", { static: true } )
    private firstMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("highMarkerVisibilityEditor", { static: true } )
    private highMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("lowMarkerVisibilityEditor", { static: true } )
    private lowMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("negativeMarkerVisibilityEditor", { static: true } )
    private negativeMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("lastMarkerVisibilityEditor", { static: true } )
    private lastMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("markerVisibilityEditor", { static: true } )
    private markerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxSparklineComponent
    private _sparklineProfitData: SparklineProfitData = null;
    public get sparklineProfitData(): SparklineProfitData {
        if (this._sparklineProfitData == null)
        {
            this._sparklineProfitData = new SparklineProfitData();
        }
        return this._sparklineProfitData;
    }

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

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

tsコピー

<div class="container vertical sample">
  <div class="options vertical">
      <igx-property-editor-panel
      [componentRenderer]="renderer"
      [target]="chart"
      descriptionType="Sparkline"
      isHorizontal="true"
      isWrappingEnabled="true"
      name="propertyEditorPanel1"
      #propertyEditorPanel1>
          <igx-property-editor-property-description
          propertyPath="FirstMarkerVisibility"
          name="FirstMarkerVisibilityEditor"
          #firstMarkerVisibilityEditor
          label="First Markers"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownNames="Visible, Collapsed"
          dropDownValues="Visible, Collapsed"
          primitiveValue="Visible">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="HighMarkerVisibility"
          name="HighMarkerVisibilityEditor"
          #highMarkerVisibilityEditor
          label="High Markers"
          valueType="EnumValue"
          dropDownNames="Visible, Collapsed"
          dropDownValues="Visible, Collapsed"
          primitiveValue="Visible">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="LowMarkerVisibility"
          name="LowMarkerVisibilityEditor"
          #lowMarkerVisibilityEditor
          label="Low Markers"
          valueType="EnumValue"
          dropDownNames="Visible, Collapsed"
          dropDownValues="Visible, Collapsed"
          primitiveValue="Visible">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="NegativeMarkerVisibility"
          name="NegativeMarkerVisibilityEditor"
          #negativeMarkerVisibilityEditor
          label="Negative Markers"
          valueType="EnumValue"
          dropDownNames="Visible, Collapsed"
          dropDownValues="Visible, Collapsed"
          primitiveValue="Visible">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="LastMarkerVisibility"
          name="LastMarkerVisibilityEditor"
          #lastMarkerVisibilityEditor
          label="Last Markers"
          valueType="EnumValue"
          dropDownNames="Visible, Collapsed"
          dropDownValues="Visible, Collapsed"
          primitiveValue="Visible">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="MarkerVisibility"
          name="MarkerVisibilityEditor"
          #markerVisibilityEditor
          label="All Markers"
          valueType="EnumValue"
          dropDownNames="Visible, Collapsed"
          dropDownValues="Visible, Collapsed"
          primitiveValue="Visible">
          </igx-property-editor-property-description>
      </igx-property-editor-panel>
  </div>
  <div class="container fill">
      <igx-sparkline
      name="chart"
      #chart
      [dataSource]="sparklineProfitData"
      displayType="Line"
      labelMemberPath="label"
      valueMemberPath="value"
      markerVisibility="Visible"
      highMarkerVisibility="Visible"
      lowMarkerVisibility="Visible"
      firstMarkerVisibility="Visible"
      lastMarkerVisibility="Visible"
      negativeMarkerVisibility="Visible"
      markerSize="10"
      firstMarkerSize="10"
      lastMarkerSize="10"
      lowMarkerSize="10"
      highMarkerSize="10"
      negativeMarkerSize="10"
      minimum="0"
      maximum="60">
      </igx-sparkline>
  </div>
</div>
htmlコピー

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

Edit in: Codesandbox

標準範囲

Angular スパークラインの通常の範囲機能は、データが視覚化されているときに定義済みの意味のある範囲を表す水平方向の縞模様です。標準範囲は、指定した色のアウトラインで網掛けエリアとして設定できます。

通常の範囲は、最大データ ポイントよりも広い場合もあれば、それを超える場合もあります。また、しきい値インジケータとして機能するように、スパークラインの Line 表示タイプと同じ幅にすることもできます。正常範囲の幅は、正常範囲を表示するために最低限必要な以下の 3 つのプロパティによって決まります。

• normalRangeVisibility: 標準範囲が表示されるかどうか。
• normalRangeMaximum: 範囲の下境界線。
• normalRangeMinimum: 範囲の上境界線。

既定では、標準範囲は表示されません。有効にすると、標準範囲は薄い灰色の外観で表示されますが、normalRangeFill プロパティを使用して構成することもできます。

displayNormalRangeInFront プロパティを設定することで、Angular スパークラインのプロットされたシリーズの前または後ろに標準範囲を表示するかどうかを設定することもできます。

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

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

    public label: string;
    public value: number;

}
export class SparklineMixedData extends Array<SparklineMixedDataItem> {
    public constructor(items: Array<SparklineMixedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new SparklineMixedDataItem(
                {
                    label: `A`,
                    value: 30
                }),
                new SparklineMixedDataItem(
                {
                    label: `B`,
                    value: -10
                }),
                new SparklineMixedDataItem(
                {
                    label: `C`,
                    value: 40
                }),
                new SparklineMixedDataItem(
                {
                    label: `D`,
                    value: -20
                }),
                new SparklineMixedDataItem(
                {
                    label: `E`,
                    value: 30
                }),
                new SparklineMixedDataItem(
                {
                    label: `F`,
                    value: 40
                }),
                new SparklineMixedDataItem(
                {
                    label: `G`,
                    value: -10
                }),
                new SparklineMixedDataItem(
                {
                    label: `H`,
                    value: 30
                }),
            ];
            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 { IgxSparklineModule } from 'igniteui-angular-charts';

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

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescriptionModule } from 'igniteui-angular-core';
import { SparklineMixedDataItem, SparklineMixedData } from './SparklineMixedData';
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';
import { IgxSparklineComponent } from 'igniteui-angular-charts';

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("propertyEditorPanel1", { static: true } )
    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
    @ViewChild("normalRangeVisibilityEditor", { static: true } )
    private normalRangeVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("normalRangeMinimumEditor", { static: true } )
    private normalRangeMinimumEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("normalRangeMaximumEditor", { static: true } )
    private normalRangeMaximumEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxSparklineComponent
    private _sparklineMixedData: SparklineMixedData = null;
    public get sparklineMixedData(): SparklineMixedData {
        if (this._sparklineMixedData == null)
        {
            this._sparklineMixedData = new SparklineMixedData();
        }
        return this._sparklineMixedData;
    }

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

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

tsコピー

<div class="container vertical sample">
  <div class="options vertical">
      <igx-property-editor-panel
      [componentRenderer]="renderer"
      [target]="chart"
      descriptionType="Sparkline"
      isHorizontal="true"
      isWrappingEnabled="true"
      name="propertyEditorPanel1"
      #propertyEditorPanel1>
          <igx-property-editor-property-description
          propertyPath="NormalRangeVisibility"
          name="NormalRangeVisibilityEditor"
          #normalRangeVisibilityEditor
          label="Normal Range Visibility"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownNames="Visible, Collapsed"
          dropDownValues="Visible, Collapsed"
          primitiveValue="Visible">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="NormalRangeMinimum"
          name="NormalRangeMinimumEditor"
          #normalRangeMinimumEditor
          label="Normal Range Minimum"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownNames="0, 10, 15, 20, 25, 30"
          dropDownValues="0, 10, 15, 20, 25, 30"
          primitiveValue="25">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="NormalRangeMaximum"
          name="NormalRangeMaximumEditor"
          #normalRangeMaximumEditor
          label="Normal Range Maximum"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownNames="0, 10, 15, 20, 25, 30"
          dropDownValues="0, 10, 15, 20, 25, 30"
          primitiveValue="25">
          </igx-property-editor-property-description>
      </igx-property-editor-panel>
  </div>
  <div class="container fill">
      <igx-sparkline
      name="chart"
      #chart
      [dataSource]="sparklineMixedData"
      displayType="Area"
      labelMemberPath="label"
      valueMemberPath="value"
      normalRangeVisibility="Visible"
      normalRangeMinimum="15"
      normalRangeMaximum="25">
      </igx-sparkline>
  </div>
</div>
htmlコピー

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

Edit in: Codesandbox

トレンドライン

Angular スパークラインは、実際のスパークライン レイヤーの上に別のレイヤーとして表示される一連のトレンドラインをサポートしています。トレンドラインを表示するには、trendLineType プロパティを使用します。

トレンドラインは、チャートがバインドされているデータの値を使用して、trendLineType プロパティで指定されたアルゴリズムに従って計算されます。

トレンドラインは一度に 1 つだけ表示でき、デフォルトではトレンドラインは表示されません。

以下のサンプルは、ドロップダウンを介して利用可能なすべてのトレンドラインを示しています:

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

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

    public label: string;
    public value: number;

}
export class SparklineMixedData extends Array<SparklineMixedDataItem> {
    public constructor(items: Array<SparklineMixedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new SparklineMixedDataItem(
                {
                    label: `A`,
                    value: 30
                }),
                new SparklineMixedDataItem(
                {
                    label: `B`,
                    value: -10
                }),
                new SparklineMixedDataItem(
                {
                    label: `C`,
                    value: 40
                }),
                new SparklineMixedDataItem(
                {
                    label: `D`,
                    value: -20
                }),
                new SparklineMixedDataItem(
                {
                    label: `E`,
                    value: 30
                }),
                new SparklineMixedDataItem(
                {
                    label: `F`,
                    value: 40
                }),
                new SparklineMixedDataItem(
                {
                    label: `G`,
                    value: -10
                }),
                new SparklineMixedDataItem(
                {
                    label: `H`,
                    value: 30
                }),
            ];
            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 { IgxSparklineModule } from 'igniteui-angular-charts';

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

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescriptionModule } from 'igniteui-angular-core';
import { SparklineMixedDataItem, SparklineMixedData } from './SparklineMixedData';
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';
import { IgxSparklineComponent } from 'igniteui-angular-charts';

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("propertyEditorPanel1", { static: true } )
    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
    @ViewChild("trendLineTypeEditor", { static: true } )
    private trendLineTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxSparklineComponent
    private _sparklineMixedData: SparklineMixedData = null;
    public get sparklineMixedData(): SparklineMixedData {
        if (this._sparklineMixedData == null)
        {
            this._sparklineMixedData = new SparklineMixedData();
        }
        return this._sparklineMixedData;
    }

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

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

tsコピー

<div class="container vertical sample">
  <div class="options vertical">
      <igx-property-editor-panel
      [componentRenderer]="renderer"
      [target]="chart"
      descriptionType="Sparkline"
      isHorizontal="true"
      isWrappingEnabled="true"
      name="propertyEditorPanel1"
      #propertyEditorPanel1>
          <igx-property-editor-property-description
          propertyPath="TrendLineType"
          name="TrendLineTypeEditor"
          #trendLineTypeEditor
          label="Trendline Type"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownNames="CubicFit, CumulativeAverage, ExponentialAverage, ExponentialFit, LinearFit, LogarithmicFit, ModifiedAverage, None, PowerLawFit, QuadraticFit, QuarticFit, QuinticFit, SimpleAverage, WeightedAverage"
          dropDownValues="CubicFit, CumulativeAverage, ExponentialAverage, ExponentialFit, LinearFit, LogarithmicFit, ModifiedAverage, None, PowerLawFit, QuadraticFit, QuarticFit, QuinticFit, SimpleAverage, WeightedAverage"
          primitiveValue="CubicFit">
          </igx-property-editor-property-description>
      </igx-property-editor-panel>
  </div>
  <div class="container fill">
      <igx-sparkline
      name="chart"
      #chart
      [dataSource]="sparklineMixedData"
      displayType="Area"
      labelMemberPath="label"
      valueMemberPath="value"
      trendLineType="CubicFit">
      </igx-sparkline>
  </div>
</div>
htmlコピー

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

Edit in: Codesandbox

不明な値の補間

Angular スパークラインは、不明な値を検出し、指定された補間アルゴリズムを介して不明な値のためのスペースを描画することができます。データに null 値が含まれていて、この機能を使用しない場合、つまり補間が指定されていない場合、不明な値はプロットされません。

未知の値をプロットするために、Angular スパークラインの unknownValuePlotting プロパティを設定することができます。以下のサンプルは、unknownValuePlotting プロパティの値の違いを示しており、チェックボックスを使用してオンとオフを切り替えることができます。

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

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

    public label: number;
    public value: number;

}
export class SparklineUnknownData extends Array<SparklineUnknownDataItem> {
    public constructor(items: Array<SparklineUnknownDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new SparklineUnknownDataItem(
                {
                    label: 4,
                    value: 4
                }),
                new SparklineUnknownDataItem(
                {
                    label: 5,
                    value: 5
                }),
                new SparklineUnknownDataItem(
                {
                    label: 2,
                    value: null
                }),
                new SparklineUnknownDataItem(
                {
                    label: 7,
                    value: 7
                }),
                new SparklineUnknownDataItem(
                {
                    label: -1,
                    value: -1
                }),
                new SparklineUnknownDataItem(
                {
                    label: 3,
                    value: 3
                }),
                new SparklineUnknownDataItem(
                {
                    label: -2,
                    value: -2
                }),
                new SparklineUnknownDataItem(
                {
                    label: 5,
                    value: null
                }),
                new SparklineUnknownDataItem(
                {
                    label: 2,
                    value: 2
                }),
                new SparklineUnknownDataItem(
                {
                    label: 6,
                    value: 6
                }),
            ];
            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 { IgxSparklineModule } from 'igniteui-angular-charts';

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

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescriptionModule } from 'igniteui-angular-core';
import { SparklineUnknownDataItem, SparklineUnknownData } from './SparklineUnknownData';
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';
import { IgxSparklineComponent } from 'igniteui-angular-charts';

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("propertyEditorPanel1", { static: true } )
    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
    @ViewChild("unknownValuePlottingEditor", { static: true } )
    private unknownValuePlottingEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxSparklineComponent
    private _sparklineUnknownData: SparklineUnknownData = null;
    public get sparklineUnknownData(): SparklineUnknownData {
        if (this._sparklineUnknownData == null)
        {
            this._sparklineUnknownData = new SparklineUnknownData();
        }
        return this._sparklineUnknownData;
    }

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

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

tsコピー

<div class="container vertical sample">
  <div class="options vertical">
      <igx-property-editor-panel
      [componentRenderer]="renderer"
      [target]="chart"
      descriptionType="Sparkline"
      isHorizontal="true"
      isWrappingEnabled="true"
      name="propertyEditorPanel1"
      #propertyEditorPanel1>
          <igx-property-editor-property-description
          propertyPath="UnknownValuePlotting"
          name="UnknownValuePlottingEditor"
          #unknownValuePlottingEditor
          label="Unknown Value Plotting"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownNames="LinearInterpolate, DontPlot"
          dropDownValues="LinearInterpolate, DontPlot"
          primitiveValue="LinearInterpolate">
          </igx-property-editor-property-description>
      </igx-property-editor-panel>
  </div>
  <div class="container fill">
      <igx-sparkline
      name="chart"
      #chart
      [dataSource]="sparklineUnknownData"
      displayType="Area"
      labelMemberPath="label"
      valueMemberPath="value"
      unknownValuePlotting="LinearInterpolate">
      </igx-sparkline>
  </div>
</div>
htmlコピー

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

Edit in: Codesandbox

データ グリッドのスパークライン

Angular スパークラインは、データ グリッドのテンプレート列またはテンプレートをサポートする他の UI コントロールに埋め込むことができます。以下のコード例ではその方法を示します。

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

export class Products {

    public static names: string[] = [
        "Intel CPU", "AMD CPU",
        "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU",
        "Corsair Memory", "Patriot Memory", "Skill Memory",
        "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD",
        "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD",
        "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor"
    ];

    public static countries: string[] = ["USA", "UK", "France", "Canada", "Poland",
            "Denmark", "Croatia", "Australia", "Seychelles",
            "Sweden", "Germany", "Japan", "Ireland",
            "Barbados", "Jamaica", "Cuba", "Spain"
    ];

    public static status: string[] = [
    "Packing", "Shipped", "Delivered"
    ];

    public static getData(count?: number): any[] {
        if (count === undefined) {
            count = 20;
        }
        const items: any[] = [];
        for (let i: number = 0; i < count; i++) {
            const id: string = this.pad(count - i, count.toString().length);
            const price: number = this.getRandomNumber(10000, 90000) / 100;
            const orderCount: number = this.getRandomNumber(4, 30);
            const orderValue: number = Math.round(price * orderCount);
            const orderShipped: number = this.getRandomNumber(30, 100);
            const margin: number = this.getRandomNumber(5, 10);
            const profit: number = Math.round(orderValue * (margin / 100));
            const country: string = this.getRandomItem(this.countries);

            // sales per month for sparkline chart
            const sales: any[] = [];
            for (let m: number = 0; m < 12; m++) {
                const sale: number = this.getRandomNumber(20, 90);
                sales.push({ Value: sale, Month: m });
            }
            items.push({
                CountryFlag: this.getCountryFlag(country),
                CountryName: country,
                Margin: margin,
                // data source for embedded sparklines
                OrderCount: orderCount,
                OrderHistory: this.getOrderHistory(26),
                OrderShipped: orderShipped,
                OrderValue: orderValue,
                OrderDate: this.getRandomDate(),
                ID: id,
                Product: this.getRandomItem(this.names),
                Price: price,
                Profit: profit,
                ReturnRate: this.getReturnRate(52),
                Status: this.getRandomItem(this.status)
            });
        }
        return items;
    }

    public static getOrderHistory(weekCount?: number): any[] {
        if (weekCount === undefined) {
            weekCount = 52;
        }
        const sales: any[] = [];
        for (let w: number = 0; w < weekCount; w++) {
            const value: number = this.getRandomNumber(0, 100);
            sales.push({ Sold: value, Week: w });
        }
        return sales;
    }

    public static getReturnRate(weekCount?: number): any[] {
        if (weekCount === undefined) {
            weekCount = 52;
        }
        const rates: any[] = [];
        for (let w: number = 0; w < weekCount; w++) {
            const value: number = this.getRandomNumber(-100, 100);
            rates.push({ Balance: value, Week: w });
        }
        return rates;
    }

    public static getCountryFlag(country: string): string {
        return "https://github.com/HUSSAR-mtrela/geo-data/raw/master/flags/" + country + ".png";
    }

    public static getRandomDate(): Date {
        const today: Date = new Date();
        const year: number = today.getFullYear();
        const month: number = this.getRandomNumber(0, 8);
        const day: number = this.getRandomNumber(10, 27);
        return new Date(year, month, day);
    }

    public static getRandomNumber(min: number, max: number): number {
        return Math.round(min + Math.random() * (max - min));
    }

    public static getRandomItem(array: any[]): any {
        const index: number = Math.round(this.getRandomNumber(0, array.length - 1));
        return array[index];
    }

    public static pad(num: number, size: number, char?: string): string {
        if (char === undefined) {
            char = "0";
        }
        let s: string = num + "";
        while (s.length < size) {
            s = char + s;
        }
        return s;
    }
}
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 { IgxSparklineModule } from "igniteui-angular-charts";
import { IgxGridModule } from "igniteui-angular";
import { Products } from "./Products";

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

import { Component, Injectable, ViewChild } from "@angular/core";
import { IgxGridComponent } from "igniteui-angular";
import { BehaviorSubject, Observable } from "rxjs";
import { Products } from "./Products";

@Injectable()
export class LocalService {
    public records: Observable<any[]>;
    private _records: BehaviorSubject<any[]>;

    constructor() {
        this._records = new BehaviorSubject([]);
        this.records = this._records.asObservable();
    }

    public getData() {
        const data = Products.getData();
        this._records.next(data);
    }
}

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

export class AppComponent {

    @ViewChild("grid1", { static: true }) public grid1: IgxGridComponent;
    public data: Observable<any[]>;

    constructor(private localService: LocalService) {
        this.localService.getData();
        this.data = this.localService.records;
    }

    public ngOnInit(): void {
    }

    public formatNumber(value: number) {
        return value.toFixed(2);
    }

    public formatCurrency(value: number) {
        return "$" + value.toFixed(2);
    }
}
tsコピー

<div class="container vertical">
    <igx-grid #grid1 [data]="data | async"
    height="100%" displayDensity="cosy"
    [autoGenerate]='false' [allowFiltering]="false">
        <igx-column [width]="'80px'" [field]="'ID'"  dataType="'number'"></igx-column>
        <igx-column [width]="'150px'" [field]="'Product'" [dataType]="'string'" ></igx-column>
        <igx-column [width]="'100px'" [field]="'Price'" dataType="'number'" [formatter]="formatCurrency"></igx-column>

        <igx-column [field]="'OrderHistory'" [width]="'160px'"  >
            <ng-template igxHeader>
                <span>Order History</span>
            </ng-template>
            <ng-template igxCell let-val>
                <igx-sparkline height="40px" width="150px"
                [dataSource]="val"
                valueMemberPath="Sold"
                displayType="Line"
                lineThickness="2"
                brush="rgb(21, 190, 6)"
                negativeBrush="rgb(211, 17, 3)" >
                </igx-sparkline>
            </ng-template>
        </igx-column>

        <igx-column [width]="'100px'" [field]="'OrderCount'"  dataType="'number'" header="Orders"></igx-column>

        <igx-column [field]="'ReturnRate'" [width]="'160px'"  >
            <ng-template igxHeader>
                <span>Return Rate</span>
            </ng-template>
            <ng-template igxCell let-val>
                <igx-sparkline height="40px" width="150px"
                [dataSource]="val"
                valueMemberPath="Balance"
                displayType="Column"
                lineThickness="2"
                brush="rgb(21, 190, 6)"
                negativeBrush="rgb(211, 17, 3)" >
                </igx-sparkline>
            </ng-template>
        </igx-column>

        <igx-column [width]="'190px'" [field]="'Status'" [dataType]="'string'"></igx-column>

    </igx-grid>
    <br />
</div>
htmlコピー

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

Edit in: Codesandbox

その他のリソース

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

• エリア チャート
• 縦棒チャート
• 折れ線チャート

API リファレンス

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

• displayNormalRangeInFront
• displayType
• lowMarkerBrush
• lowMarkerSize
• lowMarkerVisibility
• normalRangeFill
• unknownValuePlotting
• IgxSparklineComponent