Web Components 円チャート
Ignite UI for Web Components 円チャート (円グラフ) は、データセットのカテゴリ (部分) が合計 (全体) 値になる方法を示す部分対全体チャートです。カテゴリは、円グラフまたは円グラフのセクションとして描画されます。各セクション (円スライス) は基本データ値に比例する円弧の長さを持ちます。カテゴリは、分析中の合計値に対する値の割合に基づいて、100 または 100% の部分として他のカテゴリに比例して表示されます。
Web Components 円チャートの例
データ項目を文字列と数値データでバインドすることで、IgcPieChartComponent
の円チャートが作成できます。これらのデータ値を足すと可視化率 100% になります。この例では部門ごとの予算支出の全体的な内訳を示しています。
export class EnergyGlobalDemandItem {
public constructor(init: Partial<EnergyGlobalDemandItem>) {
Object.assign(this, init);
}
public value: number;
public category: string;
public summary: string;
}
export class EnergyGlobalDemand extends Array<EnergyGlobalDemandItem> {
public constructor(items: Array<EnergyGlobalDemandItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EnergyGlobalDemandItem(
{
value: 37,
category: `Cooling`,
summary: `Cooling 37%`
}),
new EnergyGlobalDemandItem(
{
value: 25,
category: `Residential`,
summary: `Residential 25%`
}),
new EnergyGlobalDemandItem(
{
value: 12,
category: `Heating`,
summary: `Heating 12%`
}),
new EnergyGlobalDemandItem(
{
value: 11,
category: `Lighting`,
summary: `Lighting 11%`
}),
new EnergyGlobalDemandItem(
{
value: 15,
category: `Other`,
summary: `Other 15%`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcItemLegendModule, IgcPieChartModule } from 'igniteui-webcomponents-charts';
import { IgcItemLegendComponent, IgcPieChartComponent } from 'igniteui-webcomponents-charts';
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcItemLegendModule,
IgcPieChartModule
);
export class Sample {
private legend: IgcItemLegendComponent
private chart: IgcPieChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcItemLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcPieChartComponent;
this._bind = () => {
chart.dataSource = this.energyGlobalDemand;
chart.legend = this.legend;
}
this._bind();
}
private _energyGlobalDemand: EnergyGlobalDemand = null;
public get energyGlobalDemand(): EnergyGlobalDemand {
if (this._energyGlobalDemand == null)
{
this._energyGlobalDemand = new EnergyGlobalDemand();
}
return this._energyGlobalDemand;
}
}
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="legend-title">
Global Electricity Demand by Energy Use
</div>
<div class="legend">
<igc-item-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-item-legend>
</div>
<div class="container fill">
<igc-pie-chart
name="chart"
id="chart"
legend-label-member-path="category"
label-member-path="summary"
labels-position="BestFit"
value-member-path="value"
radius-factor="0.7">
</igc-pie-chart>
</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
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Web Components 円チャートの推奨事項
円チャートは小さいデータ セットに適していて、一目で読みやすくなります。円チャートは、部分対全体の可視化の一種です。その他:
- 円
- ドーナツ (リング)
- ファンネル
- 積層型エリア
- 積層型 100% エリア (積層型パーセント エリア)
- 積層型棒
- 積層型 100% 棒 (積層型パーセント棒)
- ツリーマップ
- ウォーターフォール
Web Components 円チャートは、データを解析するためのビューアー ツールを提供するインタラクティブ機能を含みます。
- 凡例
- スライスの分割
- スライスの選択
- チャート アニメーション
円チャートのベスト プラクティス:
- スライスまたはセグメントを、合計値または全体に対するパーセンテージ値として比較する。
- カテゴリのグループがどのようにより小さなセグメントに分割されるかを表示する。
- 小さい非階層データ セット (6 ~ 8 セグメント未満のデータ) を表示する。
- データ セグメントの合計が 100% になるようにする。
- データの順序を最大 (最高) から最小 (最低) に並べ替える。
- 12 時の位置から始めて時計回りに進む標準的なプレゼンテーション方法を使用する。
- カラー パレットがセグメント/スライスで識別できるようにする。
- データラベルを読みやすくするため、セグメントと凡例のどちらに配置するべきか検討する。
- より分かりやすい表現のために、円の代わりに棒またはリング チャートを選択する。
- 比較分析のために複数の円チャートを並べて配置しないようにする。
以下の場合に円チャートを使用しないでください。
- 経時変化を比較する場合 - 棒チャート、折れ線チャート、またはエリア チャートを使用してください。
- 正確なデータ比較が必要な場合 - 棒チャート、折れ線チャート、またはエリア チャートを使用してください。
- 6 セグメントまたは 8 セグメント (大量のデータ) がある場合 - データ ストーリーに適した棒チャート、折れ線チャート、またはエリア チャートを検討してください。
- 棒チャートで値の違いがわかりやすくなります。
Web Components 円チャートの凡例
凡例は、各ポイントに関する情報を表示し、そのポイントの合計に対する割合を示します 凡例クリックを使用してポイントを縮小できます。
円チャート コンポーネントの隣に凡例を表示するには、ItemLegend を作成し、IgcLegendComponent
プロパティに割り当てます。legendLabelMemberPath
は、各円スライスの凡例項目を表示するために使用するデータ モデルのプロパティを指定します。
また、凡例項目の外観をカスタマイズするために legendItemTemplate
および legendItemBadgeTemplate
プロパティ、IgcItemLegendComponent
の複数のフォント プロパティも使用できます。
export class EnergyGlobalDemandItem {
public constructor(init: Partial<EnergyGlobalDemandItem>) {
Object.assign(this, init);
}
public value: number;
public category: string;
public summary: string;
}
export class EnergyGlobalDemand extends Array<EnergyGlobalDemandItem> {
public constructor(items: Array<EnergyGlobalDemandItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EnergyGlobalDemandItem(
{
value: 37,
category: `Cooling`,
summary: `Cooling 37%`
}),
new EnergyGlobalDemandItem(
{
value: 25,
category: `Residential`,
summary: `Residential 25%`
}),
new EnergyGlobalDemandItem(
{
value: 12,
category: `Heating`,
summary: `Heating 12%`
}),
new EnergyGlobalDemandItem(
{
value: 11,
category: `Lighting`,
summary: `Lighting 11%`
}),
new EnergyGlobalDemandItem(
{
value: 15,
category: `Other`,
summary: `Other 15%`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcItemLegendModule, IgcPieChartModule } from 'igniteui-webcomponents-charts';
import { IgcItemLegendComponent, IgcPieChartComponent } from 'igniteui-webcomponents-charts';
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcItemLegendModule,
IgcPieChartModule
);
export class Sample {
private legend: IgcItemLegendComponent
private chart: IgcPieChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcItemLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcPieChartComponent;
this._bind = () => {
chart.dataSource = this.energyGlobalDemand;
chart.legend = this.legend;
}
this._bind();
}
private _energyGlobalDemand: EnergyGlobalDemand = null;
public get energyGlobalDemand(): EnergyGlobalDemand {
if (this._energyGlobalDemand == null)
{
this._energyGlobalDemand = new EnergyGlobalDemand();
}
return this._energyGlobalDemand;
}
}
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="legend-title">
Global Electricity Demand by Energy Use
</div>
<div class="legend">
<igc-item-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-item-legend>
</div>
<div class="container fill">
<igc-pie-chart
name="chart"
id="chart"
value-member-path="value"
label-member-path="summary"
labels-position="OutsideEnd"
legend-label-member-path="category"
outlines="white"
radius-factor="0.7"
label-extent="30">
</igc-pie-chart>
</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 円チャートその他の分類項目
円チャート コンポーネントの基本データに、小さい値を含む多くの項目が含まれる場合があります。この場合、Others カテゴリは、単一スライスへの複数のデータ値の自動集計を許可します。
以下のサンプルは、othersCategoryThreshold
を 2 に設定、othersCategoryType
は Number に設定されています。したがって、2 以下の値を含む項目は、Others カテゴリに割り当てられます。
othersCategoryType
を Percent に設定すると、othersCategoryThreshold
は値ではなくパーセンテージとして解釈されます。つまり、値がすべての項目の値の合計の 2% 未満である項目は、Others カテゴリに割り当てられます。使用しているアプリケーションに最も適切な othersCategoryType
を使用できます。
export class EnergyGlobalDemandItem {
public constructor(init: Partial<EnergyGlobalDemandItem>) {
Object.assign(this, init);
}
public value: number;
public category: string;
public summary: string;
}
export class EnergyGlobalDemand extends Array<EnergyGlobalDemandItem> {
public constructor(items: Array<EnergyGlobalDemandItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EnergyGlobalDemandItem(
{
value: 37,
category: `Cooling`,
summary: `Cooling 37%`
}),
new EnergyGlobalDemandItem(
{
value: 25,
category: `Residential`,
summary: `Residential 25%`
}),
new EnergyGlobalDemandItem(
{
value: 12,
category: `Heating`,
summary: `Heating 12%`
}),
new EnergyGlobalDemandItem(
{
value: 11,
category: `Lighting`,
summary: `Lighting 11%`
}),
new EnergyGlobalDemandItem(
{
value: 15,
category: `Other`,
summary: `Other 15%`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcItemLegendModule, IgcPieChartModule } from 'igniteui-webcomponents-charts';
import { IgcItemLegendComponent, IgcPieChartComponent } from 'igniteui-webcomponents-charts';
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcItemLegendModule,
IgcPieChartModule
);
export class Sample {
private legend: IgcItemLegendComponent
private chart: IgcPieChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcItemLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcPieChartComponent;
this._bind = () => {
chart.dataSource = this.energyGlobalDemand;
chart.legend = this.legend;
}
this._bind();
}
private _energyGlobalDemand: EnergyGlobalDemand = null;
public get energyGlobalDemand(): EnergyGlobalDemand {
if (this._energyGlobalDemand == null)
{
this._energyGlobalDemand = new EnergyGlobalDemand();
}
return this._energyGlobalDemand;
}
}
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="legend-title">
Global Electricity Demand by Energy Use
</div>
<div class="legend">
<igc-item-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-item-legend>
</div>
<div class="container fill">
<igc-pie-chart
name="chart"
id="chart"
label-member-path="summary"
labels-position="OutsideEnd"
label-extent="30"
value-member-path="value"
outlines="white"
others-category-threshold="10"
others-category-type="Number"
others-category-text="Others"
radius-factor="0.7"
legend-label-member-path="category">
</igc-pie-chart>
</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 円チャートの展開
円チャート コンポーネントは個々の円スライスの選択と展開だけでなく、選択状態を変更しカスタム ロジックを実装することを可能にする SliceClick
イベントをコンポーネントサポートします。
import { IgcPieChartModule } from 'igniteui-webcomponents-charts';
import { IgcPieChartComponent } from 'igniteui-webcomponents-charts';
import { IgcItemLegendModule } from 'igniteui-webcomponents-charts';
import { IgcItemLegendComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcSliceClickEventArgs } from 'igniteui-webcomponents-charts';
ModuleManager.register(IgcPieChartModule, IgcItemLegendModule);
export class PieChartExplosion {
private chart: IgcPieChartComponent;
constructor() {
this.onSliceClick= this.onSliceClick.bind(this);
this.chart = document.getElementById('chart') as IgcPieChartComponent;
this.chart.dataSource = this.getData();
this.chart.sliceClick = this.onSliceClick;
this.chart.legend = document.getElementById('legend') as IgcItemLegendComponent;
}
onSliceClick(s: IgcPieChartComponent, e: IgcSliceClickEventArgs) {
e.isExploded = !e.isExploded;
e.isSelected = false;
}
public getData(): any[] {
let data = [
{ MarketShare: 37, Company: "Cooling", Summary: "Cooling 37%" },
{ MarketShare: 25, Company: "Residential", Summary: "Residential 25%" },
{ MarketShare: 12, Company: "Heating", Summary: "Heating 12%" },
{ MarketShare: 8, Company: "Lighting", Summary: "Lighting 8%" },
{ MarketShare: 18, Company: "Other", Summary: "Other 18%" }
];
return data;
}
}
new PieChartExplosion();
ts<!DOCTYPE html>
<html>
<head>
<title>PieChartExplosion</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">
<div class="options vertical">
<label class="legend-title">Global Electricity Demand by Energy Use </label>
<igc-item-legend id="legend" orientation="Horizontal"></igc-item-legend>
</div>
<igc-pie-chart id="chart"
width="100%" height="100%"
label-member-path="Summary"
value-member-path="MarketShare"
exploded-radius="0.2"
exploded-slices="1, 2"
allow-slice-explosion="true"
radius-factor="0.6"
labels-position="OutsideEnd"
label-extent="30"
legend-label-member-path="Company">
</igc-pie-chart>
</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 円チャートの選択
デフォルトで、円チャートはマウス クリックによるスライス選択をサポートします。選択されたスライスは、selectedItems
プロパティで取得します。選択したスライスがハイライト表示されます。
円チャートのモードは selectionMode
プロパティで設定します。デフォルト値は Single
です。選択機能を無効化するためにはプロパティを Manual
に設定します。
円チャート コンポーネントは、選択モードを 3 つコンポーネントサポートします。
- Single - single モードに設定すると、一度に 1 つのスライスのみ選択します。他のスライスを選択すると、最初に選択したスライスは選択解除され、新しいスライスが選択されます。
- Multiple - Multiple モードに設定すると、一度に複数のスライスを選択します。スライスをクリックするとスライスが選択され、他のスライスをクリックすると、最初のスライスも、新しくクリックしたスライスも選択されます。
- 手動 - Manual モードに設定すると、選択は無効化されます。
円チャート コンポーネントには、選択機能に関連する 4 つのイベントがあります。
- SelectedItemChanging
- SelectedItemChanged
- SelectedItemsChanging
- SelectedItemsChanged
「Changing」で終わるイベントはキャンセル可能なイベントです。すなわち、イベント引数プロパティ Cancel
を true に設定することで、スライスの選択を停止します。True に設定すると、関連付けられたプロパティは更新されず、その結果スライスは選択されません。この設定はたとえば、スライスのデータによって一定のスライスの選択を無効化する場合に使用します。
「その他」スライスをクリックすると、IgcPieSliceOthersContext
オブジェクトが返されます。オブジェクトは、「その他」スライスに含まれるデータ項目のリストがあります。
import { IgcPieChartModule } from 'igniteui-webcomponents-charts';
import { IgcPieChartComponent } from 'igniteui-webcomponents-charts';
import { IgcItemLegendComponent } from 'igniteui-webcomponents-charts';
import { IgcItemLegendModule } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcSliceClickEventArgs } from 'igniteui-webcomponents-charts';
ModuleManager.register(IgcPieChartModule,IgcItemLegendModule);
export class PieChartSelection {
private chart: IgcPieChartComponent;
constructor() {
this.onSliceClick= this.onSliceClick.bind(this);
this.chart = document.getElementById('chart') as IgcPieChartComponent;
this.chart.dataSource = this.getData();
this.chart.sliceClick = this.onSliceClick;
this.chart.selectedSliceOpacity = 0.85;
this.chart.selectedSliceStrokeThickness = 4;
this.chart.selectedSliceStroke = 'rgba(0, 0, 0, 0.5)';
this.chart.legend = document.getElementById('legend') as IgcItemLegendComponent;
}
onSliceClick(s: IgcPieChartComponent, e: IgcSliceClickEventArgs) {
e.isExploded = !e.isExploded;
e.isSelected = true;
}
public getData(): any[] {
let data = [
{ MarketShare: 37, Company: "Cooling", Summary: "Cooling 37%" },
{ MarketShare: 25, Company: "Residential", Summary: "Residential 25%" },
{ MarketShare: 12, Company: "Heating", Summary: "Heating 12%" },
{ MarketShare: 8, Company: "Lighting", Summary: "Lighting 8%" },
{ MarketShare: 18, Company: "Other", Summary: "Other 18%" }
];
return data;
}
}
new PieChartSelection();
ts<!DOCTYPE html>
<html>
<head>
<title>PieChartSelection</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">
<div class="options vertical">
<label class="legend-title">Global Electricity Demand by Energy Use </label>
<igc-item-legend id="legend" orientation="Horizontal"></igc-item-legend>
</div>
<igc-pie-chart id="chart"
width="100%"
height="calc(100% - 2.5rem)"
label-member-path="Summary"
value-member-path="MarketShare"
selection-mode="Multiple"
radius-factor="0.6"
labels-position="OutsideEnd"
label-extent="30"
legend-label-member-path="Company">
</igc-pie-chart>
</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 円チャートのアニメーション
チャートの半径をスケールする radiusFactor
プロパティを設定して円チャートをすばやくアニメーション化できます。startAngle
プロパティを設定してチャートが回転する間、チャートの角度が増加し続けるようにします。
以下のコードでは、radiusFactor がチャートをサイズの 0.25% 増加し、startAngle がチャートを 1 度回転しています。radiusFactor と startAngle が最大値に達すると、アニメーション フラグをリセットし、間隔をクリアしてアニメーションを停止します。
import { IgcPieChartModule } from 'igniteui-webcomponents-charts';
import { IgcPieChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(IgcPieChartModule);
export class PieChartAnimation {
private chart: IgcPieChartComponent;
private interval: number = -1;
public isAnimating: boolean = false;
constructor() {
this.onAnimationToggle = this.onAnimationToggle.bind(this);
this.onAnimationClear = this.onAnimationClear.bind(this);
this.chart = document.getElementById('chart') as IgcPieChartComponent;
this.chart.dataSource = [
{ MarketShare: 37, Company: "Cooling", Summary: "Cooling 37%" },
{ MarketShare: 25, Company: "Residential", Summary: "Residential 25%" },
{ MarketShare: 12, Company: "Heating", Summary: "Heating 12%" },
{ MarketShare: 8, Company: "Lighting", Summary: "Lighting 8%" },
{ MarketShare: 18, Company: "Other", Summary: "Other 18%" }
];
this.onChartInit();
let Animatebutton = document.getElementById('animateButton') as HTMLInputElement;
Animatebutton!.addEventListener('click', this.onAnimationToggle);
}
public componentWillUnmount() {
this.onAnimationClear();
}
public onAnimationToggle = () => {
if (!this.isAnimating) {
this.chart.startAngle = 0;
this.chart.radiusFactor = 0.1;
this.isAnimating = true;
this.interval = window.setInterval(() => this.tick(), 15);
} else {
this.isAnimating = false;
this.onAnimationClear();
}
}
public onAnimationClear(): void {
if (this.interval >= 0) {
window.clearInterval(this.interval);
this.interval = -1;
}
}
public onChartInit(): void {
this.onAnimationClear();
this.onAnimationToggle();
}
public tick(): void {
if (this.isAnimating) {
if (this.chart.radiusFactor < 1.0)
this.chart.radiusFactor += 0.0025;
if (this.chart.startAngle < 360)
this.chart.startAngle++;
if (this.chart.radiusFactor >= 1.0 &&
this.chart.startAngle >= 360) {
this.isAnimating = false;
this.onAnimationClear();
}
}
}
}
new PieChartAnimation();
ts<!DOCTYPE html>
<html>
<head>
<title>PieChartAnimation</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">
<div class="options horizontal">
<button id="animateButton">Animate Chart</button>
</div>
<div class="container vertical">
<igc-pie-chart id="chart" width="100%" height="100%"
label-member-path="Summary"
value-member-path="MarketShare"
legend-label-member-path="Company"
labels-position="InsideEnd"
start-angle = 0
label-extent = 0.7
radius-factor="0.1">
</igc-pie-chart>
</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 円チャートのスタイル設定
円チャートを作成したら、次に示すように、チャートのスライスの色を変更するなど、スタイルをさらにカスタマイズすることができます。
export class EnergyGlobalDemandItem {
public constructor(init: Partial<EnergyGlobalDemandItem>) {
Object.assign(this, init);
}
public value: number;
public category: string;
public summary: string;
}
export class EnergyGlobalDemand extends Array<EnergyGlobalDemandItem> {
public constructor(items: Array<EnergyGlobalDemandItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EnergyGlobalDemandItem(
{
value: 37,
category: `Cooling`,
summary: `Cooling 37%`
}),
new EnergyGlobalDemandItem(
{
value: 25,
category: `Residential`,
summary: `Residential 25%`
}),
new EnergyGlobalDemandItem(
{
value: 12,
category: `Heating`,
summary: `Heating 12%`
}),
new EnergyGlobalDemandItem(
{
value: 11,
category: `Lighting`,
summary: `Lighting 11%`
}),
new EnergyGlobalDemandItem(
{
value: 15,
category: `Other`,
summary: `Other 15%`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcPieChartModule, IgcItemLegendModule } from 'igniteui-webcomponents-charts';
import { IgcItemLegendComponent, IgcPieChartComponent } from 'igniteui-webcomponents-charts';
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcPieChartModule,
IgcItemLegendModule
);
export class Sample {
private legend: IgcItemLegendComponent
private chart: IgcPieChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcItemLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcPieChartComponent;
this._bind = () => {
chart.dataSource = this.energyGlobalDemand;
chart.legend = this.legend;
}
this._bind();
}
private _energyGlobalDemand: EnergyGlobalDemand = null;
public get energyGlobalDemand(): EnergyGlobalDemand {
if (this._energyGlobalDemand == null)
{
this._energyGlobalDemand = new EnergyGlobalDemand();
}
return this._energyGlobalDemand;
}
}
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="legend-title">
Global Electricity Demand by Energy Use
</div>
<div class="legend">
<igc-item-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-item-legend>
</div>
<div class="container fill">
<igc-pie-chart
name="chart"
id="chart"
legend-label-member-path="category"
value-member-path="value"
label-member-path="summary"
labels-position="OutsideEnd"
label-extent="30"
brushes="rgba(247, 210, 98, 1) rgba(168, 168, 183, 1) rgba(224, 81, 169, 1) rgba(248, 161, 95, 1) rgba(115, 86, 86, 1)"
outlines="white"
radius-factor="0.7"
start-angle="0">
</igc-pie-chart>
</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 ラジアル円チャート
ラジアル円チャートはラジアル チャートのグループに属し、チャートの中心からデータ ポイントの位置に向かって伸びる円スライスを使用します。このチャート タイプは、複数の一連のデータ ポイントを分類するという概念を採用しており、データ ポイントを水平線に沿って引き伸ばすのではなく、円形の軸に沿ってラップします。
export class FootballPlayerStatsItem {
public constructor(init: Partial<FootballPlayerStatsItem>) {
Object.assign(this, init);
}
public attribute: string;
public ronaldo: number;
public messi: number;
}
export class FootballPlayerStats extends Array<FootballPlayerStatsItem> {
public constructor(items: Array<FootballPlayerStatsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new FootballPlayerStatsItem(
{
attribute: `Dribbling`,
ronaldo: 8,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Passing`,
ronaldo: 8,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Finishing`,
ronaldo: 10,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Free Kicks`,
ronaldo: 8,
messi: 9
}),
new FootballPlayerStatsItem(
{
attribute: `Penalties`,
ronaldo: 9,
messi: 7
}),
new FootballPlayerStatsItem(
{
attribute: `Physical`,
ronaldo: 10,
messi: 7
}),
new FootballPlayerStatsItem(
{
attribute: `Team Play`,
ronaldo: 7,
messi: 9
}),
new FootballPlayerStatsItem(
{
attribute: `Heading`,
ronaldo: 9,
messi: 6
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialPieSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartRadialModule,
IgcDataChartRadialCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private angleAxis: IgcCategoryAngleAxisComponent
private radiusAxis: IgcNumericRadiusAxisComponent
private radialPieSeries1: IgcRadialPieSeriesComponent
private radialPieSeries2: IgcRadialPieSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var angleAxis = this.angleAxis = document.getElementById('angleAxis') as IgcCategoryAngleAxisComponent;
var radiusAxis = this.radiusAxis = document.getElementById('radiusAxis') as IgcNumericRadiusAxisComponent;
var radialPieSeries1 = this.radialPieSeries1 = document.getElementById('RadialPieSeries1') as IgcRadialPieSeriesComponent;
var radialPieSeries2 = this.radialPieSeries2 = document.getElementById('RadialPieSeries2') as IgcRadialPieSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
angleAxis.dataSource = this.footballPlayerStats;
radialPieSeries1.dataSource = this.footballPlayerStats;
radialPieSeries1.angleAxis = this.angleAxis;
radialPieSeries1.valueAxis = this.radiusAxis;
radialPieSeries2.dataSource = this.footballPlayerStats;
radialPieSeries2.angleAxis = this.angleAxis;
radialPieSeries2.valueAxis = this.radiusAxis;
}
this._bind();
}
private _footballPlayerStats: FootballPlayerStats = null;
public get footballPlayerStats(): FootballPlayerStats {
if (this._footballPlayerStats == null)
{
this._footballPlayerStats = new FootballPlayerStats();
}
return this._footballPlayerStats;
}
}
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="legend-title">
Ronaldo vs Messi Player Stats
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-category-angle-axis
name="angleAxis"
id="angleAxis"
label="attribute">
</igc-category-angle-axis>
<igc-numeric-radius-axis
name="radiusAxis"
id="radiusAxis"
inner-radius-extent-scale="0.1"
interval="2"
minimum-value="0"
maximum-value="10">
</igc-numeric-radius-axis>
<igc-radial-pie-series
name="RadialPieSeries1"
id="RadialPieSeries1"
value-member-path="ronaldo"
show-default-tooltip="false"
area-fill-opacity="0.8"
thickness="3"
title="Ronaldo">
</igc-radial-pie-series>
<igc-radial-pie-series
name="RadialPieSeries2"
id="RadialPieSeries2"
value-member-path="messi"
show-default-tooltip="false"
area-fill-opacity="0.8"
thickness="3"
title="Messi">
</igc-radial-pie-series>
<igc-data-tool-tip-layer
name="dataToolTipLayer"
id="dataToolTipLayer">
</igc-data-tool-tip-layer>
</igc-data-chart>
</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
その他のリソース
API リファレンス
以下のテーブルは、上記のセクションで説明した API メンバーをリストします。
legendItemBadgeTemplate
legendItemTemplate
legendLabelMemberPath
othersCategoryThreshold
othersCategoryType
selectionMode
チャート タイプ | コントロール名 | API メンバー |
---|---|---|
円チャート | IgcPieChartComponent |
PieChart |
ラジアル円チャート | IgcDataChartComponent |
IgcRadialPieSeriesComponent |