Web Components チャートとグラフの概要
Ignite UI for Web Components チャートおよびグラフは、データ視覚化の広範なライブラリであり、Web アプリやモバイル アプリの魅力的でインタラクティブなチャートやダッシュボードを実現します。速度と美しさを重視して構築され、最新のすべてのブラウザで動作するように設計されており、完全なタッチとインタラクティブ機能により、レスポンシブ ビジュアルをあらゆるデバイスの次のアプリにすばやく簡単に組み込むことができます。
Ignite UI for Web Components チャートは、カテゴリ シリーズ、ファイナンシャル シリーズ、極座標シリーズ、ラジアル シリーズ、範囲シリーズ、散布シリーズ、シェイプ シリーズ、地理空間シリーズなど、あらゆるタイプのデータを視覚化できる 65 種類以上のシリーズと組み合わせをサポートします。実行している比較のタイプ、または伝えようとしているデータ ストーリーのタイプに関係なく、次のいずれかの方法でデータを表すことができます:
- 時間毎の変化
- 比較
- 相関
- 配布
- 地理空間
- 概要 + 詳細
- 部分から全体
- ランキング
インフラジスティックスの Web Components チャートを使用して、最もニーズの高い視覚化を強化してください。
Web Components チャートとグラフのタイプ
Web Components 製品には、単一のチャート表示からインタラクティブなダッシュボードまで、あらゆるシナリオに対応する 65 を超えるさまざまなチャートおよびグラフ タイプがあります。モバイル アプリやウェブ アプリ用に、円、棒、エリア、折れ線、ポイント、積層型、ドーナツ、散布、ゲージ、極座標、ツリーマップ、株価、ファイナンシャル、地理空間マップなどの Web Components チャートを作成できます。Web Components チャートと他のチャートの利点は、次のような機能が完全にサポートされていることです:
- 組み込まれたレスポンシブ Web デザイン
- マウス、キーボード、タッチを使用したインタラクティブなパンとズーム
- チャート アニメーションのフル コントロール
- チャート ドリルダウン イベント
- リアルタイム ストリーミングのサポート
- 大量 (数百万のデータ ポイント) のサポート
- トレンドラインおよびその他のデータ分析機能
Web Components チャートは、軸、マーカー、シリーズ、凡例、および注釈レイヤーのモジュラー デザインで構築されており、あらゆるタイプのデータ ストーリーの描画を簡単にデザインできます。単一のデータ シリーズを使用して単純なチャートを作成するか、複合ビューに複数の軸があるデータの複数シリーズを使用してより複雑なデータ ストーリーを作成します。
カテゴリおよびファイナンシャル (財務) チャートとデータ チャートの比較
Web Components カテゴリとファイナンシャル チャートは、ドメイン固有のチャートと呼ばれるものです。これは、ドメインがカテゴリまたは財務価格シリーズであることを前提とした Web Components データ チャートのラッパーです。
これらの特定のドメイン チャートを選択すると、API が簡素化され、軸、系列、注釈などの属性を明示的に定義する必要なく、データに関する多くのインターフェイスを描画してチャート シナリオを自動的に構成できます。対照的に、データ チャートは非常に明示的であり、チャートのすべての重要な部分を定義する必要があります。
ドメイン チャートはその中核でデータ チャートを使用しています。したがって、同じパフォーマンスの最適化が両方に適用されます。違いは、開発者にとって非常に簡単に指定できるようにしようとしているのか、それとも可能な限り柔軟にしようとしているのかにあります。Web Components データ チャートはより詳細であり、必要なすべてのチャート機能を利用できるようになり、たとえば、任意の数の系列、軸、または注釈を組み合わせて組み合わせることができます。カテゴリ チャートとファイナンシャル チャートでは、数値 X 軸を持つ散布系列を含む系列など、データ チャートの方が適している、簡単に実行できない状況が存在する可能性があります。
最初はどのチャートを選択すればよいのか判断するのが難しいかもしれません。シリーズのタイプと、提示したい追加機能の数を理解することが重要です。より軽量の基本カテゴリまたはファイナンシャル シリーズの場合は、ドメイン チャートのいずれかを使用することをお勧めします。より高度なシナリオの場合は、カテゴリ チャートの chartType
プロパティでカバーされるもの以外のもの (積層シリーズや散布シリーズ、数値データや時間ベースのデータなど) を表示するなど、Web Components データ チャートの使用をお勧めします。Web Components ファイナンシャル チャートでは、縦棒、OHLC バー、ローソク足、折れ線シリーズ タイプのみがカバーされていることに注意してください。
Web Components カテゴリとファイナンシャル チャートを使いやすくしていますが、将来はいつでもデータ チャートに切り替えることができます。
Web Components 棒チャート
Web Components 棒チャート (棒グラフ) は、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ幅と異なる長さの水平棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過に伴う項目の価値の変動、データ分布、ソートされたデータのランキング (高から低、最悪から最高) を表示するのに理想的です。データは、チャートの左から右にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。棒チャートの詳細をご覧ください。
export class HighestGrossingMoviesItem {
public constructor(init: Partial<HighestGrossingMoviesItem>) {
Object.assign(this, init);
}
public franchise: string;
public totalRevenue: number;
public highestGrossing: number;
}
export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
public constructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HighestGrossingMoviesItem(
{
franchise: `Marvel Universe`,
totalRevenue: 22.55,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Star Wars`,
totalRevenue: 10.32,
highestGrossing: 2.07
}),
new HighestGrossingMoviesItem(
{
franchise: `Harry Potter`,
totalRevenue: 9.19,
highestGrossing: 1.34
}),
new HighestGrossingMoviesItem(
{
franchise: `Avengers`,
totalRevenue: 7.76,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Spider Man`,
totalRevenue: 7.22,
highestGrossing: 1.28
}),
new HighestGrossingMoviesItem(
{
franchise: `James Bond`,
totalRevenue: 7.12,
highestGrossing: 1.11
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryCoreModule, IgcDataChartCategoryModule, IgcDataChartInteractivityModule, IgcDataChartVerticalCategoryModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcCategoryHighlightLayerComponent, IgcBarSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartCategoryCoreModule,
IgcDataChartCategoryModule,
IgcDataChartInteractivityModule,
IgcDataChartVerticalCategoryModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private yAxis: IgcCategoryYAxisComponent
private xAxis: IgcNumericXAxisComponent
private categoryHighlightLayer: IgcCategoryHighlightLayerComponent
private barSeries1: IgcBarSeriesComponent
private barSeries2: IgcBarSeriesComponent
private tooltips: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('Chart') as IgcDataChartComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcCategoryYAxisComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
var categoryHighlightLayer = this.categoryHighlightLayer = document.getElementById('CategoryHighlightLayer') as IgcCategoryHighlightLayerComponent;
var barSeries1 = this.barSeries1 = document.getElementById('BarSeries1') as IgcBarSeriesComponent;
var barSeries2 = this.barSeries2 = document.getElementById('BarSeries2') as IgcBarSeriesComponent;
var tooltips = this.tooltips = document.getElementById('Tooltips') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
yAxis.dataSource = this.highestGrossingMovies;
barSeries1.xAxis = this.xAxis;
barSeries1.yAxis = this.yAxis;
barSeries1.dataSource = this.highestGrossingMovies;
barSeries2.xAxis = this.xAxis;
barSeries2.yAxis = this.yAxis;
barSeries2.dataSource = this.highestGrossingMovies;
}
this._bind();
}
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
}
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">
Highest Grossing Movie Franchises
</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">
<igc-category-y-axis
name="yAxis"
id="yAxis"
label="franchise"
use-enhanced-interval-management="true"
enhanced-interval-prefer-more-category-labels="true"
is-inverted="true"
gap="0.5"
overlap="-0.1">
</igc-category-y-axis>
<igc-numeric-x-axis
name="xAxis"
id="xAxis"
title="Billions of U.S. Dollars">
</igc-numeric-x-axis>
<igc-category-highlight-layer
name="CategoryHighlightLayer"
id="CategoryHighlightLayer">
</igc-category-highlight-layer>
<igc-bar-series
name="BarSeries1"
id="BarSeries1"
title="Total Revenue of Franchise"
value-member-path="totalRevenue"
show-default-tooltip="true"
is-transition-in-enabled="true"
is-highlighting-enabled="true">
</igc-bar-series>
<igc-bar-series
name="BarSeries2"
id="BarSeries2"
title="Highest Grossing Movie in Series"
value-member-path="highestGrossing"
show-default-tooltip="true"
is-transition-in-enabled="true"
is-highlighting-enabled="true">
</igc-bar-series>
<igc-data-tool-tip-layer
name="Tooltips"
id="Tooltips">
</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
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Web Components 円チャート
Web Components 円チャート、または円グラフは、一般的な部分から全体へのチャート タイプです。部分から全体へのチャートは、データセットのカテゴリ (部分) が合計 (全体) 値になる方法を示します。カテゴリは、分析されている合計値に対する値のパーセンテージに基づいて、他のカテゴリに比例して表示されます。円チャートは、データ値を円形または円チャートのセクションとして描画します。各セクションまたは円スライスには、基本データ値に比例する円弧の長さがあります。円スライスで表される合計値は、100 または 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
Web Components 折れ線チャート
Web Components 折れ線チャート、または折れ線グラフは、傾向を示し、比較分析を実行するために、一定期間にわたる 1 つ以上の数量の直線セグメントで接続されたポイントによって表される連続データ値を示す一種のカテゴリ折れ線チャートです。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。折れ線チャートの詳細をご覧ください。
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.dataSource = this.countryRenewableElectricity;
chart.legend = this.legend;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
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">
Renewable Electricity Generated
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Line"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
included-properties="year, europe, china, america"
y-axis-title="TWh"
y-axis-title-left-margin="10"
y-axis-title-right-margin="5"
y-axis-label-left-margin="0"
computed-plot-area-margin-mode="Series">
</igc-category-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 ドーナツ チャート
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 { IgcItemLegendModule, IgcDoughnutChartModule } from 'igniteui-webcomponents-charts';
import { IgcItemLegendComponent, IgcDoughnutChartComponent, IgcRingSeriesComponent } from 'igniteui-webcomponents-charts';
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcItemLegendModule,
IgcDoughnutChartModule
);
export class Sample {
private legend: IgcItemLegendComponent
private chart: IgcDoughnutChartComponent
private series: IgcRingSeriesComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcItemLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDoughnutChartComponent;
var series = this.series = document.getElementById('series') as IgcRingSeriesComponent;
this._bind = () => {
series.dataSource = this.energyGlobalDemand;
series.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-doughnut-chart
name="chart"
id="chart"
allow-slice-explosion="true">
<igc-ring-series
name="series"
id="series"
label-member-path="summary"
labels-position="OutsideEnd"
label-extent="30"
value-member-path="value"
legend-label-member-path="category"
outlines="white"
radius-factor="0.6"
start-angle="30">
</igc-ring-series>
</igc-doughnut-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 エリア チャート
Web Components エリア チャートは、直線セグメントで接続されたポイントのコレクションを使用して描画され、線の下の領域が塗りつぶされます。値は y 軸 (左側のラベル) に表示され、カテゴリは x 軸 (下部のラベル) に表示されます。エリア チャートは、プロットされた値の合計を表示することにより、一定期間の変化量を強調したり、複数の項目や全体の一部の関係を比較したりします。エリア チャートの詳細をご覧ください。
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.dataSource = this.countryRenewableElectricity;
chart.legend = this.legend;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
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">
Renewable Electricity Generated
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Area"
included-properties="year, europe, china, america"
y-axis-title="TWh"
y-axis-title-left-margin="10"
y-axis-title-right-margin="5"
y-axis-label-left-margin="0"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
computed-plot-area-margin-mode="Series">
</igc-category-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 スパークライン チャート
Web Components スパークライン チャート、またはスパークライン グラフは、グリッド セル内や、データ ストーリーを伝えるために単語サイズの視覚化が必要な場所など、小規模なレイアウト内で描画することを目的としたカテゴリ チャートの一種です。他の Web Components チャート タイプと同様に、スパークライン チャートには、チャート タイプ、マーカー、範囲、トレンドライン、不明な値のプロット、ツールチップなど、構成およびカスタマイズできるいくつかの視覚要素と対応する機能があります。スパークライン チャートは、折れ線チャート、エリア チャート、縦棒チャート、または Win/Loss チャートとして描画できます。スパーク チャートに相当するフルサイズのチャートの違いは、Y 軸 (左側のラベル) と X 軸 (下部のラベル) が表示されないことです。スパークライン チャートの詳細をご覧ください。
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 バブル チャート
Web Components バブル チャート (バブル グラフ) は、3 つの数値で構成されるデータを表示するために使用されます。値の 2 つは、デカルト (X、Y) 座標系を使用して交点としてプロットされ、3 番目の値は点の直径サイズとして描画されます。これにより、バブル チャートにその名前が付けられます。これは、プロットの X 座標と Y 座標に沿ったさまざまなサイズのバブルの視覚化です。Web Components バブル チャートは、データ相関とサイズによって描画されたデータ値の違いとの関係を示すために使用されます。4 番目のデータ ディメンション (通常は色) を使用して、バブル チャートの値をさらに区別することもできます。バブル チャートの詳細をご覧ください。
export class CountryStatsAfricaItem {
public constructor(init: Partial<CountryStatsAfricaItem>) {
Object.assign(this, init);
}
public code: string;
public population: number;
public workedHours: number;
public gDP: number;
public name: string;
}
export class CountryStatsAfrica extends Array<CountryStatsAfricaItem> {
public constructor(items: Array<CountryStatsAfricaItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryStatsAfricaItem(
{
code: `DZA`,
population: 39728000,
workedHours: 47.5,
gDP: 13725,
name: `Algeria`
}),
new CountryStatsAfricaItem(
{
code: `AGO`,
population: 27884000,
workedHours: 39.8,
gDP: 6228,
name: `Angola`
}),
new CountryStatsAfricaItem(
{
code: `BEN`,
population: 10576000,
workedHours: 43.7,
gDP: 1987,
name: `Benin`
}),
new CountryStatsAfricaItem(
{
code: `BWA`,
population: 2121000,
workedHours: 41.2,
gDP: 15357,
name: `Botswana`
}),
new CountryStatsAfricaItem(
{
code: `BFA`,
population: 18111000,
workedHours: 39.3,
gDP: 1596,
name: `Burkina Faso`
}),
new CountryStatsAfricaItem(
{
code: `BDI`,
population: 10160000,
workedHours: 36.4,
gDP: 748,
name: `Burundi`
}),
new CountryStatsAfricaItem(
{
code: `CMR`,
population: 23298000,
workedHours: 42,
gDP: 3289,
name: `Cameroon`
}),
new CountryStatsAfricaItem(
{
code: `CPV`,
population: 525000,
workedHours: 45,
gDP: 5915,
name: `Cape Verde`
}),
new CountryStatsAfricaItem(
{
code: `CAF`,
population: 4493000,
workedHours: 38,
gDP: 622,
name: `Central African Republic`
}),
new CountryStatsAfricaItem(
{
code: `TCD`,
population: 14111000,
workedHours: 40.4,
gDP: 2067,
name: `Chad`
}),
new CountryStatsAfricaItem(
{
code: `COM`,
population: 777000,
workedHours: 40.1,
gDP: 1413,
name: `Comoros`
}),
new CountryStatsAfricaItem(
{
code: `COG`,
population: 4856000,
workedHours: 38.1,
gDP: 5543,
name: `Congo`
}),
new CountryStatsAfricaItem(
{
code: `CIV`,
population: 23226000,
workedHours: 39.7,
gDP: 3242,
name: `Cote Ivoire`
}),
new CountryStatsAfricaItem(
{
code: `COD`,
population: 76245000,
workedHours: 44,
gDP: 812,
name: `Democratic Republic of Congo`
}),
new CountryStatsAfricaItem(
{
code: `EGY`,
population: 92443000,
workedHours: 39.7,
gDP: 10096,
name: `Egypt`
}),
new CountryStatsAfricaItem(
{
code: `GNQ`,
population: 1169000,
workedHours: 38.8,
gDP: 27554,
name: `Equatorial Guinea`
}),
new CountryStatsAfricaItem(
{
code: `SWZ`,
population: 1104000,
workedHours: 45.7,
gDP: 7759,
name: `Eswatini`
}),
new CountryStatsAfricaItem(
{
code: `ETH`,
population: 101000000,
workedHours: 40.1,
gDP: 1533,
name: `Ethiopia`
}),
new CountryStatsAfricaItem(
{
code: `GAB`,
population: 1948000,
workedHours: 40.5,
gDP: 16837,
name: `Gabon`
}),
new CountryStatsAfricaItem(
{
code: `GMB`,
population: 2086000,
workedHours: 40.3,
gDP: 1568,
name: `Gambia`
}),
new CountryStatsAfricaItem(
{
code: `GHA`,
population: 27849000,
workedHours: 47.6,
gDP: 3927,
name: `Ghana`
}),
new CountryStatsAfricaItem(
{
code: `GIN`,
population: 11432000,
workedHours: 43.4,
gDP: 1758,
name: `Guinea`
}),
new CountryStatsAfricaItem(
{
code: `GNB`,
population: 1737000,
workedHours: 35.1,
gDP: 1446,
name: `Guinea-Bissau`
}),
new CountryStatsAfricaItem(
{
code: `KEN`,
population: 47878000,
workedHours: 43.9,
gDP: 2836,
name: `Kenya`
}),
new CountryStatsAfricaItem(
{
code: `LSO`,
population: 2059000,
workedHours: 47.6,
gDP: 2708,
name: `Lesotho`
}),
new CountryStatsAfricaItem(
{
code: `LBR`,
population: 4472000,
workedHours: 40.3,
gDP: 785,
name: `Liberia`
}),
new CountryStatsAfricaItem(
{
code: `LBY`,
population: 6418000,
workedHours: 42.5,
gDP: 14847,
name: `Libya`
}),
new CountryStatsAfricaItem(
{
code: `MDG`,
population: 24234000,
workedHours: 40.8,
gDP: 1377,
name: `Madagascar`
}),
new CountryStatsAfricaItem(
{
code: `MWI`,
population: 16745000,
workedHours: 44.5,
gDP: 1089,
name: `Malawi`
}),
new CountryStatsAfricaItem(
{
code: `MLI`,
population: 17439000,
workedHours: 40.6,
gDP: 1919,
name: `Mali`
}),
new CountryStatsAfricaItem(
{
code: `MRT`,
population: 4046000,
workedHours: 45.9,
gDP: 3602,
name: `Mauritania`
}),
new CountryStatsAfricaItem(
{
code: `MUS`,
population: 1259000,
workedHours: 44.4,
gDP: 18864,
name: `Mauritius`
}),
new CountryStatsAfricaItem(
{
code: `MAR`,
population: 34664000,
workedHours: 39.6,
gDP: 7297,
name: `Morocco`
}),
new CountryStatsAfricaItem(
{
code: `MOZ`,
population: 27042000,
workedHours: 46.7,
gDP: 1118,
name: `Mozambique`
}),
new CountryStatsAfricaItem(
{
code: `NAM`,
population: 2315000,
workedHours: 43.1,
gDP: 9975,
name: `Namibia`
}),
new CountryStatsAfricaItem(
{
code: `NER`,
population: 20002000,
workedHours: 45,
gDP: 908,
name: `Niger`
}),
new CountryStatsAfricaItem(
{
code: `NGA`,
population: 181000000,
workedHours: 32.76,
gDP: 5671,
name: `Nigeria`
}),
new CountryStatsAfricaItem(
{
code: `RWA`,
population: 11369000,
workedHours: 46.3,
gDP: 1731,
name: `Rwanda`
}),
new CountryStatsAfricaItem(
{
code: `STP`,
population: 199000,
workedHours: 38.2,
gDP: 2948,
name: `Sao Tome`
}),
new CountryStatsAfricaItem(
{
code: `SEN`,
population: 14578000,
workedHours: 46.8,
gDP: 2294,
name: `Senegal`
}),
new CountryStatsAfricaItem(
{
code: `SYC`,
population: 95000,
workedHours: 39.8,
gDP: 24857,
name: `Seychelles`
}),
new CountryStatsAfricaItem(
{
code: `SLE`,
population: 7172000,
workedHours: 35.4,
gDP: 1314,
name: `Sierra Leone`
}),
new CountryStatsAfricaItem(
{
code: `ZAF`,
population: 55386000,
workedHours: 42.48,
gDP: 12378,
name: `South Africa`
}),
new CountryStatsAfricaItem(
{
code: `SSD`,
population: 10716000,
workedHours: 39.3,
gDP: 1875,
name: `South Sudan`
}),
new CountryStatsAfricaItem(
{
code: `SDN`,
population: 38903000,
workedHours: 36.3,
gDP: 4290,
name: `Sudan`
}),
new CountryStatsAfricaItem(
{
code: `TZA`,
population: 51483000,
workedHours: 38,
gDP: 2491,
name: `Tanzania`
}),
new CountryStatsAfricaItem(
{
code: `TGO`,
population: 7323000,
workedHours: 38.8,
gDP: 1351,
name: `Togo`
}),
new CountryStatsAfricaItem(
{
code: `TUN`,
population: 11180000,
workedHours: 35.2,
gDP: 10766,
name: `Tunisia`
}),
new CountryStatsAfricaItem(
{
code: `UGA`,
population: 38225000,
workedHours: 38.6,
gDP: 1666,
name: `Uganda`
}),
new CountryStatsAfricaItem(
{
code: `ZMB`,
population: 15879000,
workedHours: 46.6,
gDP: 3627,
name: `Zambia`
}),
new CountryStatsAfricaItem(
{
code: `ZWE`,
population: 13815000,
workedHours: 41.4,
gDP: 1912,
name: `Zimbabwe`
}),
];
super(...newItems.slice(0));
}
}
}
tsexport class CountryStatsEuropeItem {
public constructor(init: Partial<CountryStatsEuropeItem>) {
Object.assign(this, init);
}
public code: string;
public population: number;
public workedHours: number;
public gDP: number;
public name: string;
}
export class CountryStatsEurope extends Array<CountryStatsEuropeItem> {
public constructor(items: Array<CountryStatsEuropeItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryStatsEuropeItem(
{
code: `ALB`,
population: 2891000,
workedHours: 41,
gDP: 10970,
name: `Albania`
}),
new CountryStatsEuropeItem(
{
code: `AUT`,
population: 8679000,
workedHours: 30.75,
gDP: 44305,
name: `Austria`
}),
new CountryStatsEuropeItem(
{
code: `BLR`,
population: 9439000,
workedHours: 43.5,
gDP: 17230,
name: `Belarus`
}),
new CountryStatsEuropeItem(
{
code: `BEL`,
population: 11288000,
workedHours: 29.7,
gDP: 41708,
name: `Belgium`
}),
new CountryStatsEuropeItem(
{
code: `BIH`,
population: 3429000,
workedHours: 46.5,
gDP: 10932,
name: `Bosnia`
}),
new CountryStatsEuropeItem(
{
code: `BGR`,
population: 7200000,
workedHours: 31.62,
gDP: 17000,
name: `Bulgaria`
}),
new CountryStatsEuropeItem(
{
code: `HRV`,
population: 4233000,
workedHours: 35.15,
gDP: 20984,
name: `Croatia`
}),
new CountryStatsEuropeItem(
{
code: `CYP`,
population: 1161000,
workedHours: 34.42,
gDP: 30549,
name: `Cyprus`
}),
new CountryStatsEuropeItem(
{
code: `CZE`,
population: 10601000,
workedHours: 33.77,
gDP: 30605,
name: `Czechia`
}),
new CountryStatsEuropeItem(
{
code: `DNK`,
population: 5689000,
workedHours: 27.16,
gDP: 45459,
name: `Denmark`
}),
new CountryStatsEuropeItem(
{
code: `EST`,
population: 1315000,
workedHours: 35.61,
gDP: 27550,
name: `Estonia`
}),
new CountryStatsEuropeItem(
{
code: `FIN`,
population: 5481000,
workedHours: 31.48,
gDP: 38942,
name: `Finland`
}),
new CountryStatsEuropeItem(
{
code: `FRA`,
population: 64453000,
workedHours: 29.03,
gDP: 37766,
name: `France`
}),
new CountryStatsEuropeItem(
{
code: `DEU`,
population: 81787000,
workedHours: 26.31,
gDP: 43938,
name: `Germany`
}),
new CountryStatsEuropeItem(
{
code: `GRC`,
population: 10660000,
workedHours: 39.06,
gDP: 24170,
name: `Greece`
}),
new CountryStatsEuropeItem(
{
code: `HUN`,
population: 9778000,
workedHours: 36.99,
gDP: 25034,
name: `Hungary`
}),
new CountryStatsEuropeItem(
{
code: `ISL`,
population: 330000,
workedHours: 29.02,
gDP: 43048,
name: `Iceland`
}),
new CountryStatsEuropeItem(
{
code: `IRL`,
population: 4652000,
workedHours: 33.47,
gDP: 60818,
name: `Ireland`
}),
new CountryStatsEuropeItem(
{
code: `ITA`,
population: 60578000,
workedHours: 33.04,
gDP: 34302,
name: `Italy`
}),
new CountryStatsEuropeItem(
{
code: `LVA`,
population: 1998000,
workedHours: 36.57,
gDP: 23019,
name: `Latvia`
}),
new CountryStatsEuropeItem(
{
code: `LTU`,
population: 2932000,
workedHours: 35.76,
gDP: 27046,
name: `Lithuania`
}),
new CountryStatsEuropeItem(
{
code: `LUX`,
population: 567000,
workedHours: 29.25,
gDP: 94089,
name: `Luxembourg`
}),
new CountryStatsEuropeItem(
{
code: `MLT`,
population: 434000,
workedHours: 37.78,
gDP: 34087,
name: `Malta`
}),
new CountryStatsEuropeItem(
{
code: `MDA`,
population: 4071000,
workedHours: 41,
gDP: 4747,
name: `Moldova`
}),
new CountryStatsEuropeItem(
{
code: `MNE`,
population: 627000,
workedHours: 47.2,
gDP: 15290,
name: `Montenegro`
}),
new CountryStatsEuropeItem(
{
code: `NLD`,
population: 16938000,
workedHours: 27.38,
gDP: 46494,
name: `Netherlands`
}),
new CountryStatsEuropeItem(
{
code: `MKD`,
population: 2079000,
workedHours: 36.6,
gDP: 12760,
name: `North Macedonia`
}),
new CountryStatsEuropeItem(
{
code: `NOR`,
population: 5200000,
workedHours: 27.36,
gDP: 64008,
name: `Norway`
}),
new CountryStatsEuropeItem(
{
code: `POL`,
population: 38034000,
workedHours: 39.4,
gDP: 25300,
name: `Poland`
}),
new CountryStatsEuropeItem(
{
code: `PRT`,
population: 10368000,
workedHours: 36.06,
gDP: 26608,
name: `Portugal`
}),
new CountryStatsEuropeItem(
{
code: `ROU`,
population: 19925000,
workedHours: 34.34,
gDP: 20556,
name: `Romania`
}),
new CountryStatsEuropeItem(
{
code: `RUS`,
population: 145000000,
workedHours: 38.04,
gDP: 24517,
name: `Russia`
}),
new CountryStatsEuropeItem(
{
code: `SMR`,
population: 33000,
workedHours: 40.1,
gDP: 56372,
name: `San Marino`
}),
new CountryStatsEuropeItem(
{
code: `SRB`,
population: 8877000,
workedHours: 46.5,
gDP: 13278,
name: `Serbia`
}),
new CountryStatsEuropeItem(
{
code: `SVK`,
population: 5436000,
workedHours: 33.73,
gDP: 28309,
name: `Slovakia`
}),
new CountryStatsEuropeItem(
{
code: `SVN`,
population: 2071000,
workedHours: 32.46,
gDP: 29038,
name: `Slovenia`
}),
new CountryStatsEuropeItem(
{
code: `ESP`,
population: 46672000,
workedHours: 32.68,
gDP: 32291,
name: `Spain`
}),
new CountryStatsEuropeItem(
{
code: `SWE`,
population: 9765000,
workedHours: 30.96,
gDP: 45679,
name: `Sweden`
}),
new CountryStatsEuropeItem(
{
code: `CHE`,
population: 8297000,
workedHours: 30.57,
gDP: 57264,
name: `Switzerland`
}),
new CountryStatsEuropeItem(
{
code: `UKR`,
population: 44922000,
workedHours: 38.6,
gDP: 7465,
name: `Ukraine`
}),
new CountryStatsEuropeItem(
{
code: `GBR`,
population: 65860000,
workedHours: 32.1,
gDP: 38839,
name: `United Kingdom`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcBubbleSeriesComponent, IgcSizeScaleComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { CountryStatsAfricaItem, CountryStatsAfrica } from './CountryStatsAfrica';
import { CountryStatsEuropeItem, CountryStatsEurope } from './CountryStatsEurope';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcNumberAbbreviatorModule,
IgcDataChartCoreModule,
IgcDataChartScatterModule,
IgcDataChartScatterCoreModule,
IgcDataChartInteractivityModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private xAxis: IgcNumericXAxisComponent
private yAxis: IgcNumericYAxisComponent
private bubbleSeries1: IgcBubbleSeriesComponent
private _sizeScale1: IgcSizeScaleComponent | null = null;
public get sizeScale1(): IgcSizeScaleComponent {
if (this._sizeScale1 == null)
{
var sizeScale1 = new IgcSizeScaleComponent();
sizeScale1.isLogarithmic = false;
sizeScale1.minimumValue = 10;
sizeScale1.maximumValue = 80;
this._sizeScale1 = sizeScale1;
}
return this._sizeScale1;
}
private bubbleSeries2: IgcBubbleSeriesComponent
private _sizeScale2: IgcSizeScaleComponent | null = null;
public get sizeScale2(): IgcSizeScaleComponent {
if (this._sizeScale2 == null)
{
var sizeScale2 = new IgcSizeScaleComponent();
sizeScale2.isLogarithmic = false;
sizeScale2.minimumValue = 10;
sizeScale2.maximumValue = 80;
this._sizeScale2 = sizeScale2;
}
return this._sizeScale2;
}
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 xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
var bubbleSeries1 = this.bubbleSeries1 = document.getElementById('bubbleSeries1') as IgcBubbleSeriesComponent;
var bubbleSeries2 = this.bubbleSeries2 = document.getElementById('bubbleSeries2') as IgcBubbleSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
bubbleSeries1.xAxis = this.xAxis;
bubbleSeries1.yAxis = this.yAxis;
bubbleSeries1.dataSource = this.countryStatsAfrica;
bubbleSeries1.radiusScale = this.sizeScale1;
bubbleSeries2.xAxis = this.xAxis;
bubbleSeries2.yAxis = this.yAxis;
bubbleSeries2.dataSource = this.countryStatsEurope;
bubbleSeries2.radiusScale = this.sizeScale2;
}
this._bind();
}
private _countryStatsAfrica: CountryStatsAfrica = null;
public get countryStatsAfrica(): CountryStatsAfrica {
if (this._countryStatsAfrica == null)
{
this._countryStatsAfrica = new CountryStatsAfrica();
}
return this._countryStatsAfrica;
}
private _countryStatsEurope: CountryStatsEurope = null;
public get countryStatsEurope(): CountryStatsEurope {
if (this._countryStatsEurope == null)
{
this._countryStatsEurope = new CountryStatsEurope();
}
return this._countryStatsEurope;
}
}
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">
Total Population of Selected Countries
</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">
<igc-numeric-x-axis
name="xAxis"
id="xAxis"
is-logarithmic="true"
abbreviate-large-numbers="true"
title="Population">
</igc-numeric-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
title="GDP per Capita"
maximum-value="1000000"
title-left-margin="10"
is-logarithmic="true"
abbreviate-large-numbers="true">
</igc-numeric-y-axis>
<igc-bubble-series
name="bubbleSeries1"
id="bubbleSeries1"
title="African Countries"
x-member-path="population"
y-member-path="gDP"
radius-member-path="workedHours"
x-member-as-legend-label="Population"
y-member-as-legend-label="GDP"
radius-member-as-legend-label="Work Hours"
marker-type="Circle"
show-default-tooltip="true">
</igc-bubble-series>
<igc-bubble-series
name="bubbleSeries2"
id="bubbleSeries2"
title="European Countries"
x-member-path="population"
y-member-path="gDP"
radius-member-path="workedHours"
x-member-as-legend-label="Population"
y-member-as-legend-label="GDP"
radius-member-as-legend-label="Work Hours"
marker-type="Circle"
show-default-tooltip="true">
</igc-bubble-series>
<igc-data-tool-tip-layer
name="dataToolTipLayer"
id="dataToolTipLayer"
value-row-margin-top="1"
label-text-margin-top="1"
title-text-margin-top="1"
units-text-margin-top="1"
value-row-margin-bottom="1"
label-text-margin-bottom="1"
title-text-margin-bottom="1"
units-text-margin-bottom="1"
units-text-margin-right="5"
value-text-margin-left="10"
label-text-margin-left="1"
layout-mode="Vertical">
</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
Web Components ファイナンシャル チャート/株価チャート
Web Components ファイナンシャル/株価チャートは、時系列チャートで株価デーとファイナンシャル データを描画する複合視覚化です。日/週/月フィルター、チャート タイプの選択、ボリューム タイプの選択、インジケーターの選択、トレンドラインの選択などのインタラクティブな視覚要素がツールバーに含まれています。カスタマイズ用に設計された Web Components 株価チャートは、データの視覚化と解釈を容易にするために、任意の方法でカスタマイズできます。ファイナンシャル チャートは、X 軸 (下のラベル) に沿って日時データを描画し、Open、High、Low、Close ボリュームなどのフィールドを表示します。時系列データを描画するチャートのタイプは、棒、ローソク、縦棒、または折れ線です。株価チャートの詳細をご覧ください。
export class StocksHistory {
/** gets stock OHLC prices for multiple stocks */
public static async getMultipleStocks(): Promise<any[]> {
// getting prices of multiples stocks asynchronously
const dataSources: any[] = [
//await this.getAmazonStock(),
await this.getGoogleStock(),
await this.getMicrosoftStock(),
//await this.getTeslaStock()
];
return new Promise<any[]>((resolve, reject) => {
resolve(dataSources);
});
}
/** gets Amazon stock OHLC prices from a .JSON file */
public static async getAmazonStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Amazon"]
};
// console.log("fetchAmazonStock: ", stockData.length);
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Tesla stock OHLC prices from a .JSON file */
public static async getTeslaStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Tesla"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Microsoft stock OHLC prices from a .JSON file */
public static async getMicrosoftStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Microsoft"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Google stock OHLC prices from a .JSON file */
public static async getGoogleStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Google"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
public static convertData(jsonData: any[]): StockItem[] {
let stockItems: StockItem[] = [];
for (let json of jsonData) {
let parts = json.date.split("-"); // "2020-01-01"
let item = new StockItem();
item.date = new Date(parts[0], parts[1], parts[2]);
item.open = json.open;
item.high = json.high;
item.low = json.low;
item.close = json.close;
item.volume = json.volume;
stockItems.push(item);
}
return stockItems;
}
}
export class StockItem {
public open?: number;
public close?: number;
public high?: number;
public low?: number;
public volume?: number;
public date?: Date;
}
tsimport { FinancialChartYAxisMode, IgcFinancialChartModule } from 'igniteui-webcomponents-charts';
import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { StocksHistory } from './StocksHistory';
ModuleManager.register(IgcFinancialChartModule);
export class FinancialChartMultipleData {
private chart: IgcFinancialChartComponent;
constructor() {
this.chart = document.getElementById('chart') as IgcFinancialChartComponent;
this.chart.yAxisMode = FinancialChartYAxisMode.PercentChange;
this.chart.yAxisTitle = "Percent Changed";
this.getData();
}
getData(): void {
StocksHistory.getMultipleStocks().then((stocks: any[]) => {
this.chart.dataSource = stocks;
});
}
}
new FinancialChartMultipleData();
ts<!DOCTYPE html>
<html>
<head>
<title>FinancialChartMultipleData</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-financial-chart id="chart" width="100%" height="100%"
chart-title="Google vs Microsoft"
subtitle="Between 2013 and 2017"
chart-type="Line"
thickness="2">
</igc-financial-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 縦棒チャート
Web Components 縦棒チャート (縦棒グラフ) は、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ幅と異なる長さの垂直棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過に伴う項目の価値の変動、データ分布、ソートされたデータのランキング (高から低、最悪から最高) を表示するのに理想的です。データは、チャートの上から下にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。縦棒チャートの詳細をご覧ください。
export class HighestGrossingMoviesItem {
public constructor(init: Partial<HighestGrossingMoviesItem>) {
Object.assign(this, init);
}
public franchise: string;
public totalRevenue: number;
public highestGrossing: number;
}
export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
public constructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HighestGrossingMoviesItem(
{
franchise: `Marvel Universe`,
totalRevenue: 22.55,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Star Wars`,
totalRevenue: 10.32,
highestGrossing: 2.07
}),
new HighestGrossingMoviesItem(
{
franchise: `Harry Potter`,
totalRevenue: 9.19,
highestGrossing: 1.34
}),
new HighestGrossingMoviesItem(
{
franchise: `Avengers`,
totalRevenue: 7.76,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Spider Man`,
totalRevenue: 7.22,
highestGrossing: 1.28
}),
new HighestGrossingMoviesItem(
{
franchise: `James Bond`,
totalRevenue: 7.12,
highestGrossing: 1.11
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.dataSource = this.highestGrossingMovies;
chart.legend = this.legend;
}
this._bind();
}
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
}
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">
Highest Grossing Movie Franchises
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Column"
x-axis-interval="1"
y-axis-title="Billions of U.S. Dollars"
y-axis-title-left-margin="10"
y-axis-title-right-margin="5"
y-axis-label-left-margin="0"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
is-category-highlighting-enabled="true"
crosshairs-display-mode="None">
</igc-category-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 複合チャート
Web Components 複合チャートまたはコンボ チャートは、同じプロット領域でさまざまなチャート タイプを組み合わせた視覚化です。スケールが大きく異なり、異なる単位で表される可能性のある 2 つのデータ シリーズを表示する場合に非常に役立ちます。最も一般的な例は、一方の軸にドル、もう一方の軸にパーセンテージです。複合チャートの詳細をご覧ください。
import { IgcCalloutLayerModule, IgcDataChartAnnotationModule, IgcDataChartCategoryCoreModule, IgcNumberAbbreviatorModule,
IgcDataChartCategoryModule, IgcDataChartCoreModule, IgcDataChartInteractivityModule, IgcLegendModule,
IgcDataChartComponent, IgcLegendComponent, IgcCalloutLayerComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartCategoryCoreModule,
IgcDataChartCategoryModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule,
IgcCalloutLayerModule,
IgcNumberAbbreviatorModule,
IgcLegendModule
);
export class DataChartCompositeChart {
private chart: IgcDataChartComponent;
private data : any[] = [];
private legend: IgcLegendComponent;
constructor() {
this.chart = document.getElementById('chart') as IgcDataChartComponent;
this.legend = document.getElementById('legend') as IgcLegendComponent;
this.chart.legend = this.legend;
this.initData();
this.chart.dataSource = this.data;
}
public formatNumber(num: number): string {
var ret = num;
if (num >= 1000000) return (num / 1000000.0).toFixed(1) + "M";
if (num >= 1000) return (num / 1000.0).toFixed(1) + "K";
return ret.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
public initData(){
this.data = [
{ Date: "Jan 1, 2019", Revenue: 16914, Expenses: 10183 },
{ Date: "Mar 1, 2019", Revenue: 15077, Expenses: 12813 },
{ Date: "Jun 1, 2019", Revenue: 16886, Expenses: 14476 },
{ Date: "Sep 1, 2019", Revenue: 17652, Expenses: 11705 },
{ Date: "Jan 1, 2020", Revenue: 21082, Expenses: 14044 },
{ Date: "Mar 1, 2020", Revenue: 17737, Expenses: 12803 },
{ Date: "Jun 1, 2020", Revenue: 18687, Expenses: 13677 },
{ Date: "Sep 1, 2020", Revenue: 21470, Expenses: 13717 },
{ Date: "Jan 1, 2021", Revenue: 28072, Expenses: 17133 }
];
for (let i = 0; i < this.data.length; i++) {
const item = this.data[i];
item.Revenue = item.Revenue * 1000;
item.Expenses = item.Expenses * 1000;
item.Income = item.Revenue - item.Expenses;
item.IncomePerRevenue = (item.Income / item.Revenue) * 100;
// calculating x-offset for callouts
item.RevenueX = i;
item.ExpensesX = i + 0.5;
// formatting values for callouts
item.FormattedRevenue = "$" + this.formatNumber(item.Revenue);
item.FormattedIncome = "$" + this.formatNumber(item.Income);
item.FormattedExpenses = "$" + this.formatNumber(item.Expenses);
item.FormattedProfit = item.IncomePerRevenue + "%";
}
}
}
new DataChartCompositeChart();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartCompositeChart</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">
<span class="legend-title">Facebook Statement of Income 2019-2020</span>
<igc-legend id="legend" orientation="Horizontal"></igc-legend>
</div>
<div class="container" style="height: calc(100% - 3rem)">
<igc-data-chart id="chart" width="100%" height="100%"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-category-x-axis id="xAxis" name="xAxis" label="Date" overlap="0" gap="0.1" use-clustering-mode="true"></igc-category-x-axis>
<igc-numeric-y-axis id="yAxis" name="yAxis" abbreviate-large-numbers="true" title="In Millions of U.S. Dollars"
minimum-value="0" maximum-value="30000000" title-left-margin="5" title-right-margin="0">
</igc-numeric-y-axis>
<igc-numeric-y-axis id="yAxis2" name="yAxis2" abbreviate-large-numbers="true" title="Percentage" major-stroke-thickness="0"
minimum-value="0" maximum-value="160" label-location="OutsideRight" label-horizontal-alignment="Left">
</igc-numeric-y-axis>
<igc-column-series name="series1" x-axis-name="xAxis" y-axis-name="yAxis" value-member-path="Revenue"
title="Revenue" marker-type="Hidden"></igc-column-series>
<igc-column-series name="series2" x-axis-name="xAxis" y-axis-name="yAxis" value-member-path="Expenses"
title="Expenses" marker-type="Hidden"></igc-column-series>
<igc-spline-area-series name="series3" x-axis-name="xAxis" y-axis-name="yAxis2" value-member-path="IncomePerRevenue"
title="Income / Revenue %" marker-type="Circle">
</igc-spline-area-series>
<igc-callout-layer is-auto-callout-behavior-enabled="false" target-series-name="series1" x-member-path="RevenueX" y-member-path="Revenue" label-member-path="FormattedRevenue" use-value-for-auto-callout-labels="false"
callout-leader-brush="Transparent" callout-text-color="Black" callout-background="Transparent" callout-position-padding="-5">
</igc-callout-layer>
<igc-callout-layer is-auto-callout-behavior-enabled="false" target-series-name="series2" x-member-path="ExpensesX" y-member-path="Expenses" label-member-path="FormattedExpenses" use-value-for-auto-callout-labels="false"
callout-leader-brush="Transparent" callout-text-color="Black" callout-background="Transparent" callout-position-padding="-5">
</igc-callout-layer>
<igc-callout-layer is-auto-callout-behavior-enabled="true" target-series-name="series3" use-value-for-auto-callout-labels="true"
callout-leader-brush="Transparent" callout-text-color="Black" callout-background="LightGray"
auto-callout-label-precision="1">
</igc-callout-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
Web Components 極座標チャート
Web Components 極座標エリア チャートまたは極座標グラフは、極座標チャートのグループに属し、頂点または隅がデータ ポイントの極 (角度/半径) 座標に配置された塗りつぶされたポリゴンの形状を持っています。極座標エリア チャートは、散布図と同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に伸ばすのではなく、円の周りにラップします。他のシリーズ タイプと同じように、複数の極座標エリア チャートは同じデータ チャートにプロットでき、データセットの相違点を示すために互いにオーバーレイできます。極座標チャートの詳細をご覧ください。
export class BoatSailingDataItem {
public constructor(init: Partial<BoatSailingDataItem>) {
Object.assign(this, init);
}
public direction: number;
public boatSpeed: number;
public windSpeed: number;
}
export class BoatSailingData extends Array<BoatSailingDataItem> {
public constructor(items: Array<BoatSailingDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new BoatSailingDataItem(
{
direction: 0,
boatSpeed: 70,
windSpeed: 90
}),
new BoatSailingDataItem(
{
direction: 45,
boatSpeed: 35,
windSpeed: 65
}),
new BoatSailingDataItem(
{
direction: 90,
boatSpeed: 25,
windSpeed: 45
}),
new BoatSailingDataItem(
{
direction: 135,
boatSpeed: 15,
windSpeed: 25
}),
new BoatSailingDataItem(
{
direction: 180,
boatSpeed: 0,
windSpeed: 0
}),
new BoatSailingDataItem(
{
direction: 225,
boatSpeed: 15,
windSpeed: 25
}),
new BoatSailingDataItem(
{
direction: 270,
boatSpeed: 25,
windSpeed: 45
}),
new BoatSailingDataItem(
{
direction: 315,
boatSpeed: 35,
windSpeed: 65
}),
new BoatSailingDataItem(
{
direction: 360,
boatSpeed: 70,
windSpeed: 90
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarLineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartPolarModule,
IgcDataChartPolarCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private angleAxis: IgcNumericAngleAxisComponent
private radiusAxis: IgcNumericRadiusAxisComponent
private polarLineSeries1: IgcPolarLineSeriesComponent
private polarLineSeries2: IgcPolarLineSeriesComponent
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 IgcNumericAngleAxisComponent;
var radiusAxis = this.radiusAxis = document.getElementById('radiusAxis') as IgcNumericRadiusAxisComponent;
var polarLineSeries1 = this.polarLineSeries1 = document.getElementById('PolarLineSeries1') as IgcPolarLineSeriesComponent;
var polarLineSeries2 = this.polarLineSeries2 = document.getElementById('PolarLineSeries2') as IgcPolarLineSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
polarLineSeries1.dataSource = this.boatSailingData;
polarLineSeries1.angleAxis = this.angleAxis;
polarLineSeries1.radiusAxis = this.radiusAxis;
polarLineSeries2.dataSource = this.boatSailingData;
polarLineSeries2.angleAxis = this.angleAxis;
polarLineSeries2.radiusAxis = this.radiusAxis;
}
this._bind();
}
private _boatSailingData: BoatSailingData = null;
public get boatSailingData(): BoatSailingData {
if (this._boatSailingData == null)
{
this._boatSailingData = new BoatSailingData();
}
return this._boatSailingData;
}
}
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">
Wind Speed vs Boat Speed
</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-numeric-angle-axis
name="angleAxis"
id="angleAxis"
start-angle-offset="-90"
interval="30"
minimum-value="0"
maximum-value="360">
</igc-numeric-angle-axis>
<igc-numeric-radius-axis
name="radiusAxis"
id="radiusAxis"
radius-extent-scale="0.9"
inner-radius-extent-scale="0.1"
interval="25"
minimum-value="0"
maximum-value="100">
</igc-numeric-radius-axis>
<igc-polar-line-series
name="PolarLineSeries1"
id="PolarLineSeries1"
angle-member-path="direction"
radius-member-path="windSpeed"
show-default-tooltip="false"
thickness="1"
title="Wind Speed"
marker-type="Circle">
</igc-polar-line-series>
<igc-polar-line-series
name="PolarLineSeries2"
id="PolarLineSeries2"
angle-member-path="direction"
radius-member-path="boatSpeed"
show-default-tooltip="false"
thickness="1"
title="Boat Speed"
marker-type="Circle">
</igc-polar-line-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
Web Components 散布図
Web Components 散布図は、デカルト (X、Y) 座標系を使用してデータをプロットすることにより、2 つの値間の関係を示すために使用されます。各データ ポイントは、X 軸と Y 軸上のデータ値の交点として描画されます。散布図は、不均一な間隔またはデータのクラスターに注意を向けます。予測結果の収集データの標準偏差をハイライト表示し、科学データや統計データをプロットするためによく使用されます。Web Components 散布図は、データがバインド前に時系列になっていない場合でも、X 軸と Y 軸でデータを時系列に整理してプロットします。散布図の詳細をご覧ください。
export class CountryDemographicAfricanItem {
public constructor(init: Partial<CountryDemographicAfricanItem>) {
Object.assign(this, init);
}
public population: number;
public birthRate: number;
public deathRate: number;
public name: string;
}
export class CountryDemographicAfrican extends Array<CountryDemographicAfricanItem> {
public constructor(items: Array<CountryDemographicAfricanItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryDemographicAfricanItem(
{
population: 39728000,
birthRate: 23.9,
deathRate: 4.77,
name: `Algeria`
}),
new CountryDemographicAfricanItem(
{
population: 27884000,
birthRate: 42.32,
deathRate: 8.68,
name: `Angola`
}),
new CountryDemographicAfricanItem(
{
population: 10576000,
birthRate: 37.43,
deathRate: 9.32,
name: `Benin`
}),
new CountryDemographicAfricanItem(
{
population: 2121000,
birthRate: 24.14,
deathRate: 7.02,
name: `Botswana`
}),
new CountryDemographicAfricanItem(
{
population: 18111000,
birthRate: 39.44,
deathRate: 8.82,
name: `Burkina Faso`
}),
new CountryDemographicAfricanItem(
{
population: 10160000,
birthRate: 42.66,
deathRate: 11.03,
name: `Burundi`
}),
new CountryDemographicAfricanItem(
{
population: 23298000,
birthRate: 36.84,
deathRate: 10.35,
name: `Cameroon`
}),
new CountryDemographicAfricanItem(
{
population: 525000,
birthRate: 21.14,
deathRate: 5.61,
name: `Cape Verde`
}),
new CountryDemographicAfricanItem(
{
population: 4493000,
birthRate: 36.11,
deathRate: 14.01,
name: `C.A.R.`
}),
new CountryDemographicAfricanItem(
{
population: 14111000,
birthRate: 43.86,
deathRate: 13.22,
name: `Chad`
}),
new CountryDemographicAfricanItem(
{
population: 777000,
birthRate: 33.33,
deathRate: 7.49,
name: `Comoros`
}),
new CountryDemographicAfricanItem(
{
population: 4856000,
birthRate: 35.23,
deathRate: 7.56,
name: `Congo`
}),
new CountryDemographicAfricanItem(
{
population: 23226000,
birthRate: 37.1,
deathRate: 12.54,
name: `Cote Ivoire`
}),
new CountryDemographicAfricanItem(
{
population: 76245000,
birthRate: 42.81,
deathRate: 10.19,
name: `DCongo`
}),
new CountryDemographicAfricanItem(
{
population: 914000,
birthRate: 23.35,
deathRate: 8.37,
name: `Djibouti`
}),
new CountryDemographicAfricanItem(
{
population: 92443000,
birthRate: 27.2,
deathRate: 5.96,
name: `Egypt`
}),
new CountryDemographicAfricanItem(
{
population: 1169000,
birthRate: 34.64,
deathRate: 10.34,
name: `Equatorial Guinea`
}),
new CountryDemographicAfricanItem(
{
population: 3343000,
birthRate: 32.83,
deathRate: 7.07,
name: `Eritrea`
}),
new CountryDemographicAfricanItem(
{
population: 100835000,
birthRate: 32.3,
deathRate: 7,
name: `Ethiopia`
}),
new CountryDemographicAfricanItem(
{
population: 1948000,
birthRate: 30.09,
deathRate: 7.82,
name: `Gabon`
}),
new CountryDemographicAfricanItem(
{
population: 2086000,
birthRate: 39.99,
deathRate: 8.2,
name: `Gambia`
}),
new CountryDemographicAfricanItem(
{
population: 27849000,
birthRate: 31.56,
deathRate: 8.31,
name: `Ghana`
}),
new CountryDemographicAfricanItem(
{
population: 11432000,
birthRate: 36.36,
deathRate: 9.58,
name: `Guinea`
}),
new CountryDemographicAfricanItem(
{
population: 1737000,
birthRate: 37.15,
deathRate: 10.78,
name: `Guinea-Bissau`
}),
new CountryDemographicAfricanItem(
{
population: 47878000,
birthRate: 31.78,
deathRate: 5.84,
name: `Kenya`
}),
new CountryDemographicAfricanItem(
{
population: 2059000,
birthRate: 28.16,
deathRate: 12.92,
name: `Lesotho`
}),
new CountryDemographicAfricanItem(
{
population: 4472000,
birthRate: 34.72,
deathRate: 8.12,
name: `Liberia`
}),
new CountryDemographicAfricanItem(
{
population: 6418000,
birthRate: 20.19,
deathRate: 5.2,
name: `Libya`
}),
new CountryDemographicAfricanItem(
{
population: 24234000,
birthRate: 33.4,
deathRate: 6.48,
name: `Madagascar`
}),
new CountryDemographicAfricanItem(
{
population: 16745000,
birthRate: 37.05,
deathRate: 7.5,
name: `Malawi`
}),
new CountryDemographicAfricanItem(
{
population: 17439000,
birthRate: 43.22,
deathRate: 10.67,
name: `Mali`
}),
new CountryDemographicAfricanItem(
{
population: 4046000,
birthRate: 34.57,
deathRate: 7.96,
name: `Mauritania`
}),
new CountryDemographicAfricanItem(
{
population: 1259000,
birthRate: 10.1,
deathRate: 7.7,
name: `Mauritius`
}),
new CountryDemographicAfricanItem(
{
population: 34664000,
birthRate: 20.4,
deathRate: 5.15,
name: `Morocco`
}),
new CountryDemographicAfricanItem(
{
population: 27042000,
birthRate: 39.36,
deathRate: 10.38,
name: `Mozambique`
}),
new CountryDemographicAfricanItem(
{
population: 2315000,
birthRate: 29.59,
deathRate: 7.46,
name: `Namibia`
}),
new CountryDemographicAfricanItem(
{
population: 20002000,
birthRate: 48.44,
deathRate: 9.94,
name: `Niger`
}),
new CountryDemographicAfricanItem(
{
population: 181136992,
birthRate: 39.37,
deathRate: 12.77,
name: `Nigeria`
}),
new CountryDemographicAfricanItem(
{
population: 11369000,
birthRate: 31.79,
deathRate: 6.13,
name: `Rwanda`
}),
new CountryDemographicAfricanItem(
{
population: 199000,
birthRate: 34.33,
deathRate: 6.81,
name: `Sao Tome and Principe`
}),
new CountryDemographicAfricanItem(
{
population: 14578000,
birthRate: 36.21,
deathRate: 6.07,
name: `Senegal`
}),
new CountryDemographicAfricanItem(
{
population: 95000,
birthRate: 17,
deathRate: 7.5,
name: `Seychelles`
}),
new CountryDemographicAfricanItem(
{
population: 7172000,
birthRate: 35.61,
deathRate: 13.03,
name: `Sierra Leone`
}),
new CountryDemographicAfricanItem(
{
population: 13797000,
birthRate: 43.66,
deathRate: 11.63,
name: `Somalia`
}),
new CountryDemographicAfricanItem(
{
population: 55386000,
birthRate: 21.3,
deathRate: 10.1,
name: `South Africa`
}),
new CountryDemographicAfricanItem(
{
population: 10716000,
birthRate: 36.32,
deathRate: 11.24,
name: `South Sudan`
}),
new CountryDemographicAfricanItem(
{
population: 38903000,
birthRate: 33.32,
deathRate: 7.52,
name: `Sudan`
}),
new CountryDemographicAfricanItem(
{
population: 1104000,
birthRate: 29.27,
deathRate: 9.86,
name: `Swaziland`
}),
new CountryDemographicAfricanItem(
{
population: 51483000,
birthRate: 38.64,
deathRate: 7.02,
name: `Tanzania`
}),
new CountryDemographicAfricanItem(
{
population: 7323000,
birthRate: 34.53,
deathRate: 8.83,
name: `Togo`
}),
new CountryDemographicAfricanItem(
{
population: 11180000,
birthRate: 18.65,
deathRate: 6.36,
name: `Tunisia`
}),
new CountryDemographicAfricanItem(
{
population: 38225000,
birthRate: 42.63,
deathRate: 8.87,
name: `Uganda`
}),
new CountryDemographicAfricanItem(
{
population: 15879000,
birthRate: 38.44,
deathRate: 8,
name: `Zambia`
}),
new CountryDemographicAfricanItem(
{
population: 13815000,
birthRate: 33.94,
deathRate: 8.4,
name: `Zimbabwe`
}),
];
super(...newItems.slice(0));
}
}
}
tsexport class CountryDemographicEuropeItem {
public constructor(init: Partial<CountryDemographicEuropeItem>) {
Object.assign(this, init);
}
public population: number;
public birthRate: number;
public deathRate: number;
public name: string;
}
export class CountryDemographicEurope extends Array<CountryDemographicEuropeItem> {
public constructor(items: Array<CountryDemographicEuropeItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryDemographicEuropeItem(
{
population: 2891000,
birthRate: 11.88,
deathRate: 7.22,
name: `Albania`
}),
new CountryDemographicEuropeItem(
{
population: 8679000,
birthRate: 9.8,
deathRate: 9.6,
name: `Austria`
}),
new CountryDemographicEuropeItem(
{
population: 9439000,
birthRate: 12.5,
deathRate: 12.6,
name: `Belarus`
}),
new CountryDemographicEuropeItem(
{
population: 11288000,
birthRate: 10.8,
deathRate: 9.8,
name: `Belgium`
}),
new CountryDemographicEuropeItem(
{
population: 3429000,
birthRate: 9.12,
deathRate: 10.89,
name: `Bosnia`
}),
new CountryDemographicEuropeItem(
{
population: 7200000,
birthRate: 9.2,
deathRate: 15.3,
name: `Bulgaria`
}),
new CountryDemographicEuropeItem(
{
population: 165000,
birthRate: 9.39,
deathRate: 8.97,
name: `Channel Islands`
}),
new CountryDemographicEuropeItem(
{
population: 4233000,
birthRate: 8.9,
deathRate: 12.9,
name: `Croatia`
}),
new CountryDemographicEuropeItem(
{
population: 1161000,
birthRate: 10.98,
deathRate: 6.84,
name: `Cyprus`
}),
new CountryDemographicEuropeItem(
{
population: 10601000,
birthRate: 10.5,
deathRate: 10.5,
name: `Czechia`
}),
new CountryDemographicEuropeItem(
{
population: 5689000,
birthRate: 10.2,
deathRate: 9.2,
name: `Denmark`
}),
new CountryDemographicEuropeItem(
{
population: 1315000,
birthRate: 10.6,
deathRate: 11.6,
name: `Estonia`
}),
new CountryDemographicEuropeItem(
{
population: 48000,
birthRate: 12.4,
deathRate: 7.7,
name: `Faeroe Islands`
}),
new CountryDemographicEuropeItem(
{
population: 5481000,
birthRate: 10.1,
deathRate: 9.6,
name: `Finland`
}),
new CountryDemographicEuropeItem(
{
population: 64453000,
birthRate: 12,
deathRate: 8.9,
name: `France`
}),
new CountryDemographicEuropeItem(
{
population: 81787000,
birthRate: 9,
deathRate: 11.3,
name: `Germany`
}),
new CountryDemographicEuropeItem(
{
population: 10660000,
birthRate: 8.5,
deathRate: 11.2,
name: `Greece`
}),
new CountryDemographicEuropeItem(
{
population: 9778000,
birthRate: 9.4,
deathRate: 13.4,
name: `Hungary`
}),
new CountryDemographicEuropeItem(
{
population: 330000,
birthRate: 12.5,
deathRate: 6.6,
name: `Iceland`
}),
new CountryDemographicEuropeItem(
{
population: 4652000,
birthRate: 14.1,
deathRate: 6.5,
name: `Ireland`
}),
new CountryDemographicEuropeItem(
{
population: 60578000,
birthRate: 8,
deathRate: 10.7,
name: `Italy`
}),
new CountryDemographicEuropeItem(
{
population: 1998000,
birthRate: 11.1,
deathRate: 14.4,
name: `Latvia`
}),
new CountryDemographicEuropeItem(
{
population: 37000,
birthRate: 8.7,
deathRate: 6.7,
name: `Liechtenstein`
}),
new CountryDemographicEuropeItem(
{
population: 2932000,
birthRate: 10.8,
deathRate: 14.4,
name: `Lithuania`
}),
new CountryDemographicEuropeItem(
{
population: 567000,
birthRate: 10.7,
deathRate: 7,
name: `Luxembourg`
}),
new CountryDemographicEuropeItem(
{
population: 2079000,
birthRate: 11.3,
deathRate: 9.75,
name: `Macedonia`
}),
new CountryDemographicEuropeItem(
{
population: 434000,
birthRate: 10,
deathRate: 8,
name: `Malta`
}),
new CountryDemographicEuropeItem(
{
population: 4071000,
birthRate: 10.52,
deathRate: 11.42,
name: `Moldova`
}),
new CountryDemographicEuropeItem(
{
population: 38000,
birthRate: 8.1,
deathRate: 7.6,
name: `Monaco`
}),
new CountryDemographicEuropeItem(
{
population: 627000,
birthRate: 11.52,
deathRate: 9.8,
name: `Montenegro`
}),
new CountryDemographicEuropeItem(
{
population: 16938000,
birthRate: 10.1,
deathRate: 8.7,
name: `Netherlands`
}),
new CountryDemographicEuropeItem(
{
population: 5200000,
birthRate: 11.3,
deathRate: 7.8,
name: `Norway`
}),
new CountryDemographicEuropeItem(
{
population: 38034000,
birthRate: 9.7,
deathRate: 10.4,
name: `Poland`
}),
new CountryDemographicEuropeItem(
{
population: 10368000,
birthRate: 8.3,
deathRate: 10.5,
name: `Portugal`
}),
new CountryDemographicEuropeItem(
{
population: 19925000,
birthRate: 10,
deathRate: 13.2,
name: `Romania`
}),
new CountryDemographicEuropeItem(
{
population: 144984992,
birthRate: 13.3,
deathRate: 13,
name: `Russia`
}),
new CountryDemographicEuropeItem(
{
population: 33000,
birthRate: 8.2,
deathRate: 7.1,
name: `San Marino`
}),
new CountryDemographicEuropeItem(
{
population: 8877000,
birthRate: 9.3,
deathRate: 14.6,
name: `Serbia`
}),
new CountryDemographicEuropeItem(
{
population: 5436000,
birthRate: 10.3,
deathRate: 9.9,
name: `Slovakia`
}),
new CountryDemographicEuropeItem(
{
population: 2071000,
birthRate: 10,
deathRate: 9.6,
name: `Slovenia`
}),
new CountryDemographicEuropeItem(
{
population: 46672000,
birthRate: 9,
deathRate: 9.1,
name: `Spain`
}),
new CountryDemographicEuropeItem(
{
population: 9765000,
birthRate: 11.7,
deathRate: 9.3,
name: `Sweden`
}),
new CountryDemographicEuropeItem(
{
population: 8297000,
birthRate: 10.5,
deathRate: 8.2,
name: `Switzerland`
}),
new CountryDemographicEuropeItem(
{
population: 44922000,
birthRate: 10.7,
deathRate: 14.9,
name: `Ukraine`
}),
new CountryDemographicEuropeItem(
{
population: 65860000,
birthRate: 11.9,
deathRate: 9.2,
name: `United Kingdom`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcScatterSeriesComponent } from 'igniteui-webcomponents-charts';
import { CountryDemographicEuropeItem, CountryDemographicEurope } from './CountryDemographicEurope';
import { CountryDemographicAfricanItem, CountryDemographicAfrican } from './CountryDemographicAfrican';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartScatterModule,
IgcDataChartScatterCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private xAxis: IgcNumericXAxisComponent
private yAxis: IgcNumericYAxisComponent
private scatterSeries1: IgcScatterSeriesComponent
private scatterSeries2: IgcScatterSeriesComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
var scatterSeries1 = this.scatterSeries1 = document.getElementById('scatterSeries1') as IgcScatterSeriesComponent;
var scatterSeries2 = this.scatterSeries2 = document.getElementById('scatterSeries2') as IgcScatterSeriesComponent;
this._bind = () => {
chart.legend = this.legend;
scatterSeries1.xAxis = this.xAxis;
scatterSeries1.yAxis = this.yAxis;
scatterSeries1.dataSource = this.countryDemographicEurope;
scatterSeries2.xAxis = this.xAxis;
scatterSeries2.yAxis = this.yAxis;
scatterSeries2.dataSource = this.countryDemographicAfrican;
}
this._bind();
}
private _countryDemographicEurope: CountryDemographicEurope = null;
public get countryDemographicEurope(): CountryDemographicEurope {
if (this._countryDemographicEurope == null)
{
this._countryDemographicEurope = new CountryDemographicEurope();
}
return this._countryDemographicEurope;
}
private _countryDemographicAfrican: CountryDemographicAfrican = null;
public get countryDemographicAfrican(): CountryDemographicAfrican {
if (this._countryDemographicAfrican == null)
{
this._countryDemographicAfrican = new CountryDemographicAfrican();
}
return this._countryDemographicAfrican;
}
}
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">
Population Statistics for Selected Continents
</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">
<igc-numeric-x-axis
name="xAxis"
id="xAxis"
title="Death Rate (per 1,000 people)"
minimum-value="5"
maximum-value="15">
</igc-numeric-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
title="Birth Rate (per 1,000 people)"
minimum-value="0"
maximum-value="50"
interval="10">
</igc-numeric-y-axis>
<igc-scatter-series
name="scatterSeries1"
id="scatterSeries1"
title="Europe"
x-member-path="deathRate"
y-member-path="birthRate"
marker-type="Circle"
show-default-tooltip="true">
</igc-scatter-series>
<igc-scatter-series
name="scatterSeries2"
id="scatterSeries2"
title="Africa"
x-member-path="deathRate"
y-member-path="birthRate"
marker-type="Circle"
show-default-tooltip="true">
</igc-scatter-series>
</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
Web Components シェープ チャート
Web Components シェープ チャートは、形状の配列 (X/Y ポイントの配列) を取り、デカルト (x、y) 座標系のポリゴンまたはポリラインのコレクションとして描画するチャートのグループです。これらは、科学データの強調領域でよく使用されますが、ダイアグラム、青写真、さらには建物の間取り図のプロットにも使用できます。シェープ チャートの詳細をご覧ください。
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
Web Components スプライン チャート
Web Components スプライン チャート、またはスプライン グラフは、傾向を示し、比較分析を実行するために、一定期間にわたる 1 つ以上の数量の滑らかな線セグメントで接続されたポイントによって表される連続データ値を示す一種のカテゴリ折れ線チャートです。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。Web Components スプライン チャートは Web Components 折れ線チャートと同じですが、唯一の違いは、折れ線チャートが直線で接続された点であるのに対し、スプライン チャートの点は滑らかな曲線で接続されていることです。スプライン チャートの詳細をご覧ください。
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule,
IgcDataChartInteractivityModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.dataSource = this.countryRenewableElectricity;
chart.legend = this.legend;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
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">
Renewable Electricity Generated
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Spline"
y-axis-title="TWh"
is-transition-in-enabled="true"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
computed-plot-area-margin-mode="Series">
</igc-category-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 ステップ チャート
Web Components ステップ折れ線チャート、またはステップ折れ線グラフは、ステップ状の進捗を形成する連続した垂直線と水平線で接続されたデータ ポイントのコレクションを描画するカテゴリ チャートです。値は Y 軸 (左側のラベル) に表示され、カテゴリは X 軸 (下部のラベル) に表示されます。Web Components ステップ折れ線チャートは、一定期間の変化量を強調するか、複数の項目を比較します。Web Components ステップ折れ線チャートは、ステップ線の下の領域が塗りつぶされていないことを除いて、すべての点で Web Components ステップエリア チャートと同じです。ステップ折れ線チャートの詳細をご覧ください。
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule,
IgcDataChartInteractivityModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.legend = this.legend;
chart.dataSource = this.countryRenewableElectricity;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
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">
Renewable Electricity Generated
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="StepLine"
included-properties="year, europe, china, america"
is-category-highlighting-enabled="true"
is-series-highlighting-enabled="true"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
x-axis-interval="1"
y-axis-title="TWh"
crosshairs-snap-to-data="true">
</igc-category-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 ツリーマップ
Ignite UI for Web Components ツリーマップは、ネストされた一連のノードとして階層 (ツリー構造) データを表示します。ツリーの各ブランチにはツリーマップ ノードが提供されて、サブマップを表す小さなノードでタイル化されます。各ノードの長方形には、データ上の指定されたディメンションに比例した領域があります。多くの場合、ノードは色分けされて、データの個別のディメンションを示します。ツリーマップの詳細をご覧ください。
export class CountyHierarchicalDataItem {
public constructor(init: Partial<CountyHierarchicalDataItem>) {
Object.assign(this, init);
}
public code: string;
public parent: string;
public name: string;
public population: number;
}
export class CountyHierarchicalData extends Array<CountyHierarchicalDataItem> {
public constructor(items: Array<CountyHierarchicalDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountyHierarchicalDataItem(
{
code: `AFC`,
parent: null,
name: `Africa`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `ASA`,
parent: null,
name: `Asia`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `EUR`,
parent: null,
name: `Europe`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `MDE`,
parent: null,
name: `Middle East`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `NAM`,
parent: null,
name: `North America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: null,
name: `Central America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `SAM`,
parent: null,
name: `South America`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `OCE`,
parent: null,
name: `Oceania`,
population: null
}),
new CountyHierarchicalDataItem(
{
code: `ANG`,
parent: `Africa`,
name: `Angola`,
population: 19618432
}),
new CountyHierarchicalDataItem(
{
code: `BEN`,
parent: `Africa`,
name: `Benin`,
population: 9099922
}),
new CountyHierarchicalDataItem(
{
code: `BOT`,
parent: `Africa`,
name: `Botswana`,
population: 2030738
}),
new CountyHierarchicalDataItem(
{
code: `BUR`,
parent: `Africa`,
name: `Burkina Faso`,
population: 16967845
}),
new CountyHierarchicalDataItem(
{
code: `BUR`,
parent: `Africa`,
name: `Burundi`,
population: 8575172
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: `Africa`,
name: `Cameroon`,
population: 20030362
}),
new CountyHierarchicalDataItem(
{
code: `CPV`,
parent: `Africa`,
name: `Cape Verde`,
population: 500585
}),
new CountyHierarchicalDataItem(
{
code: `CAR`,
parent: `Africa`,
name: `Central African Republic`,
population: 4486837
}),
new CountyHierarchicalDataItem(
{
code: `CHD`,
parent: `Africa`,
name: `Chad`,
population: 11525496
}),
new CountyHierarchicalDataItem(
{
code: `COM`,
parent: `Africa`,
name: `Comoros`,
population: 753943
}),
new CountyHierarchicalDataItem(
{
code: `DRC`,
parent: `Africa`,
name: `Congo DRC`,
population: 67757577
}),
new CountyHierarchicalDataItem(
{
code: `CRP`,
parent: `Africa`,
name: `Congo Republic`,
population: 4139748
}),
new CountyHierarchicalDataItem(
{
code: `CIR`,
parent: `Africa`,
name: `Cote Ivoire`,
population: 20152894
}),
new CountyHierarchicalDataItem(
{
code: `DBT`,
parent: `Africa`,
name: `Djibouti`,
population: 905564
}),
new CountyHierarchicalDataItem(
{
code: `ETG`,
parent: `Africa`,
name: `Equatorial Guinea`,
population: 720213
}),
new CountyHierarchicalDataItem(
{
code: `ERT`,
parent: `Africa`,
name: `Eritrea`,
population: 5415280
}),
new CountyHierarchicalDataItem(
{
code: `ETH`,
parent: `Africa`,
name: `Ethiopia`,
population: 84734262
}),
new CountyHierarchicalDataItem(
{
code: `GBN`,
parent: `Africa`,
name: `Gabon`,
population: 1534262
}),
new CountyHierarchicalDataItem(
{
code: `GMB`,
parent: `Africa`,
name: `Gambia`,
population: 1776103
}),
new CountyHierarchicalDataItem(
{
code: `GHN`,
parent: `Africa`,
name: `Ghana`,
population: 24965816
}),
new CountyHierarchicalDataItem(
{
code: `GUN`,
parent: `Africa`,
name: `Guinea`,
population: 10221808
}),
new CountyHierarchicalDataItem(
{
code: `GNB`,
parent: `Africa`,
name: `Guinea-Bissau`,
population: 1547061
}),
new CountyHierarchicalDataItem(
{
code: `KEN`,
parent: `Africa`,
name: `Kenya`,
population: 41609728
}),
new CountyHierarchicalDataItem(
{
code: `LES`,
parent: `Africa`,
name: `Lesotho`,
population: 2193843
}),
new CountyHierarchicalDataItem(
{
code: `LBR`,
parent: `Africa`,
name: `Liberia`,
population: 4128572
}),
new CountyHierarchicalDataItem(
{
code: `MDG`,
parent: `Africa`,
name: `Madagascar`,
population: 21315135
}),
new CountyHierarchicalDataItem(
{
code: `MLW`,
parent: `Africa`,
name: `Malawi`,
population: 15380888
}),
new CountyHierarchicalDataItem(
{
code: `MAL`,
parent: `Africa`,
name: `Mali`,
population: 15839538
}),
new CountyHierarchicalDataItem(
{
code: `MRT`,
parent: `Africa`,
name: `Mauritania`,
population: 3541540
}),
new CountyHierarchicalDataItem(
{
code: `MUS`,
parent: `Africa`,
name: `Mauritius`,
population: 1286051
}),
new CountyHierarchicalDataItem(
{
code: `MOZ`,
parent: `Africa`,
name: `Mozambique`,
population: 23929708
}),
new CountyHierarchicalDataItem(
{
code: `NMB`,
parent: `Africa`,
name: `Namibia`,
population: 2324004
}),
new CountyHierarchicalDataItem(
{
code: `NER`,
parent: `Africa`,
name: `Niger`,
population: 16068994
}),
new CountyHierarchicalDataItem(
{
code: `NGA`,
parent: `Africa`,
name: `Nigeria`,
population: 162470737
}),
new CountyHierarchicalDataItem(
{
code: `RWD`,
parent: `Africa`,
name: `Rwanda`,
population: 10942950
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Africa`,
name: `Sao Tome`,
population: 168526
}),
new CountyHierarchicalDataItem(
{
code: `SEN`,
parent: `Africa`,
name: `Senegal`,
population: 12767556
}),
new CountyHierarchicalDataItem(
{
code: `SYC`,
parent: `Africa`,
name: `Seychelles`,
population: 86000
}),
new CountyHierarchicalDataItem(
{
code: `SRL`,
parent: `Africa`,
name: `Sierra Leone`,
population: 5997486
}),
new CountyHierarchicalDataItem(
{
code: `ZAF`,
parent: `Africa`,
name: `South Africa`,
population: 50586757
}),
new CountyHierarchicalDataItem(
{
code: `SSD`,
parent: `Africa`,
name: `South Sudan`,
population: 10314021
}),
new CountyHierarchicalDataItem(
{
code: `SDN`,
parent: `Africa`,
name: `Sudan`,
population: 34318385
}),
new CountyHierarchicalDataItem(
{
code: `SWZ`,
parent: `Africa`,
name: `Swaziland`,
population: 1067773
}),
new CountyHierarchicalDataItem(
{
code: `TNZ`,
parent: `Africa`,
name: `Tanzania`,
population: 46218486
}),
new CountyHierarchicalDataItem(
{
code: `TOG`,
parent: `Africa`,
name: `Togo`,
population: 6154813
}),
new CountyHierarchicalDataItem(
{
code: `UGN`,
parent: `Africa`,
name: `Uganda`,
population: 34509205
}),
new CountyHierarchicalDataItem(
{
code: `ZMB`,
parent: `Africa`,
name: `Zambia`,
population: 13474959
}),
new CountyHierarchicalDataItem(
{
code: `ZWE`,
parent: `Africa`,
name: `Zimbabwe`,
population: 12754378
}),
new CountyHierarchicalDataItem(
{
code: `AFG`,
parent: `Asia`,
name: `Afghanistan`,
population: 35320445
}),
new CountyHierarchicalDataItem(
{
code: `BAN`,
parent: `Asia`,
name: `Bangladesh`,
population: 150493658
}),
new CountyHierarchicalDataItem(
{
code: `BHT`,
parent: `Asia`,
name: `Bhutan`,
population: 738267
}),
new CountyHierarchicalDataItem(
{
code: `BRN`,
parent: `Asia`,
name: `Brunei`,
population: 405938
}),
new CountyHierarchicalDataItem(
{
code: `CAM`,
parent: `Asia`,
name: `Cambodia`,
population: 14305183
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `Asia`,
name: `China`,
population: 1344130000
}),
new CountyHierarchicalDataItem(
{
code: `HNK`,
parent: `Asia`,
name: `Hong Kong`,
population: 7071600
}),
new CountyHierarchicalDataItem(
{
code: `IND`,
parent: `Asia`,
name: `India`,
population: 1241491960
}),
new CountyHierarchicalDataItem(
{
code: `IDN`,
parent: `Asia`,
name: `Indonesia`,
population: 242325638
}),
new CountyHierarchicalDataItem(
{
code: `JPN`,
parent: `Asia`,
name: `Japan`,
population: 127817277
}),
new CountyHierarchicalDataItem(
{
code: `KZH`,
parent: `Asia`,
name: `Kazakhstan`,
population: 16558676
}),
new CountyHierarchicalDataItem(
{
code: `NKO`,
parent: `Asia`,
name: `North Korea`,
population: 24451285
}),
new CountyHierarchicalDataItem(
{
code: `SKO`,
parent: `Asia`,
name: `South Korea`,
population: 49779000
}),
new CountyHierarchicalDataItem(
{
code: `KGZ`,
parent: `Asia`,
name: `Kyrgyzstan`,
population: 5514600
}),
new CountyHierarchicalDataItem(
{
code: `LAO`,
parent: `Asia`,
name: `Lao PDR`,
population: 6288037
}),
new CountyHierarchicalDataItem(
{
code: `MAC`,
parent: `Asia`,
name: `Macao`,
population: 555731
}),
new CountyHierarchicalDataItem(
{
code: `MYS`,
parent: `Asia`,
name: `Malaysia`,
population: 28859154
}),
new CountyHierarchicalDataItem(
{
code: `MDV`,
parent: `Asia`,
name: `Maldives`,
population: 320081
}),
new CountyHierarchicalDataItem(
{
code: `MNG`,
parent: `Asia`,
name: `Mongolia`,
population: 2800114
}),
new CountyHierarchicalDataItem(
{
code: `MYM`,
parent: `Asia`,
name: `Myanmar`,
population: 48336763
}),
new CountyHierarchicalDataItem(
{
code: `NPL`,
parent: `Asia`,
name: `Nepal`,
population: 30485798
}),
new CountyHierarchicalDataItem(
{
code: `PHP`,
parent: `Asia`,
name: `Philippines`,
population: 94852030
}),
new CountyHierarchicalDataItem(
{
code: `SNG`,
parent: `Asia`,
name: `Singapore`,
population: 5183700
}),
new CountyHierarchicalDataItem(
{
code: `SRL`,
parent: `Asia`,
name: `Sri Lanka`,
population: 20869000
}),
new CountyHierarchicalDataItem(
{
code: `TKS`,
parent: `Asia`,
name: `Tajikistan`,
population: 6976958
}),
new CountyHierarchicalDataItem(
{
code: `THL`,
parent: `Asia`,
name: `Thailand`,
population: 69518555
}),
new CountyHierarchicalDataItem(
{
code: `TRK`,
parent: `Asia`,
name: `Turkmenistan`,
population: 5105301
}),
new CountyHierarchicalDataItem(
{
code: `UZB`,
parent: `Asia`,
name: `Uzbekistan`,
population: 29341200
}),
new CountyHierarchicalDataItem(
{
code: `VTN`,
parent: `Asia`,
name: `Vietnam`,
population: 87840000
}),
new CountyHierarchicalDataItem(
{
code: `ANT`,
parent: `Central America`,
name: `Antigua`,
population: 89612
}),
new CountyHierarchicalDataItem(
{
code: `ARB`,
parent: `Central America`,
name: `Aruba`,
population: 108141
}),
new CountyHierarchicalDataItem(
{
code: `BHM`,
parent: `Central America`,
name: `Bahamas`,
population: 347176
}),
new CountyHierarchicalDataItem(
{
code: `BRB`,
parent: `Central America`,
name: `Barbados`,
population: 273925
}),
new CountyHierarchicalDataItem(
{
code: `BLZ`,
parent: `Central America`,
name: `Belize`,
population: 356600
}),
new CountyHierarchicalDataItem(
{
code: `BRM`,
parent: `Central America`,
name: `Bermuda`,
population: 64700
}),
new CountyHierarchicalDataItem(
{
code: `CYI`,
parent: `Central America`,
name: `Cayman Islands`,
population: 56729
}),
new CountyHierarchicalDataItem(
{
code: `CSR`,
parent: `Central America`,
name: `Costa Rica`,
population: 4726575
}),
new CountyHierarchicalDataItem(
{
code: `CUB`,
parent: `Central America`,
name: `Cuba`,
population: 11253665
}),
new CountyHierarchicalDataItem(
{
code: `CUR`,
parent: `Central America`,
name: `Curacao`,
population: 145619
}),
new CountyHierarchicalDataItem(
{
code: `DMA`,
parent: `Central America`,
name: `Dominica`,
population: 67675
}),
new CountyHierarchicalDataItem(
{
code: `DOM`,
parent: `Central America`,
name: `Dominican Republic`,
population: 10056181
}),
new CountyHierarchicalDataItem(
{
code: `SLV`,
parent: `Central America`,
name: `El Salvador`,
population: 6227491
}),
new CountyHierarchicalDataItem(
{
code: `FIS`,
parent: `Central America`,
name: `Faeroe Islands`,
population: 48863
}),
new CountyHierarchicalDataItem(
{
code: `GND`,
parent: `Central America`,
name: `Grenada`,
population: 104890
}),
new CountyHierarchicalDataItem(
{
code: `GUA`,
parent: `Central America`,
name: `Guam`,
population: 182111
}),
new CountyHierarchicalDataItem(
{
code: `GTM`,
parent: `Central America`,
name: `Guatemala`,
population: 14757316
}),
new CountyHierarchicalDataItem(
{
code: `HAT`,
parent: `Central America`,
name: `Haiti`,
population: 10123787
}),
new CountyHierarchicalDataItem(
{
code: `HON`,
parent: `Central America`,
name: `Honduras`,
population: 7754687
}),
new CountyHierarchicalDataItem(
{
code: `JAM`,
parent: `Central America`,
name: `Jamaica`,
population: 2706500
}),
new CountyHierarchicalDataItem(
{
code: `NCR`,
parent: `Central America`,
name: `Nicaragua`,
population: 5869859
}),
new CountyHierarchicalDataItem(
{
code: `NMI`,
parent: `Central America`,
name: `Northern Mariana Islands`,
population: 61174
}),
new CountyHierarchicalDataItem(
{
code: `PAN`,
parent: `Central America`,
name: `Panama`,
population: 3571185
}),
new CountyHierarchicalDataItem(
{
code: `PRT`,
parent: `Central America`,
name: `Puerto Rico`,
population: 3706690
}),
new CountyHierarchicalDataItem(
{
code: `STK`,
parent: `Central America`,
name: `St. Kitts`,
population: 53051
}),
new CountyHierarchicalDataItem(
{
code: `STL`,
parent: `Central America`,
name: `St. Lucia`,
population: 176000
}),
new CountyHierarchicalDataItem(
{
code: `STV`,
parent: `Central America`,
name: `St. Vincent`,
population: 109365
}),
new CountyHierarchicalDataItem(
{
code: `TAB`,
parent: `Central America`,
name: `Trinidad and Tobago`,
population: 1346350
}),
new CountyHierarchicalDataItem(
{
code: `RCI`,
parent: `Central America`,
name: `Turks and Caicos Islands`,
population: 39184
}),
new CountyHierarchicalDataItem(
{
code: `ISV`,
parent: `Central America`,
name: `US Virgin Islands`,
population: 109666
}),
new CountyHierarchicalDataItem(
{
code: `ALB`,
parent: `Europe`,
name: `Albania`,
population: 3215988
}),
new CountyHierarchicalDataItem(
{
code: `AND`,
parent: `Europe`,
name: `Andorra`,
population: 86165
}),
new CountyHierarchicalDataItem(
{
code: `ARM`,
parent: `Europe`,
name: `Armenia`,
population: 3100236
}),
new CountyHierarchicalDataItem(
{
code: `AUT`,
parent: `Europe`,
name: `Austria`,
population: 8423635
}),
new CountyHierarchicalDataItem(
{
code: `BER`,
parent: `Europe`,
name: `Belarus`,
population: 9473000
}),
new CountyHierarchicalDataItem(
{
code: `BEL`,
parent: `Europe`,
name: `Belgium`,
population: 11020952
}),
new CountyHierarchicalDataItem(
{
code: `BIH`,
parent: `Europe`,
name: `Bosnia`,
population: 3752228
}),
new CountyHierarchicalDataItem(
{
code: `BUL`,
parent: `Europe`,
name: `Bulgaria`,
population: 7348328
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `Europe`,
name: `Channel Islands`,
population: 153876
}),
new CountyHierarchicalDataItem(
{
code: `CRO`,
parent: `Europe`,
name: `Croatia`,
population: 4403000
}),
new CountyHierarchicalDataItem(
{
code: `CYP`,
parent: `Europe`,
name: `Cyprus`,
population: 1116564
}),
new CountyHierarchicalDataItem(
{
code: `CZE`,
parent: `Europe`,
name: `Czechia`,
population: 10496088
}),
new CountyHierarchicalDataItem(
{
code: `DEN`,
parent: `Europe`,
name: `Denmark`,
population: 5570572
}),
new CountyHierarchicalDataItem(
{
code: `EST`,
parent: `Europe`,
name: `Estonia`,
population: 1339928
}),
new CountyHierarchicalDataItem(
{
code: `FIN`,
parent: `Europe`,
name: `Finland`,
population: 5388272
}),
new CountyHierarchicalDataItem(
{
code: `FRA`,
parent: `Europe`,
name: `France`,
population: 65433714
}),
new CountyHierarchicalDataItem(
{
code: `GEO`,
parent: `Europe`,
name: `Georgia`,
population: 4486000
}),
new CountyHierarchicalDataItem(
{
code: `DEU`,
parent: `Europe`,
name: `Germany`,
population: 81797673
}),
new CountyHierarchicalDataItem(
{
code: `GRC`,
parent: `Europe`,
name: `Greece`,
population: 11300410
}),
new CountyHierarchicalDataItem(
{
code: `HUN`,
parent: `Europe`,
name: `Hungary`,
population: 9971727
}),
new CountyHierarchicalDataItem(
{
code: `ICE`,
parent: `Europe`,
name: `Iceland`,
population: 319014
}),
new CountyHierarchicalDataItem(
{
code: `IRE`,
parent: `Europe`,
name: `Ireland`,
population: 4576317
}),
new CountyHierarchicalDataItem(
{
code: `IOM`,
parent: `Europe`,
name: `Isle of Man`,
population: 83327
}),
new CountyHierarchicalDataItem(
{
code: `ITA`,
parent: `Europe`,
name: `Italy`,
population: 60723603
}),
new CountyHierarchicalDataItem(
{
code: `KOS`,
parent: `Europe`,
name: `Kosovo`,
population: 1802765
}),
new CountyHierarchicalDataItem(
{
code: `LAT`,
parent: `Europe`,
name: `Latvia`,
population: 2058184
}),
new CountyHierarchicalDataItem(
{
code: `LVA`,
parent: `Europe`,
name: `Liechtenstein`,
population: 36304
}),
new CountyHierarchicalDataItem(
{
code: `LTU`,
parent: `Europe`,
name: `Lithuania`,
population: 3030173
}),
new CountyHierarchicalDataItem(
{
code: `LUX`,
parent: `Europe`,
name: `Luxembourg`,
population: 518252
}),
new CountyHierarchicalDataItem(
{
code: `MKD`,
parent: `Europe`,
name: `North Macedonia`,
population: 2063893
}),
new CountyHierarchicalDataItem(
{
code: `MLT`,
parent: `Europe`,
name: `Malta`,
population: 415654
}),
new CountyHierarchicalDataItem(
{
code: `MDA`,
parent: `Europe`,
name: `Moldova`,
population: 3559000
}),
new CountyHierarchicalDataItem(
{
code: `MON`,
parent: `Europe`,
name: `Monaco`,
population: 35427
}),
new CountyHierarchicalDataItem(
{
code: `MNE`,
parent: `Europe`,
name: `Montenegro`,
population: 632261
}),
new CountyHierarchicalDataItem(
{
code: `MLD`,
parent: `Europe`,
name: `Netherlands`,
population: 16693074
}),
new CountyHierarchicalDataItem(
{
code: `NOR`,
parent: `Europe`,
name: `Norway`,
population: 4953088
}),
new CountyHierarchicalDataItem(
{
code: `POL`,
parent: `Europe`,
name: `Poland`,
population: 38534157
}),
new CountyHierarchicalDataItem(
{
code: `POR`,
parent: `Europe`,
name: `Portugal`,
population: 10556999
}),
new CountyHierarchicalDataItem(
{
code: `ROM`,
parent: `Europe`,
name: `Romania`,
population: 21384832
}),
new CountyHierarchicalDataItem(
{
code: `RUS`,
parent: `Europe`,
name: `Russia`,
population: 142960000
}),
new CountyHierarchicalDataItem(
{
code: `SMR`,
parent: `Europe`,
name: `San Marino`,
population: 31735
}),
new CountyHierarchicalDataItem(
{
code: `SBR`,
parent: `Europe`,
name: `Serbia`,
population: 7258745
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Europe`,
name: `Sint Maarten`,
population: 36609
}),
new CountyHierarchicalDataItem(
{
code: `SVK`,
parent: `Europe`,
name: `Slovakia`,
population: 5398384
}),
new CountyHierarchicalDataItem(
{
code: `SLO`,
parent: `Europe`,
name: `Slovenia`,
population: 2052843
}),
new CountyHierarchicalDataItem(
{
code: `ESP`,
parent: `Europe`,
name: `Spain`,
population: 46174601
}),
new CountyHierarchicalDataItem(
{
code: `STM`,
parent: `Europe`,
name: `St. Martin`,
population: 30615
}),
new CountyHierarchicalDataItem(
{
code: `SWE`,
parent: `Europe`,
name: `Sweden`,
population: 9449213
}),
new CountyHierarchicalDataItem(
{
code: `CHE`,
parent: `Europe`,
name: `Switzerland`,
population: 7912398
}),
new CountyHierarchicalDataItem(
{
code: `UKR`,
parent: `Europe`,
name: `Ukraine`,
population: 45706100
}),
new CountyHierarchicalDataItem(
{
code: `GBR`,
parent: `Europe`,
name: `United Kingdom`,
population: 62744081
}),
new CountyHierarchicalDataItem(
{
code: `DZA`,
parent: `Middle East`,
name: `Algeria`,
population: 35980193
}),
new CountyHierarchicalDataItem(
{
code: `AZE`,
parent: `Middle East`,
name: `Azerbaijan`,
population: 9173082
}),
new CountyHierarchicalDataItem(
{
code: `BHR`,
parent: `Middle East`,
name: `Bahrain`,
population: 1323535
}),
new CountyHierarchicalDataItem(
{
code: `EGY`,
parent: `Middle East`,
name: `Egypt`,
population: 82536770
}),
new CountyHierarchicalDataItem(
{
code: `IRN`,
parent: `Middle East`,
name: `Iran`,
population: 74798599
}),
new CountyHierarchicalDataItem(
{
code: `IRQ`,
parent: `Middle East`,
name: `Iraq`,
population: 32961959
}),
new CountyHierarchicalDataItem(
{
code: `ISR`,
parent: `Middle East`,
name: `Israel`,
population: 7765900
}),
new CountyHierarchicalDataItem(
{
code: `JOR`,
parent: `Middle East`,
name: `Jordan`,
population: 6181000
}),
new CountyHierarchicalDataItem(
{
code: `KWT`,
parent: `Middle East`,
name: `Kuwait`,
population: 2818042
}),
new CountyHierarchicalDataItem(
{
code: `LBN`,
parent: `Middle East`,
name: `Lebanon`,
population: 4259405
}),
new CountyHierarchicalDataItem(
{
code: `LBY`,
parent: `Middle East`,
name: `Libya`,
population: 6422772
}),
new CountyHierarchicalDataItem(
{
code: `MAR`,
parent: `Middle East`,
name: `Morocco`,
population: 32272974
}),
new CountyHierarchicalDataItem(
{
code: `OMN`,
parent: `Middle East`,
name: `Oman`,
population: 2846145
}),
new CountyHierarchicalDataItem(
{
code: `PKS`,
parent: `Middle East`,
name: `Pakistan`,
population: 176745364
}),
new CountyHierarchicalDataItem(
{
code: `QTR`,
parent: `Middle East`,
name: `Qatar`,
population: 1870041
}),
new CountyHierarchicalDataItem(
{
code: `SAR`,
parent: `Middle East`,
name: `Saudi Arabia`,
population: 28082541
}),
new CountyHierarchicalDataItem(
{
code: `SOM`,
parent: `Middle East`,
name: `Somalia`,
population: 9556873
}),
new CountyHierarchicalDataItem(
{
code: `SYR`,
parent: `Middle East`,
name: `Syria`,
population: 20820311
}),
new CountyHierarchicalDataItem(
{
code: `TUN`,
parent: `Middle East`,
name: `Tunisia`,
population: 10673800
}),
new CountyHierarchicalDataItem(
{
code: `TUR`,
parent: `Middle East`,
name: `Turkey`,
population: 73639596
}),
new CountyHierarchicalDataItem(
{
code: `UAE`,
parent: `Middle East`,
name: `United Arab Emirates`,
population: 7890924
}),
new CountyHierarchicalDataItem(
{
code: `WTB`,
parent: `Middle East`,
name: `West Bank`,
population: 3927051
}),
new CountyHierarchicalDataItem(
{
code: `YEM`,
parent: `Middle East`,
name: `Yemen`,
population: 24799880
}),
new CountyHierarchicalDataItem(
{
code: `CAN`,
parent: `North America`,
name: `Canada`,
population: 34483975
}),
new CountyHierarchicalDataItem(
{
code: `GRL`,
parent: `North America`,
name: `Greenland`,
population: 56840
}),
new CountyHierarchicalDataItem(
{
code: `MEX`,
parent: `North America`,
name: `Mexico`,
population: 114793341
}),
new CountyHierarchicalDataItem(
{
code: `USA`,
parent: `North America`,
name: `United States`,
population: 311591917
}),
new CountyHierarchicalDataItem(
{
code: `AMS`,
parent: `Oceania`,
name: `American Samoa`,
population: 69543
}),
new CountyHierarchicalDataItem(
{
code: `AUS`,
parent: `Oceania`,
name: `Australia`,
population: 22323900
}),
new CountyHierarchicalDataItem(
{
code: `FIJ`,
parent: `Oceania`,
name: `Fiji`,
population: 868406
}),
new CountyHierarchicalDataItem(
{
code: `FRP`,
parent: `Oceania`,
name: `French Polynesia`,
population: 273777
}),
new CountyHierarchicalDataItem(
{
code: `KIR`,
parent: `Oceania`,
name: `Kiribati`,
population: 101093
}),
new CountyHierarchicalDataItem(
{
code: `MIS`,
parent: `Oceania`,
name: `Marshall Islands`,
population: 54816
}),
new CountyHierarchicalDataItem(
{
code: `MCR`,
parent: `Oceania`,
name: `Micronesia`,
population: 111542
}),
new CountyHierarchicalDataItem(
{
code: `NCD`,
parent: `Oceania`,
name: `New Caledonia`,
population: 254024
}),
new CountyHierarchicalDataItem(
{
code: `NZL`,
parent: `Oceania`,
name: `New Zealand`,
population: 4405200
}),
new CountyHierarchicalDataItem(
{
code: `PAL`,
parent: `Oceania`,
name: `Palau`,
population: 20609
}),
new CountyHierarchicalDataItem(
{
code: `PNG`,
parent: `Oceania`,
name: `Papua New Guinea`,
population: 7013829
}),
new CountyHierarchicalDataItem(
{
code: `SAM`,
parent: `Oceania`,
name: `Samoa`,
population: 183874
}),
new CountyHierarchicalDataItem(
{
code: `SIS`,
parent: `Oceania`,
name: `Solomon Islands`,
population: 552267
}),
new CountyHierarchicalDataItem(
{
code: `TML`,
parent: `Oceania`,
name: `Timor-Leste`,
population: 1175880
}),
new CountyHierarchicalDataItem(
{
code: `TON`,
parent: `Oceania`,
name: `Tonga`,
population: 104509
}),
new CountyHierarchicalDataItem(
{
code: `TUV`,
parent: `Oceania`,
name: `Tuvalu`,
population: 9847
}),
new CountyHierarchicalDataItem(
{
code: `VNT`,
parent: `Oceania`,
name: `Vanuatu`,
population: 245619
}),
new CountyHierarchicalDataItem(
{
code: `ARG`,
parent: `South America`,
name: `Argentina`,
population: 40764561
}),
new CountyHierarchicalDataItem(
{
code: `BOL`,
parent: `South America`,
name: `Bolivia`,
population: 10088108
}),
new CountyHierarchicalDataItem(
{
code: `BRA`,
parent: `South America`,
name: `Brazil`,
population: 196655014
}),
new CountyHierarchicalDataItem(
{
code: `CHI`,
parent: `South America`,
name: `Chile`,
population: 17269525
}),
new CountyHierarchicalDataItem(
{
code: `COL`,
parent: `South America`,
name: `Colombia`,
population: 46927125
}),
new CountyHierarchicalDataItem(
{
code: `ECU`,
parent: `South America`,
name: `Ecuador`,
population: 14666055
}),
new CountyHierarchicalDataItem(
{
code: `GUY`,
parent: `South America`,
name: `Guyana`,
population: 756040
}),
new CountyHierarchicalDataItem(
{
code: `PAR`,
parent: `South America`,
name: `Paraguay`,
population: 6568290
}),
new CountyHierarchicalDataItem(
{
code: `PER`,
parent: `South America`,
name: `Peru`,
population: 29399817
}),
new CountyHierarchicalDataItem(
{
code: `SUR`,
parent: `South America`,
name: `Suriname`,
population: 529419
}),
new CountyHierarchicalDataItem(
{
code: `URG`,
parent: `South America`,
name: `Uruguay`,
population: 3368595
}),
new CountyHierarchicalDataItem(
{
code: `VEN`,
parent: `South America`,
name: `Venezuela`,
population: 29278000
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcTreemapModule } from 'igniteui-webcomponents-charts';
import { IgcTreemapComponent } from 'igniteui-webcomponents-charts';
import { CountyHierarchicalDataItem, CountyHierarchicalData } from './CountyHierarchicalData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcTreemapModule
);
export class Sample {
private treemap: IgcTreemapComponent
private _bind: () => void;
constructor() {
var treemap = this.treemap = document.getElementById('treemap') as IgcTreemapComponent;
this._bind = () => {
treemap.dataSource = this.countyHierarchicalData;
}
this._bind();
}
private _countyHierarchicalData: CountyHierarchicalData = null;
public get countyHierarchicalData(): CountyHierarchicalData {
if (this._countyHierarchicalData == null)
{
this._countyHierarchicalData = new CountyHierarchicalData();
}
return this._countyHierarchicalData;
}
}
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">
Comparing Population of Countries
</div>
<div class="container fill">
<igc-treemap
name="treemap"
id="treemap"
parent-id-member-path="parent"
id-member-path="name"
label-member-path="name"
value-member-path="population"
fill-scale-mode="Value"
fill-scale-minimum-value="0"
fill-scale-maximum-value="1500000000"
fill-brushes="rgba(78, 98, 207, 1) rgba(138, 88, 214, 1)"
is-fill-scale-logarithmic="true"
root-title="Countries"
header-display-mode="Overlay"
parent-node-bottom-padding="0"
parent-node-left-padding="0"
parent-node-right-padding="0"
parent-node-top-padding="0"
outline="black"
stroke-thickness="1">
</igc-treemap>
</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 チャート主な機能
組み込みの時間軸を使用して、データが時間の経過とともにどのように変化するかを示します。チャートを操作すると、時間スケールとラベル書式が動的に変更されます。YahooFinance や GoogleFinance など、ファイナンシャル チャートに期待されるすべての機能を備えた完全なファイナンシャル チャートが含まれています。
動的なチャート
新しい複合チャートを作成し、単一のチャートで複数のシリーズを重ね合わせて、データを視覚化します。チャートでは、複数のチャート列を表示および重ねて、積層型縦棒を作成できます。
カスタム ツールチップ
新しい複合ビューを作成し、単一のチャートで複数のシリーズを重ね合わせて、データを視覚化します。チャートでは、画像やデータ バインディングを使用してカスタム ツールチップを作成したり、複数のシリーズのツールチップを 1 つのツールチップに組み合わせたりすることもできます。
リアルタイムの高パフォーマンスなチャート
ライブのストリーミング データを使用して、ミリ秒レベルの更新で数千のデータ ポイントをリアルタイムで表示します。タッチ デバイスでチャートを操作しているときでも、ラグ、画面のちらつき、表示の遅れは発生しません。デモについては、高頻度のチャートトピックを参照してください。
大量のデータ処理
チャート パフォーマンスを最適化して、エンドユーザーがチャートのコンテンツをズームイン/ズームアウトまたはナビゲートしようとしたときにスムーズなパフォーマンスを提供し続けながら、数百万のデータ ポイントを描画します。デモについては、大量データのチャートトピックを参照してください。
モジュラー デザイン
Web Componentsチャート は、モジュール性のために設計されています。必要な機能のみが展開一部であるため、描画されたページで可能な限り最小のフットプリントを取得します。
スマート データ バインディング
チャート タイプの選択はお任せください。当社のスマート データ アダプタは、データに最適なチャート タイプを自動的に選択します。データ ソースを設定するだけです。
トレンドライン
Web Components チャートは、線形 (x)、二次 (x2)、三次 (x3)、四次 (x4)、五次 (x5)、対数 (logn x)、指数 (ex)、べき乗 (axk + o(xk)) など、必要になるすべてのトレンドラインをサポートします。
インタラクティブなパニングとズーム
シングル タッチまたはマルチタッチ、キーボード、ズーム バー、マウス ホイールを使用し、マウスで任意の長方形領域をドラッグ選択してズームインし、データ ポイントのクローズアップ、データ履歴のスクロール、またはデータ領域のパンを行います。
マーカー、ツールチップ、およびテンプレート
10 個のマーカー タイプのいずれかを使用するか、独自のマーカー-テンプレートを作成して、データをハイライト表示するか、シンプルなツールチップまたはカスタム ツールチップを使用した多軸および複数系列のチャートで、データにコンテキストと意味を追加します。
その他の詳細
他の Web Components チャートを検討している場合は、次のことを考慮しましょう:
- 65 を超える Web Components チャート タイプと複合チャートが含まれており、スマート データ アダプタを使用した類を見ない最も簡単な構成が可能です。
- チャートは、Angular、Blazor、jQuery / JavaScript、React、UNO、UWP、WPF、Windows Forms、WebComponents、WinUI、Xamarin などのすべてのプラットフォームで最適化されています。すべてのプラットフォームで同じ API と機能をサポートします。
- 当社の株価チャートとファイナンシャル チャートは、YahooFinance または Google Finance のようなエクスペリエンスに必要なすべてを 1 行のコードで提供します。
- Ignite UI for Angular は、Angular 開発者向けの Angular 上に構築されており、サードパーティの依存関係はありません。Angular 用に 100% 最適化されています。
- 他社のパフォーマンスに対してテストします。当社は高速で大量のデータを処理できることを証明できます。大量のデータとリアルタイムのデータ ストリーミングをどのように処理するかをご自身で確認してください。
- 24/5 対応しております。インフラジスティックスは、常にオンラインでグローバル サポートを提供しています。北米、アジア太平洋、中東、およびヨーロッパでは、いつでもご利用いただけます。
- チャートの他に、Web Components には多くの UI コントロールもあります。アプリケーション構築のための完全な Web Components ソリューションを提供します!
API リファレンス
このトピックで言及されているすべてのチャート タイプは、次の API コンポーネントに実装されています: