Components List

Web Components スパークライン

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

Web Components スパークラインの例

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

import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcSparklineModule);

export class SparklineDisplayTypes {

    private chart1: IgcSparklineComponent;
    private chart2: IgcSparklineComponent;
    private chart3: IgcSparklineComponent;
    private chart4: IgcSparklineComponent;
    public data: any[] = [];

    constructor() {

        this.data = this.generateData();

        this.chart1 = document.getElementById('chart1') as IgcSparklineComponent;
        this.chart2 = document.getElementById('chart2') as IgcSparklineComponent;
        this.chart3 = document.getElementById('chart3') as IgcSparklineComponent;
        this.chart4 = document.getElementById('chart4') as IgcSparklineComponent;

        this.chart1.dataSource =  this.data;
        this.chart2.dataSource =  this.data;
        this.chart3.dataSource =  this.data;
        this.chart4.dataSource  = this.data;
    }

    public generateData()
    {
        const data: any[] = [];
        let index = 0;
        let min = 1000.0;
        let max = -1000.0;

        for (let angle = 0; angle < 360 * 4; angle += 5)
        {
            let v1 = Math.sin(angle * Math.PI / 180);
            let v2 = Math.sin(3 * angle * Math.PI / 180) / 3;
            let revenue = v1 + v2;
            let expanse = revenue < 0 ? revenue : 0;
            let income = revenue > 0 ? revenue : 0;

            data.push({
                "Index": index++,
                "Angle": angle,
                // Value = v1 + v2
                "Value": revenue,
                "Expanse": expanse,
                "Income": income
            });

            min = Math.min(min, v1 + v2);
            max = Math.max(max, v1 + v2);
        }

        return data;
    }
}

new SparklineDisplayTypes();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>SparklineDisplayTypes</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">
  <label class="options-label">Sparkline with Line Display Type</label>
  <igc-sparkline id="chart1"
      height="calc(25% - 2.5rem)"
      width="100%"
      display-type="Line"
      minimum="-1"
      maximum="1"
      value-member-path="Value"
      label-member-path="Angle">
  </igc-sparkline>
  <label class="options-label">Sparkline with Area Display Type</label>
  <igc-sparkline id="chart2"
      height="calc(25% - 2.5rem)"
       width="100%"
       display-type="Area"
       minimum="-1" maximum="1"
       value-member-path="Value"
       label-member-path="Angle">
  </igc-sparkline>
  <label class="options-label">Sparkline with Column Display Type</label>
  <igc-sparkline id="chart3"
      height="calc(25% - 2.5rem)"
      width="100%"
      display-type="Column"
      minimum="-1"
      maximum="1"
      value-member-path="Value"
      label-member-path="Angle">
  </igc-sparkline>
  <label class="options-label">Sparkline with WinLoss Display Type</label>
  <igc-sparkline id="chart4"
      height="calc(25% - 2.5rem)"
      width="100%"
      display-type="WinLoss"
      minimum="-1" maximum="1"
      value-member-path="Value"
      label-member-path="Angle">
   </igc-sparkline>

</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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スパークラインのタイプ

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

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

import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcSparklineModule);

export class SparklineDisplayTypes {

    private chart1: IgcSparklineComponent;
    private chart2: IgcSparklineComponent;
    private chart3: IgcSparklineComponent;
    private chart4: IgcSparklineComponent;
    public data: any[] = [];

    constructor() {

        this.data = this.generateData();

        this.chart1 = document.getElementById('chart1') as IgcSparklineComponent;
        this.chart2 = document.getElementById('chart2') as IgcSparklineComponent;
        this.chart3 = document.getElementById('chart3') as IgcSparklineComponent;
        this.chart4 = document.getElementById('chart4') as IgcSparklineComponent;

        this.chart1.dataSource =  this.data;
        this.chart2.dataSource =  this.data;
        this.chart3.dataSource =  this.data;
        this.chart4.dataSource  = this.data;
    }

    public generateData()
    {
        const data: any[] = [];
        let index = 0;
        let min = 1000.0;
        let max = -1000.0;

        for (let angle = 0; angle < 360 * 4; angle += 5)
        {
            let v1 = Math.sin(angle * Math.PI / 180);
            let v2 = Math.sin(3 * angle * Math.PI / 180) / 3;
            let revenue = v1 + v2;
            let expanse = revenue < 0 ? revenue : 0;
            let income = revenue > 0 ? revenue : 0;

            data.push({
                "Index": index++,
                "Angle": angle,
                // Value = v1 + v2
                "Value": revenue,
                "Expanse": expanse,
                "Income": income
            });

            min = Math.min(min, v1 + v2);
            max = Math.max(max, v1 + v2);
        }

        return data;
    }
}

