Web Components シェープ チャート
Ignite UI for Web Components シェープ チャートは、一連の形状 (1 つまたは複数の X/Y 座標の配列) をとり、それらをデカルト (x、y) 座標系のポリゴンまたはポリラインのコレクションとして描画するチャートのグループです。シェープ チャートは科学データの強調領域でよく使用されますが、ダイアグラム、青写真、さらには建物の間取り図のプロットにも使用できます。
Web Components 散布ポリゴン チャート
Web Components 散布ポリゴン チャートは、IgcDataChartComponent
コントロールの IgcScatterPolygonSeriesComponent
を使用して、デカルト (x、y) 座標系でポリゴンの配列または配列の配列を描画します。このチャートは、プロット図、青写真、さらには建物の間取り図の塗りつぶし図形に使用できます。
IgcDataChartComponent
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgcScatterPolygonSeriesComponent
にバインドします:
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartShapeCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartShapeModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcScatterPolygonSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcScatterPolygonSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcStyleShapeEventArgs } from 'igniteui-webcomponents-charts';
import { DataContext } from 'igniteui-webcomponents-core';
import { html } from 'lit-html';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartShapeCoreModule,
IgcDataChartShapeModule,
IgcDataChartInteractivityModule,
IgcScatterPolygonSeriesModule
);
export class DataChartTypeScatterPolygonSeries {
constructor() {
this.onAirplaneShapesLoaded = this.onAirplaneShapesLoaded.bind(this);
this.onAirplaneSeatsLoaded = this.onAirplaneSeatsLoaded.bind(this);
this.createTooltip = this.createTooltip.bind(this);
fetch('https://static.infragistics.com/xplatform/json/airplane-shape.json')
.then((response) => response.json())
.then((data) => this.onAirplaneShapesLoaded(data));
fetch('https://static.infragistics.com/xplatform/json/airplane-seats.json')
.then((response) => response.json())
.then((data) => this.onAirplaneSeatsLoaded(data));
}
public onAirplaneShapesLoaded(jsonData: any[]) {
console.log('onAirplaneShapesLoaded');
let airplaneShapeSeries = (document.getElementById('airplaneShapeSeries') as IgcScatterPolygonSeriesComponent);
airplaneShapeSeries.dataSource = jsonData;
airplaneShapeSeries.renderSeries(false);
}
public onAirplaneSeatsLoaded(jsonData: any[]) {
console.log('onAirplaneSeatsLoaded');
let airplaneSeatSeries = (document.getElementById('airplaneSeatSeries') as IgcScatterPolygonSeriesComponent);
airplaneSeatSeries.styleShape = this.onStylingShape;
airplaneSeatSeries.dataSource = jsonData;
airplaneSeatSeries.tooltipTemplate = this.createTooltip;
airplaneSeatSeries.renderSeries(false);
}
public onStylingShape(sender: any, args: IgcStyleShapeEventArgs) {
args.shapeOpacity = 1.0;
args.shapeStrokeThickness = 0.5;
args.shapeStroke = "Black";
args.shapeFill = "White";
const itemRecord = args.item as any;
if (itemRecord.class === 'First') {
args.shapeFill = "DodgerBlue";
}
if (itemRecord.class === 'Business') {
args.shapeFill = "LimeGreen";
}
if (itemRecord.class === 'Premium') {
args.shapeFill = "Orange";
}
if (itemRecord.class === 'Economy') {
args.shapeFill = "Red";
}
if (itemRecord.status === 'Sold') {
args.shapeFill = 'Gray';
}
}
public createTooltip(context: any): any {
const dataContext = context as DataContext;
if (!dataContext) return null;
const dataItem = dataContext.item as any;
if (!dataItem) return null;
let tooltip = html`<div>
<div class='ui-tooltip-content'>
<div>Class: ${dataItem.class}</div>
<div>Seat: ${dataItem.seat}</div>
<div>Price: $${dataItem.price}</div>
<div>Status: ${dataItem.status}</div>
</div>`;
return tooltip;
}
}
new DataChartTypeScatterPolygonSeries();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartTypeScatterPolygonSeries</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" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/custom-legend.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options horizontal">
<div class="legend-title">
<span>Airplane Seating Chart (Polygons)</span>
</div>
</div>
<div class="custom-legend">
<div><span style="background: DodgerBlue; "></span><label>First Class</label></div>
<div><span style="background: LimeGreen; "></span><label>Business Class</label></div>
<div><span style="background: Orange; "></span><label>Premium Class</label></div>
<div><span style="background: Red; "></span><label>Economy Class</label></div>
<div><span style="background: Gray; "></span><label>Sold Seat</label> </div>
<div><span style="background: LightGray; "></span><label>Airplane</label> </div>
</div>
<igc-data-chart id="chart" width="100%" height="100%"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true">
<igc-numeric-x-axis name="xAxis" minimum-value=-1000 maximum-value=1000 interval=200>
</igc-numeric-x-axis>
<igc-numeric-y-axis name="yAxis" minimum-value=-600 maximum-value=600 interval=200>
</igc-numeric-y-axis>
<igc-scatter-polygon-series
id="airplaneShapeSeries"
name="airplaneShapeSeries"
x-axis-name="xAxis"
y-axis-name="yAxis"
shape-member-path="points"
title="Airplane Shape"
thickness="0.5"
brush="LightGray"
outline="Black">
</igc-scatter-polygon-series>
<igc-scatter-polygon-series
id="airplaneSeatSeries"
name="airplaneSeatSeries"
x-axis-name="xAxis"
y-axis-name="yAxis"
shape-member-path="points"
title="Airplane Seats">
</igc-scatter-polygon-series>
</igc-data-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
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Web Components 散布ポリライン チャート
Web Components 散布ポリライン チャートは、IgcDataChartComponent
コントロールの IgcScatterPolylineSeriesComponent
を使用して、デカルト (x、y) 座標系でポリラインの配列または配列の配列を描画します。このチャートは、プロット図、青写真、さらには建物の間取り図のアウトラインに使用できます。また、大量の要素間の複雑な関係を視覚化することもできます。
IgcDataChartComponent
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgcScatterPolylineSeriesComponent
にバインドします:
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartShapeCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartShapeModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcScatterPolylineSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcScatterPolylineSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcStyleShapeEventArgs } from 'igniteui-webcomponents-charts';
import { DataContext } from 'igniteui-webcomponents-core';
import { html } from 'lit-html';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartShapeCoreModule,
IgcDataChartShapeModule,
IgcDataChartInteractivityModule,
IgcScatterPolylineSeriesModule
);
export class DataChartTypeScatterPolylineSeries {
constructor() {
this.onAirplaneShapesLoaded = this.onAirplaneShapesLoaded.bind(this);
this.onAirplaneSeatsLoaded = this.onAirplaneSeatsLoaded.bind(this);
this.createTooltip = this.createTooltip.bind(this);
fetch('https://static.infragistics.com/xplatform/json/airplane-shape.json')
.then((response) => response.json())
.then((data) => this.onAirplaneShapesLoaded(data));
fetch('https://static.infragistics.com/xplatform/json/airplane-seats.json')
.then((response) => response.json())
.then((data) => this.onAirplaneSeatsLoaded(data));
}
public onAirplaneShapesLoaded(jsonData: any[]) {
console.log('onAirplaneShapesLoaded');
let airplaneShapeSeries = (document.getElementById('airplaneShapeSeries') as IgcScatterPolylineSeriesComponent);
airplaneShapeSeries.dataSource = jsonData;
airplaneShapeSeries.renderSeries(false);
}
public onAirplaneSeatsLoaded(jsonData: any[]) {
console.log('onAirplaneSeatsLoaded');
let airplaneSeatSeries = (document.getElementById('airplaneSeatSeries') as IgcScatterPolylineSeriesComponent);
airplaneSeatSeries.styleShape = this.onStylingShape;
airplaneSeatSeries.dataSource = jsonData;
airplaneSeatSeries.tooltipTemplate = this.createTooltip;
airplaneSeatSeries.renderSeries(false);
}
public onStylingShape(sender: any, args: IgcStyleShapeEventArgs) {
args.shapeOpacity = 1.0;
args.shapeStrokeThickness = 1.0;
args.shapeStroke = "Black";
const itemRecord = args.item as any;
if (itemRecord.class === 'First') {
args.shapeStroke = "DodgerBlue";
}
if (itemRecord.class === 'Business') {
args.shapeStroke = "LimeGreen";
}
if (itemRecord.class === 'Premium') {
args.shapeStroke = "Orange";
}
if (itemRecord.class === 'Economy') {
args.shapeStroke = "Red";
}
if (itemRecord.status === 'Sold') {
args.shapeStroke = 'Gray';
}
}
public createTooltip(context: any): any {
const dataContext = context as DataContext;
if (!dataContext) return null;
const dataItem = dataContext.item as any;
if (!dataItem) return null;
let tooltip = html`<div>
<div class='ui-tooltip-content'>
<div>Class: ${dataItem.class}</div>
<div>Seat: ${dataItem.seat}</div>
<div>Price: $${dataItem.price}</div>
<div>Status: ${dataItem.status}</div>
</div>`;
return tooltip;
}
}
new DataChartTypeScatterPolylineSeries();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartTypeScatterPolylineSeries</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" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/custom-legend.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options horizontal">
<div class="legend-title">
<span>Airplane Seating Chart (Polylines)</span>
</div>
</div>
<div class="custom-legend">
<div><span style="background: DodgerBlue; "></span><label>First Class</label></div>
<div><span style="background: LimeGreen; "></span><label>Business Class</label></div>
<div><span style="background: Orange; "></span><label>Premium Class</label></div>
<div><span style="background: Red; "></span><label>Economy Class</label></div>
<div><span style="background: Gray; "></span><label>Sold Seat</label> </div>
<div><span style="background: LightGray; "></span><label>Airplane</label> </div>
</div>
<igc-data-chart id="chart" width="100%" height="100%"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true">
<igc-numeric-x-axis name="xAxis" minimum-value=-1000 maximum-value=1000 interval=200>
</igc-numeric-x-axis>
<igc-numeric-y-axis name="yAxis" minimum-value=-600 maximum-value=600 interval=200>
</igc-numeric-y-axis>
<igc-scatter-polyline-series
id="airplaneShapeSeries"
name="airplaneShapeSeries"
x-axis-name="xAxis"
y-axis-name="yAxis"
shape-member-path="points"
title="Airplane Shape"
thickness="1"
brush="Black"
outline="Black">
</igc-scatter-polyline-series>
<igc-scatter-polyline-series
id="airplaneSeatSeries"
name="airplaneSeatSeries"
x-axis-name="xAxis"
y-axis-name="yAxis"
shape-member-path="points"
title="Airplane Seats">
</igc-scatter-polyline-series>
</igc-data-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
その他のリソース
関連するチャートタイプの詳細については、以下のトピックを参照してください。
API リファレンス
以下は、上記のセクションで説明された API メンバーのリストです。