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));
}
}
}
tsimport { 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));
}
}
}
tsimport { 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));
}
}
}
tsimport { 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));
}
}
}
tsimport { 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;
}
}
tsimport { 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 メンバーのリストです。