new SparklineDisplayTypes();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>SparklineDisplayTypes</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">
  <label class="options-label">Sparkline with Line Display Type</label>
  <igc-sparkline id="chart1"
      height="calc(25% - 2.5rem)"
      width="100%"
      display-type="Line"
      minimum="-1"
      maximum="1"
      value-member-path="Value"
      label-member-path="Angle">
  </igc-sparkline>
  <label class="options-label">Sparkline with Area Display Type</label>
  <igc-sparkline id="chart2"
      height="calc(25% - 2.5rem)"
       width="100%"
       display-type="Area"
       minimum="-1" maximum="1"
       value-member-path="Value"
       label-member-path="Angle">
  </igc-sparkline>
  <label class="options-label">Sparkline with Column Display Type</label>
  <igc-sparkline id="chart3"
      height="calc(25% - 2.5rem)"
      width="100%"
      display-type="Column"
      minimum="-1"
      maximum="1"
      value-member-path="Value"
      label-member-path="Angle">
  </igc-sparkline>
  <label class="options-label">Sparkline with WinLoss Display Type</label>
  <igc-sparkline id="chart4"
      height="calc(25% - 2.5rem)"
      width="100%"
      display-type="WinLoss"
      minimum="-1" maximum="1"
      value-member-path="Value"
      label-member-path="Angle">
   </igc-sparkline>

</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

マーカー

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

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

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

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

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 { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
import { SparklineProfitDataItem, SparklineProfitData } from './SparklineProfitData';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule,
    IgcSparklineModule
);

export class Sample {

    private propertyEditorPanel1: IgcPropertyEditorPanelComponent
    private firstMarkerVisibilityEditor: IgcPropertyEditorPropertyDescriptionComponent
    private highMarkerVisibilityEditor: IgcPropertyEditorPropertyDescriptionComponent
    private lowMarkerVisibilityEditor: IgcPropertyEditorPropertyDescriptionComponent
    private negativeMarkerVisibilityEditor: IgcPropertyEditorPropertyDescriptionComponent
    private lastMarkerVisibilityEditor: IgcPropertyEditorPropertyDescriptionComponent
    private markerVisibilityEditor: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcSparklineComponent
    private _bind: () => void;

