Components List

Angular スパークライン

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

Angular スパークラインの例

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

このサンプルが気に入りましたか? 完全な 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 つの値を選択し、それらの値に基づいてスパークラインをレンダリングします。

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

マーカー

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

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

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

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

標準範囲

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

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

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

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

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

トレンドライン

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

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

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

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

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

不明な値の補間

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

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

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

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

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

その他のリソース

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

API リファレンス

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