    constructor() {
        var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
        var firstMarkerVisibilityEditor = this.firstMarkerVisibilityEditor = document.getElementById('FirstMarkerVisibilityEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var highMarkerVisibilityEditor = this.highMarkerVisibilityEditor = document.getElementById('HighMarkerVisibilityEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var lowMarkerVisibilityEditor = this.lowMarkerVisibilityEditor = document.getElementById('LowMarkerVisibilityEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var negativeMarkerVisibilityEditor = this.negativeMarkerVisibilityEditor = document.getElementById('NegativeMarkerVisibilityEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var lastMarkerVisibilityEditor = this.lastMarkerVisibilityEditor = document.getElementById('LastMarkerVisibilityEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var markerVisibilityEditor = this.markerVisibilityEditor = document.getElementById('MarkerVisibilityEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcSparklineComponent;

        this._bind = () => {
            propertyEditorPanel1.componentRenderer = this.renderer;
            propertyEditorPanel1.target = this.chart;
            chart.dataSource = this.sparklineProfitData;
        }
        this._bind();
    }

    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;
    }

}

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="options vertical">
        <igc-property-editor-panel

        description-type="Sparkline"
        is-horizontal="true"
        is-wrapping-enabled="true"
        name="propertyEditorPanel1"
        id="propertyEditorPanel1">
            <igc-property-editor-property-description
            property-path="FirstMarkerVisibility"
            name="FirstMarkerVisibilityEditor"
            id="FirstMarkerVisibilityEditor"
            label="First Markers"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-names="Visible, Collapsed"
            drop-down-values="Visible, Collapsed"
            primitive-value="Visible">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="HighMarkerVisibility"
            name="HighMarkerVisibilityEditor"
            id="HighMarkerVisibilityEditor"
            label="High Markers"
            value-type="EnumValue"
            drop-down-names="Visible, Collapsed"
            drop-down-values="Visible, Collapsed"
            primitive-value="Visible">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="LowMarkerVisibility"
            name="LowMarkerVisibilityEditor"
            id="LowMarkerVisibilityEditor"
            label="Low Markers"
            value-type="EnumValue"
            drop-down-names="Visible, Collapsed"
            drop-down-values="Visible, Collapsed"
            primitive-value="Visible">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="NegativeMarkerVisibility"
            name="NegativeMarkerVisibilityEditor"
            id="NegativeMarkerVisibilityEditor"
            label="Negative Markers"
            value-type="EnumValue"
            drop-down-names="Visible, Collapsed"
            drop-down-values="Visible, Collapsed"
            primitive-value="Visible">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="LastMarkerVisibility"
            name="LastMarkerVisibilityEditor"
            id="LastMarkerVisibilityEditor"
            label="Last Markers"
            value-type="EnumValue"
            drop-down-names="Visible, Collapsed"
            drop-down-values="Visible, Collapsed"
            primitive-value="Visible">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="MarkerVisibility"
            name="MarkerVisibilityEditor"
            id="MarkerVisibilityEditor"
            label="All Markers"
            value-type="EnumValue"
            drop-down-names="Visible, Collapsed"
            drop-down-values="Visible, Collapsed"
            primitive-value="Visible">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-sparkline
        name="chart"
        id="chart"
        display-type="Line"
        label-member-path="label"
        value-member-path="value"
        marker-visibility="Visible"
        high-marker-visibility="Visible"
        low-marker-visibility="Visible"
        first-marker-visibility="Visible"
        last-marker-visibility="Visible"
        negative-marker-visibility="Visible"
        marker-size="10"
        first-marker-size="10"
        last-marker-size="10"
        low-marker-size="10"
        high-marker-size="10"
        negative-marker-size="10"
        minimum="0"
        maximum="60">
        </igc-sparkline>
    </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

標準範囲

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

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

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

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

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

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 { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
import { SparklineMixedDataItem, SparklineMixedData } from './SparklineMixedData';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule,
    IgcSparklineModule
);

export class Sample {

    private propertyEditorPanel1: IgcPropertyEditorPanelComponent
    private normalRangeVisibilityEditor: IgcPropertyEditorPropertyDescriptionComponent
    private normalRangeMinimumEditor: IgcPropertyEditorPropertyDescriptionComponent
    private normalRangeMaximumEditor: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcSparklineComponent
    private _bind: () => void;

    constructor() {
        var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
        var normalRangeVisibilityEditor = this.normalRangeVisibilityEditor = document.getElementById('NormalRangeVisibilityEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var normalRangeMinimumEditor = this.normalRangeMinimumEditor = document.getElementById('NormalRangeMinimumEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var normalRangeMaximumEditor = this.normalRangeMaximumEditor = document.getElementById('NormalRangeMaximumEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcSparklineComponent;

        this._bind = () => {
            propertyEditorPanel1.componentRenderer = this.renderer;
            propertyEditorPanel1.target = this.chart;
            chart.dataSource = this.sparklineMixedData;
        }
        this._bind();
    }

    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;
    }

}

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="options vertical">
        <igc-property-editor-panel

        description-type="Sparkline"
        is-horizontal="true"
        is-wrapping-enabled="true"
        name="propertyEditorPanel1"
        id="propertyEditorPanel1">
            <igc-property-editor-property-description
            property-path="NormalRangeVisibility"
            name="NormalRangeVisibilityEditor"
            id="NormalRangeVisibilityEditor"
            label="Normal Range Visibility"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-names="Visible, Collapsed"
            drop-down-values="Visible, Collapsed"
            primitive-value="Visible">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="NormalRangeMinimum"
            name="NormalRangeMinimumEditor"
            id="NormalRangeMinimumEditor"
            label="Normal Range Minimum"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-names="0, 10, 15, 20, 25, 30"
            drop-down-values="0, 10, 15, 20, 25, 30"
            primitive-value="25">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="NormalRangeMaximum"
            name="NormalRangeMaximumEditor"
            id="NormalRangeMaximumEditor"
            label="Normal Range Maximum"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-names="0, 10, 15, 20, 25, 30"
            drop-down-values="0, 10, 15, 20, 25, 30"
            primitive-value="25">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-sparkline
        name="chart"
        id="chart"
        display-type="Area"
        label-member-path="label"
        value-member-path="value"
        normal-range-visibility="Visible"
        normal-range-minimum="15"
        normal-range-maximum="25">
        </igc-sparkline>
    </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

トレンドライン

Web Components スパークラインは、実際のスパークラインレイヤーの上に別のレイヤーとして表示される一連のトレンドラインをサポートしています。トレンドラインを表示するには、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 { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
import { SparklineMixedDataItem, SparklineMixedData } from './SparklineMixedData';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule,
    IgcSparklineModule
);

export class Sample {

    private propertyEditorPanel1: IgcPropertyEditorPanelComponent
    private trendLineTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcSparklineComponent
    private _bind: () => void;

    constructor() {
        var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
        var trendLineTypeEditor = this.trendLineTypeEditor = document.getElementById('TrendLineTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcSparklineComponent;

        this._bind = () => {
            propertyEditorPanel1.componentRenderer = this.renderer;
            propertyEditorPanel1.target = this.chart;
            chart.dataSource = this.sparklineMixedData;
        }
        this._bind();
    }

    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;
    }

}

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="options vertical">
        <igc-property-editor-panel

        description-type="Sparkline"
        is-horizontal="true"
        is-wrapping-enabled="true"
        name="propertyEditorPanel1"
        id="propertyEditorPanel1">
            <igc-property-editor-property-description
            property-path="TrendLineType"
            name="TrendLineTypeEditor"
            id="TrendLineTypeEditor"
            label="Trendline Type"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-names="CubicFit, CumulativeAverage, ExponentialAverage, ExponentialFit, LinearFit, LogarithmicFit, ModifiedAverage, None, PowerLawFit, QuadraticFit, QuarticFit, QuinticFit, SimpleAverage, WeightedAverage"
            drop-down-values="CubicFit, CumulativeAverage, ExponentialAverage, ExponentialFit, LinearFit, LogarithmicFit, ModifiedAverage, None, PowerLawFit, QuadraticFit, QuarticFit, QuinticFit, SimpleAverage, WeightedAverage"
            primitive-value="CubicFit">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-sparkline
        name="chart"
        id="chart"
        display-type="Area"
        label-member-path="label"
        value-member-path="value"
        trend-line-type="CubicFit">
        </igc-sparkline>
    </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

不明な値の補間

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

未知の値をプロットするために、Web Components スパークラインの 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 { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
import { SparklineUnknownDataItem, SparklineUnknownData } from './SparklineUnknownData';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule,
    IgcSparklineModule
);

export class Sample {

    private propertyEditorPanel1: IgcPropertyEditorPanelComponent
    private unknownValuePlottingEditor: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcSparklineComponent
    private _bind: () => void;

    constructor() {
        var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
        var unknownValuePlottingEditor = this.unknownValuePlottingEditor = document.getElementById('UnknownValuePlottingEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcSparklineComponent;

        this._bind = () => {
            propertyEditorPanel1.componentRenderer = this.renderer;
            propertyEditorPanel1.target = this.chart;
            chart.dataSource = this.sparklineUnknownData;
        }
        this._bind();
    }

    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;
    }

}

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="options vertical">
        <igc-property-editor-panel

        description-type="Sparkline"
        is-horizontal="true"
        is-wrapping-enabled="true"
        name="propertyEditorPanel1"
        id="propertyEditorPanel1">
            <igc-property-editor-property-description
            property-path="UnknownValuePlotting"
            name="UnknownValuePlottingEditor"
            id="UnknownValuePlottingEditor"
            label="Unknown Value Plotting"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-names="LinearInterpolate, DontPlot"
            drop-down-values="LinearInterpolate, DontPlot"
            primitive-value="LinearInterpolate">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-sparkline
        name="chart"
        id="chart"
        display-type="Area"
        label-member-path="label"
        value-member-path="value"
        unknown-value-plotting="LinearInterpolate">
        </igc-sparkline>
    </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

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

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



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 = 0; i < count; i++) {
            const id = this.pad(count - i, count.toString().length);
            const price = this.getRandomNumber(10000, 90000) / 100;
            const orderCount = this.getRandomNumber(4, 30);
            const orderValue = Math.round(price * orderCount);
            const orderShipped = this.getRandomNumber(30, 100);
            const margin = this.getRandomNumber(5, 10);
            const profit = Math.round(orderValue * (margin / 100));
            const country = this.getRandomItem(this.countries);

            // sales per month for sparkline chart
            const sales: any[] = [];
            for (let m = 0; m < 12; m++) {
                const sale = 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(),
                ProductID: id,
                ProductName: this.getRandomItem(this.names),
                ProductPrice: price,
                Profit: profit,
                ReturnRate: this.getReturnRate(52),
                Status: this.getRandomItem(this.status),
            });
        }
        // console.log("Products:" + items.length)
        return items;
    }

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

    public static getCountryFlag(country: string): string {
        const flag = 'https://static.infragistics.com/xplatform/images/flags/' + country + '.png'
        return flag;
    }

    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 = 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 = num + "";
        // if (s.length)
        while (s.length < size) s = char + s;
        return s;
    }
}
ts

import { Products } from './Products';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids';
import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-data-grids';
import { IgcTemplateCellInfo } from 'igniteui-webcomponents-data-grids';
import { IgcTemplateCellUpdatingEventArgs } from 'igniteui-webcomponents-data-grids';
import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
import { SparklineDisplayType } from 'igniteui-webcomponents-charts';

ModuleManager.register(
    IgcSparklineModule,
    IgcDataGridModule
);

export class SparklineGrid {

    private grid: IgcDataGridComponent;

    public data: any[] = [];

    constructor() {
        this.data = Products.getData();

        this.onUpdatingHistoryColumn = this.onUpdatingHistoryColumn.bind(this);

        this.grid = document.getElementById('grid') as IgcDataGridComponent;
        this.grid.dataSource = this.data;

        const historyColumn = document.getElementById('historyColumn') as IgcTemplateColumnComponent;
        historyColumn.cellUpdating = this.onUpdatingHistoryColumn;
    }

    public onUpdatingHistoryColumn(s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs) {
        const content = e.content as HTMLDivElement;
        let chart: IgcSparklineComponent | null = null;
        let info = e.cellInfo as IgcTemplateCellInfo;

        if (content.childElementCount === 0) {
            chart = new IgcSparklineComponent();
            chart.width = '100%';
            chart.height = '100%';
            chart.valueMemberPath = 'Sold';
            chart.labelMemberPath = 'Week';
            chart.displayType = SparklineDisplayType.Line;
            chart.brush = 'rgb(21, 190, 6)';

            let container = document.createElement("div") as HTMLDivElement;
            container.style.width = "100%";
            container.style.height = "70px";
            container.style.background = "transparent";
            container.append(chart);

            content.appendChild(container);
        }
        else {
            let container = content.children[0] as HTMLDivElement;
            chart = container.children[0] as IgcSparklineComponent;
        }

        if (chart) {
            chart.dataSource = info.rowItem.OrderHistory;
        }
    }
}

new SparklineGrid();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>SparklineGrid</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">
    <igc-data-grid id="grid"
        width="100%"
        height="100%"
        row-height="90"
        auto-generate-columns="false">
        <igc-text-column
            field="ProductID"
            header-text="ID"
            width="*>110"
            horizontal-alignment="Center">
        </igc-text-column>
        <igc-text-column
            field="ProductName"
            header-text="Product"
            width="*>140">
        </igc-text-column>
        <igc-numeric-column
            field="ProductPrice"
            header-text="Price"
            width="*>110"
            positive-prefix="$"
            show-grouping-separator="true"
            min-fraction-digits="2">
        </igc-numeric-column>
        <igc-template-column
            id="historyColumn"
            field="OrderHistory"
            header-text="Order History"
            width="*>180"
            padding-top="10"
            padding-bottom="10"
            horizontal-alignment="Center">
        </igc-template-column>
        <igc-numeric-column
            field="OrderCount"
            header-text="Orders"
            width="*>110"
            horizontal-alignment="Center">
        </igc-numeric-column>
        <igc-image-column
            field="CountryFlag"
            header-text="Country"
            width="*>120"
            is-editable="false"
            content-opacity="1"
            horizontal-alignment="Center"
            padding-top="10"
            padding-bottom="10">
        </igc-image-column>
        <igc-text-column
            field="Status"
            width="*>120"
            horizontal-alignment="Center">
        </igc-text-column>
    </igc-data-grid>
</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

その他のリソース

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

API リファレンス

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