Angular チャートとグラフの概要
Ignite UI for Angular チャートおよびグラフは、データ視覚化の広範なライブラリであり、Web アプリやモバイル アプリの魅力的でインタラクティブなチャートやダッシュボードを実現します。速度と美しさを重視して構築され、最新のすべてのブラウザで動作するように設計されており、完全なタッチとインタラクティブ機能により、レスポンシブ ビジュアルをあらゆるデバイスの次のアプリにすばやく簡単に組み込むことができます。
Ignite UI for Angular チャートは、カテゴリ シリーズ、ファイナンシャル シリーズ、極座標シリーズ、ラジアル シリーズ、範囲シリーズ、散布シリーズ、シェイプ シリーズ、地理空間シリーズなど、あらゆるタイプのデータを視覚化できる 65 種類以上のシリーズと組み合わせをサポートします。実行している比較のタイプ、または伝えようとしているデータ ストーリーのタイプに関係なく、次のいずれかの方法でデータを表すことができます:
- 時間毎の変化
- 比較
- 相関
- 配布
- 地理空間
- 概要 + 詳細
- 部分から全体
- ランキング
インフラジスティックスの Angular チャートを使用して、最もニーズの高い視覚化を強化してください。
60 以上のリアルタイム Angular チャート を使用して、何百万ものデータ ポイントを描画し、視覚化を構築します。これは、あらゆるアプリケーション シナリオに対応する最も広範なチャート ライブラリです。
Angular チャートとグラフのタイプ
Angular 製品には、単一のチャート表示からインタラクティブなダッシュボードまで、あらゆるシナリオに対応する 65 を超えるさまざまなチャートおよびグラフ タイプがあります。モバイル アプリやウェブ アプリ用に、円、棒、エリア、折れ線、ポイント、積層型、ドーナツ、散布、ゲージ、極座標、ツリーマップ、株価、ファイナンシャル、地理空間マップなどの Angular チャートを作成できます。Angular チャートと他のチャートの利点は、次のような機能が完全にサポートされていることです:
- 組み込まれたレスポンシブ Web デザイン
- マウス、キーボード、タッチを使用したインタラクティブなパンとズーム
- チャート アニメーションのフル コントロール
- チャート ドリルダウン イベント
- リアルタイム ストリーミングのサポート
- 大量 (数百万のデータ ポイント) のサポート
- トレンドラインおよびその他のデータ分析機能
Angular チャートは、軸、マーカー、シリーズ、凡例、および注釈レイヤーのモジュラー デザインで構築されており、あらゆるタイプのデータ ストーリーの描画を簡単にデザインできます。単一のデータ シリーズを使用して単純なチャートを作成するか、複合ビューに複数の軸があるデータの複数シリーズを使用してより複雑なデータ ストーリーを作成します。
カテゴリおよびファイナンシャル (財務) チャートとデータ チャートの比較
Angular カテゴリとファイナンシャル チャートは、ドメイン固有のチャートと呼ばれるものです。これは、ドメインがカテゴリまたは財務価格シリーズであることを前提とした Angular データ チャートのラッパーです。
これらの特定のドメイン チャートを選択すると、API が簡素化され、軸、系列、注釈などの属性を明示的に定義する必要なく、データに関する多くのインターフェイスを描画してチャート シナリオを自動的に構成できます。対照的に、データ チャートは非常に明示的であり、チャートのすべての重要な部分を定義する必要があります。
ドメイン チャートはその中核でデータ チャートを使用しています。したがって、同じパフォーマンスの最適化が両方に適用されます。違いは、開発者にとって非常に簡単に指定できるようにしようとしているのか、それとも可能な限り柔軟にしようとしているのかにあります。Angular データ チャートはより詳細であり、必要なすべてのチャート機能を利用できるようになり、たとえば、任意の数の系列、軸、または注釈を組み合わせて組み合わせることができます。カテゴリ チャートとファイナンシャル チャートでは、数値 X 軸を持つ散布系列を含む系列など、データ チャートの方が適している、簡単に実行できない状況が存在する可能性があります。
最初はどのチャートを選択すればよいのか判断するのが難しいかもしれません。シリーズのタイプと、提示したい追加機能の数を理解することが重要です。より軽量の基本カテゴリまたはファイナンシャル シリーズの場合は、ドメイン チャートのいずれかを使用することをお勧めします。より高度なシナリオの場合は、カテゴリ チャートの chartType プロパティでカバーされるもの以外のもの (積層シリーズや散布シリーズ、数値データや時間ベースのデータなど) を表示するなど、Angular データ チャートの使用をお勧めします。Angular ファイナンシャル チャートでは、縦棒、OHLC バー、ローソク足、折れ線シリーズ タイプのみがカバーされていることに注意してください。
Angular カテゴリとファイナンシャル チャートを使いやすくしていますが、将来はいつでもデータ チャートに切り替えることができます。
Angular 棒チャート
Angular 棒チャート (棒グラフ) は、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ幅と異なる長さの水平棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartVerticalCategoryModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxDataChartCoreModule,
IgxDataChartCategoryCoreModule,
IgxDataChartCategoryModule,
IgxDataChartInteractivityModule,
IgxDataChartVerticalCategoryModule,
IgxDataChartAnnotationModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxCategoryHighlightLayerComponent, IgxBarSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxDataChartComponent
@ViewChild("yAxis", { static: true } )
private yAxis: IgxCategoryYAxisComponent
@ViewChild("xAxis", { static: true } )
private xAxis: IgxNumericXAxisComponent
@ViewChild("categoryHighlightLayer", { static: true } )
private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
@ViewChild("barSeries1", { static: true } )
private barSeries1: IgxBarSeriesComponent
@ViewChild("barSeries2", { static: true } )
private barSeries2: IgxBarSeriesComponent
@ViewChild("tooltips", { static: true } )
private tooltips: IgxDataToolTipLayerComponent
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Highest Grossing Movie Franchises
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-data-chart
name="Chart"
#chart
[legend]="legend">
<igx-category-y-axis
name="yAxis"
#yAxis
label="franchise"
useEnhancedIntervalManagement="true"
enhancedIntervalPreferMoreCategoryLabels="true"
[dataSource]="highestGrossingMovies"
isInverted="true"
gap="0.5"
overlap="-0.1">
</igx-category-y-axis>
<igx-numeric-x-axis
name="xAxis"
#xAxis
title="Billions of U.S. Dollars">
</igx-numeric-x-axis>
<igx-category-highlight-layer
name="CategoryHighlightLayer"
#categoryHighlightLayer>
</igx-category-highlight-layer>
<igx-bar-series
name="BarSeries1"
#barSeries1
[xAxis]="xAxis"
[yAxis]="yAxis"
title="Total Revenue of Franchise"
valueMemberPath="totalRevenue"
[dataSource]="highestGrossingMovies"
showDefaultTooltip="true"
isTransitionInEnabled="true"
isHighlightingEnabled="true">
</igx-bar-series>
<igx-bar-series
name="BarSeries2"
#barSeries2
[xAxis]="xAxis"
[yAxis]="yAxis"
title="Highest Grossing Movie in Series"
valueMemberPath="highestGrossing"
[dataSource]="highestGrossingMovies"
showDefaultTooltip="true"
isTransitionInEnabled="true"
isHighlightingEnabled="true">
</igx-bar-series>
<igx-data-tool-tip-layer
name="Tooltips"
#tooltips>
</igx-data-tool-tip-layer>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Angular 円チャート
Angular 円チャート、または円グラフは、一般的な部分から全体へのチャート タイプです。部分から全体へのチャートは、データセットのカテゴリ (部分) が合計 (全体) 値になる方法を示します。カテゴリは、分析されている合計値に対する値のパーセンテージに基づいて、他のカテゴリに比例して表示されます。円チャートは、データ値を円形または円チャートのセクションとして描画します。各セクションまたは円スライスには、基本データ値に比例する円弧の長さがあります。円スライスで表される合計値は、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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxItemLegendModule, IgxPieChartModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxItemLegendModule,
IgxPieChartModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
import { IgxItemLegendComponent, IgxPieChartComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxItemLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxPieChartComponent
private _energyGlobalDemand: EnergyGlobalDemand = null;
public get energyGlobalDemand(): EnergyGlobalDemand {
if (this._energyGlobalDemand == null)
{
this._energyGlobalDemand = new EnergyGlobalDemand();
}
return this._energyGlobalDemand;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Global Electricity Demand by Energy Use
</div>
<div class="legend">
<igx-item-legend
name="legend"
#legend
orientation="Horizontal">
</igx-item-legend>
</div>
<div class="container fill">
<igx-pie-chart
name="chart"
#chart
legendLabelMemberPath="category"
labelMemberPath="summary"
labelsPosition="BestFit"
valueMemberPath="value"
radiusFactor="0.7"
[dataSource]="energyGlobalDemand"
[legend]="legend">
</igx-pie-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular 折れ線チャート
Angular 折れ線チャート、または折れ線グラフは、傾向を示し、比較分析を実行するために、一定期間にわたる 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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxCategoryChartModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxCategoryChartComponent
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-category-chart
name="chart"
#chart
chartType="Line"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
[dataSource]="countryRenewableElectricity"
includedProperties="year, europe, china, america"
[legend]="legend"
yAxisTitle="TWh"
yAxisTitleLeftMargin="10"
yAxisTitleRightMargin="5"
yAxisLabelLeftMargin="0"
computedPlotAreaMarginMode="Series">
</igx-category-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular ドーナツ チャート
Angular ドーナツ チャート、またはドーナツ グラフは、円チャートの変形であり、全体の一部を表す円内の変数の発生を比例的に示します。ドーナツ チャートには、円チャートの中央に円形の開口部があり、タイトルまたはカテゴリの説明を表示できます。ドーナツ チャートは、階層データを視覚化するための組み込みサポートを使用して、複数の同心円をサポートできます。ドーナツ チャートの詳細をご覧ください。
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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxItemLegendModule, IgxDoughnutChartModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxItemLegendModule,
IgxDoughnutChartModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
import { IgxItemLegendComponent, IgxDoughnutChartComponent, IgxRingSeriesComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxItemLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxDoughnutChartComponent
@ViewChild("series", { static: true } )
private series: IgxRingSeriesComponent
private _energyGlobalDemand: EnergyGlobalDemand = null;
public get energyGlobalDemand(): EnergyGlobalDemand {
if (this._energyGlobalDemand == null)
{
this._energyGlobalDemand = new EnergyGlobalDemand();
}
return this._energyGlobalDemand;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Global Electricity Demand by Energy Use
</div>
<div class="legend">
<igx-item-legend
name="legend"
#legend
orientation="Horizontal">
</igx-item-legend>
</div>
<div class="container fill">
<igx-doughnut-chart
name="chart"
#chart
allowSliceExplosion="true">
<igx-ring-series
name="series"
#series
labelMemberPath="summary"
labelsPosition="OutsideEnd"
labelExtent="30"
valueMemberPath="value"
legendLabelMemberPath="category"
outlines="white"
radiusFactor="0.6"
startAngle="30"
[dataSource]="energyGlobalDemand"
[legend]="legend">
</igx-ring-series>
</igx-doughnut-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular エリア チャート
Angular エリア チャートは、直線セグメントで接続されたポイントのコレクションを使用して描画され、線の下の領域が塗りつぶされます。値は 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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxCategoryChartModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxCategoryChartComponent
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-category-chart
name="chart"
#chart
chartType="Area"
[dataSource]="countryRenewableElectricity"
includedProperties="year, europe, china, america"
[legend]="legend"
yAxisTitle="TWh"
yAxisTitleLeftMargin="10"
yAxisTitleRightMargin="5"
yAxisLabelLeftMargin="0"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
computedPlotAreaMarginMode="Series">
</igx-category-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular スパークライン チャート
Angular スパークライン チャート、またはスパークライン グラフは、グリッド セル内や、データ ストーリーを伝えるために単語サイズの視覚化が必要な場所など、小規模なレイアウト内で描画することを目的としたカテゴリ チャートの一種です。他の Angular チャート タイプと同様に、スパークライン チャートには、チャート タイプ、マーカー、範囲、トレンドライン、不明な値のプロット、ツールチップなど、構成およびカスタマイズできるいくつかの視覚要素と対応する機能があります。スパークライン チャートは、折れ線チャート、エリア チャート、縦棒チャート、または Win/Loss チャートとして描画できます。スパーク チャートに相当するフルサイズのチャートの違いは、Y 軸 (左側のラベル) と X 軸 (下部のラベル) が表示されないことです。スパークライン チャートの詳細をご覧ください。
export class SharedData {
public static getSharedData() {
const data: any[] = [
{ Label: 4, Value: 4 },
{ Label: 5, Value: 5 },
{ Label: 2, Value: 2 },
{ Label: 7, Value: 7 },
{ Label: -1, Value: -1 },
{ Label: 3, Value: 3 },
{ Label: -2, Value: -2 },
{ Label: 5, Value: 5 },
{ Label: 2, Value: 2 },
{ Label: 6, Value: 6 }
];
return data;
}
public static getPaddedDataForMarkers() {
const data: any[] = [
{ Label: null, Value: null },
{ Label: 4, Value: 4 },
{ Label: 5, Value: 5 },
{ Label: 2, Value: 2 },
{ Label: 7, Value: 7 },
{ Label: -1, Value: -1 },
{ Label: 3, Value: 3 },
{ Label: -2, Value: -2 },
{ Label: 5, Value: 5 },
{ Label: 2, Value: 2 },
{ Label: 6, Value: 6 },
{ Label: null, Value: null }
];
return data;
}
public static getSharedDataWithNullValues() {
const data: any[] = [
{ Label: 4, Value: 4 },
{ Label: 5, Value: 5 },
{ Label: 2, Value: null },
{ Label: 7, Value: 7 },
{ Label: -1, Value: -1 },
{ Label: 3, Value: 3 },
{ Label: -2, Value: -2 },
{ Label: 5, Value: null },
{ Label: 2, Value: 2 },
{ Label: 6, Value: 6 }
];
return data;
}
}
tsimport { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxSparklineModule } from "igniteui-angular-charts";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxSparklineModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { Component, ViewChild } from "@angular/core";
import { IgxSparklineComponent } from "igniteui-angular-charts";
import { SparklineDisplayType } from "igniteui-angular-charts";
import { SharedData } from "./SharedData";
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent {
public data: any[];
@ViewChild("sparkline", { static: true })
public sparkline: IgxSparklineComponent;
constructor() {
this.data = SharedData.getSharedData();
}
public onDisplayTypeChanged(e: any) {
const selection = e.target.value.toString();
switch (selection) {
case "Area": {
this.sparkline.displayType = SparklineDisplayType.Area;
break;
}
case "Column": {
this.sparkline.displayType = SparklineDisplayType.Column;
break;
}
case "Line": {
this.sparkline.displayType = SparklineDisplayType.Line;
break;
}
case "WinLoss": {
this.sparkline.displayType = SparklineDisplayType.WinLoss;
break;
}
}
}
}
ts<div class="container vertical">
<div class="options horizontal">
<span class="options-item">Display Type:</span>
<select (change)="onDisplayTypeChanged($event)">
<option>Area</option>
<option>Column</option>
<option>Line</option>
<option>WinLoss</option>
</select>
</div>
<div class="container">
<igx-sparkline #sparkline height="100%" width="100%"
[dataSource]="data"
valueMemberPath="Value"
displayType="Area"></igx-sparkline>
</div>
</div >
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular バブル チャート
Angular バブル チャート (バブル グラフ) は、3 つの数値で構成されるデータを表示するために使用されます。値の 2 つは、デカルト (X、Y) 座標系を使用して交点としてプロットされ、3 番目の値は点の直径サイズとして描画されます。これにより、バブル チャートにその名前が付けられます。これは、プロットの X 座標と Y 座標に沿ったさまざまなサイズのバブルの視覚化です。Angular バブル チャートは、データ相関とサイズによって描画されたデータ値の違いとの関係を示すために使用されます。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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxNumberAbbreviatorModule,
IgxDataChartCoreModule,
IgxDataChartScatterModule,
IgxDataChartScatterCoreModule,
IgxDataChartInteractivityModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryStatsAfricaItem, CountryStatsAfrica } from './CountryStatsAfrica';
import { CountryStatsEuropeItem, CountryStatsEurope } from './CountryStatsEurope';
import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxBubbleSeriesComponent, IgxSizeScaleComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxDataChartComponent
@ViewChild("xAxis", { static: true } )
private xAxis: IgxNumericXAxisComponent
@ViewChild("yAxis", { static: true } )
private yAxis: IgxNumericYAxisComponent
@ViewChild("bubbleSeries1", { static: true } )
private bubbleSeries1: IgxBubbleSeriesComponent
private _sizeScale1: IgxSizeScaleComponent | null = null;
public get sizeScale1(): IgxSizeScaleComponent {
if (this._sizeScale1 == null)
{
var sizeScale1 = new IgxSizeScaleComponent();
sizeScale1.isLogarithmic = false;
sizeScale1.minimumValue = 10;
sizeScale1.maximumValue = 80;
this._sizeScale1 = sizeScale1;
}
return this._sizeScale1;
}
@ViewChild("bubbleSeries2", { static: true } )
private bubbleSeries2: IgxBubbleSeriesComponent
private _sizeScale2: IgxSizeScaleComponent | null = null;
public get sizeScale2(): IgxSizeScaleComponent {
if (this._sizeScale2 == null)
{
var sizeScale2 = new IgxSizeScaleComponent();
sizeScale2.isLogarithmic = false;
sizeScale2.minimumValue = 10;
sizeScale2.maximumValue = 80;
this._sizeScale2 = sizeScale2;
}
return this._sizeScale2;
}
@ViewChild("dataToolTipLayer", { static: true } )
private dataToolTipLayer: IgxDataToolTipLayerComponent
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;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Total Population of Selected Countries
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-data-chart
name="chart"
#chart
[legend]="legend">
<igx-numeric-x-axis
name="xAxis"
#xAxis
isLogarithmic="true"
abbreviateLargeNumbers="true"
title="Population">
</igx-numeric-x-axis>
<igx-numeric-y-axis
name="yAxis"
#yAxis
title="GDP per Capita"
maximumValue="1000000"
titleLeftMargin="10"
isLogarithmic="true"
abbreviateLargeNumbers="true">
</igx-numeric-y-axis>
<igx-bubble-series
name="bubbleSeries1"
#bubbleSeries1
title="African Countries"
[xAxis]="xAxis"
[yAxis]="yAxis"
xMemberPath="population"
yMemberPath="gDP"
radiusMemberPath="workedHours"
xMemberAsLegendLabel="Population"
yMemberAsLegendLabel="GDP"
radiusMemberAsLegendLabel="Work Hours"
[dataSource]="countryStatsAfrica"
markerType="Circle"
showDefaultTooltip="true"
[radiusScale]="sizeScale1">
</igx-bubble-series>
<igx-bubble-series
name="bubbleSeries2"
#bubbleSeries2
title="European Countries"
[xAxis]="xAxis"
[yAxis]="yAxis"
xMemberPath="population"
yMemberPath="gDP"
radiusMemberPath="workedHours"
xMemberAsLegendLabel="Population"
yMemberAsLegendLabel="GDP"
radiusMemberAsLegendLabel="Work Hours"
[dataSource]="countryStatsEurope"
markerType="Circle"
showDefaultTooltip="true"
[radiusScale]="sizeScale2">
</igx-bubble-series>
<igx-data-tool-tip-layer
name="dataToolTipLayer"
#dataToolTipLayer
valueRowMarginTop="1"
labelTextMarginTop="1"
titleTextMarginTop="1"
unitsTextMarginTop="1"
valueRowMarginBottom="1"
labelTextMarginBottom="1"
titleTextMarginBottom="1"
unitsTextMarginBottom="1"
unitsTextMarginRight="5"
valueTextMarginLeft="10"
labelTextMarginLeft="1"
layoutMode="Vertical">
</igx-data-tool-tip-layer>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular ファイナンシャル チャート/株価チャート
Angular ファイナンシャル/株価チャートは、時系列チャートで株価デーとファイナンシャル データを描画する複合視覚化です。日/週/月フィルター、チャート タイプの選択、ボリューム タイプの選択、インジケーターの選択、トレンドラインの選択などのインタラクティブな視覚要素がツールバーに含まれています。カスタマイズ用に設計された Angular 株価チャートは、データの視覚化と解釈を容易にするために、任意の方法でカスタマイズできます。ファイナンシャル チャートは、X 軸 (下のラベル) に沿って日時データを描画し、Open、High、Low、Close ボリュームなどのフィールドを表示します。時系列データを描画するチャートのタイプは、棒、ローソク、縦棒、または折れ線です。株価チャートの詳細をご覧ください。
Angular 縦棒チャート
Angular 縦棒チャート (縦棒グラフ) は、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ幅と異なる長さの垂直棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxCategoryChartModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxCategoryChartComponent
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Highest Grossing Movie Franchises
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-category-chart
name="chart"
#chart
chartType="Column"
[dataSource]="highestGrossingMovies"
[legend]="legend"
xAxisInterval="1"
yAxisTitle="Billions of U.S. Dollars"
yAxisTitleLeftMargin="10"
yAxisTitleRightMargin="5"
yAxisLabelLeftMargin="0"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
isCategoryHighlightingEnabled="true"
crosshairsDisplayMode="None">
</igx-category-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular 複合チャート
Angular 複合チャートまたはコンボ チャートは、同じプロット領域でさまざまなチャート タイプを組み合わせた視覚化です。スケールが大きく異なり、異なる単位で表される可能性のある 2 つのデータ シリーズを表示する場合に非常に役立ちます。最も一般的な例は、一方の軸にドル、もう一方の軸にパーセンテージです。複合チャートの詳細をご覧ください。
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxLegendModule, IgxCalloutLayerModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxNumberAbbreviatorModule, IgxDataChartCategoryCoreModule } from "igniteui-angular-charts";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartCategoryModule,
IgxDataChartCategoryCoreModule,
IgxLegendModule,
IgxCalloutLayerModule,
IgxDataChartInteractivityModule,
IgxDataChartAnnotationModule,
IgxNumberAbbreviatorModule,
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { Component, OnInit } from "@angular/core";
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
public data: any[];
constructor() { }
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, ",");
}
ngOnInit(): void {
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 + "%";
}
}
}
ts<div class="container vertical">
<div class="options vertical">
<span id="legendTitle">Facebook Statement of Income 2019-2020</span>
<div class="legend">
<igx-legend #legend orientation="horizontal"></igx-legend>
</div>
</div>
<div class="container">
<igx-data-chart height="100%" width="100%" [legend]="legend"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false" [dataSource]="data">
<igx-category-x-axis #xAxis label="Date" overlap="0" gap="0.1" useClusteringMode="true"></igx-category-x-axis>
<igx-numeric-y-axis #yAxis1 abbreviateLargeNumbers="true" title="In Millions of U.S. Dollars"
titleLeftMargin="5" titleRightMargin="0"
minimumValue="0" maximumValue="30000000">
</igx-numeric-y-axis>
<igx-numeric-y-axis #yAxis2 abbreviateLargeNumbers="true" title="Percentage" majorStrokeThickness="0"
minimumValue="0" maximumValue="160" labelLocation="OutsideRight"
labelHorizontalAlignment="Left">
</igx-numeric-y-axis>
<igx-column-series #revenueSeries [xAxis]="xAxis" [yAxis]="yAxis1"
valueMemberPath="Revenue"
title="Revenue" markerType="Hidden">
</igx-column-series>
<igx-column-series #expenseSeries [xAxis]="xAxis" [yAxis]="yAxis1"
valueMemberPath="Expenses"
title="Expenses" markerType="Hidden">
</igx-column-series>
<igx-spline-area-series #incomeSeries [xAxis]="xAxis" [yAxis]="yAxis2"
valueMemberPath="IncomePerRevenue"
title="Income / Revenue %" markerType="Circle">
</igx-spline-area-series>
<igx-callout-layer isAutoCalloutBehaviorEnabled="false" [targetSeries]="revenueSeries"
useValueForAutoCalloutLabels="false"
calloutLeaderBrush="Transparent" calloutTextColor="Black"
calloutBackground = "Transparent" calloutPositionPadding="-5"
xMemberPath="RevenueX" yMemberPath="Revenue" labelMemberPath="FormattedRevenue">
</igx-callout-layer>
<igx-callout-layer isAutoCalloutBehaviorEnabled="false" [targetSeries]="expenseSeries"
useValueForAutoCalloutLabels="false"
calloutLeaderBrush="Transparent" calloutTextColor="Black"
calloutBackground="Transparent" xMemberPath="ExpensesX" yMemberPath="Expenses"
labelMemberPath="FormattedExpenses" calloutPositionPadding="-5">
</igx-callout-layer>
<igx-callout-layer isAutoCalloutBehaviorEnabled="true" [targetSeries]="incomeSeries"
useValueForAutoCalloutLabels="true" calloutLeaderBrush="Transparent" calloutTextColor="Black"
calloutBackground = "LightGray" autoCalloutLabelPrecision="1">
</igx-callout-layer>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular 極座標チャート
Angular 極座標エリア チャートまたは極座標グラフは、極座標チャートのグループに属し、頂点または隅がデータ ポイントの極 (角度/半径) 座標に配置された塗りつぶされたポリゴンの形状を持っています。極座標エリア チャートは、散布図と同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に伸ばすのではなく、円の周りにラップします。他のシリーズ タイプと同じように、複数の極座標エリア チャートは同じデータ チャートにプロットでき、データセットの相違点を示すために互いにオーバーレイできます。極座標チャートの詳細をご覧ください。
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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartPolarModule, IgxDataChartPolarCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxDataChartCoreModule,
IgxDataChartPolarModule,
IgxDataChartPolarCoreModule,
IgxDataChartInteractivityModule,
IgxDataChartAnnotationModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData';
import { IgxLegendComponent, IgxDataChartComponent, IgxNumericAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxPolarLineSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxDataChartComponent
@ViewChild("angleAxis", { static: true } )
private angleAxis: IgxNumericAngleAxisComponent
@ViewChild("radiusAxis", { static: true } )
private radiusAxis: IgxNumericRadiusAxisComponent
@ViewChild("polarLineSeries1", { static: true } )
private polarLineSeries1: IgxPolarLineSeriesComponent
@ViewChild("polarLineSeries2", { static: true } )
private polarLineSeries2: IgxPolarLineSeriesComponent
@ViewChild("dataToolTipLayer", { static: true } )
private dataToolTipLayer: IgxDataToolTipLayerComponent
private _boatSailingData: BoatSailingData = null;
public get boatSailingData(): BoatSailingData {
if (this._boatSailingData == null)
{
this._boatSailingData = new BoatSailingData();
}
return this._boatSailingData;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Wind Speed vs Boat Speed
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-data-chart
name="chart"
#chart
[legend]="legend"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false">
<igx-numeric-angle-axis
name="angleAxis"
#angleAxis
startAngleOffset="-90"
interval="30"
minimumValue="0"
maximumValue="360">
</igx-numeric-angle-axis>
<igx-numeric-radius-axis
name="radiusAxis"
#radiusAxis
radiusExtentScale="0.9"
innerRadiusExtentScale="0.1"
interval="25"
minimumValue="0"
maximumValue="100">
</igx-numeric-radius-axis>
<igx-polar-line-series
name="PolarLineSeries1"
#polarLineSeries1
[dataSource]="boatSailingData"
[angleAxis]="angleAxis"
[radiusAxis]="radiusAxis"
angleMemberPath="direction"
radiusMemberPath="windSpeed"
showDefaultTooltip="false"
thickness="1"
title="Wind Speed"
markerType="Circle">
</igx-polar-line-series>
<igx-polar-line-series
name="PolarLineSeries2"
#polarLineSeries2
[dataSource]="boatSailingData"
[angleAxis]="angleAxis"
[radiusAxis]="radiusAxis"
angleMemberPath="direction"
radiusMemberPath="boatSpeed"
showDefaultTooltip="false"
thickness="1"
title="Boat Speed"
markerType="Circle">
</igx-polar-line-series>
<igx-data-tool-tip-layer
name="dataToolTipLayer"
#dataToolTipLayer>
</igx-data-tool-tip-layer>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular 散布図
Angular 散布図は、デカルト (X、Y) 座標系を使用してデータをプロットすることにより、2 つの値間の関係を示すために使用されます。各データ ポイントは、X 軸と Y 軸上のデータ値の交点として描画されます。散布図は、不均一な間隔またはデータのクラスターに注意を向けます。予測結果の収集データの標準偏差をハイライト表示し、科学データや統計データをプロットするためによく使用されます。Angular 散布図は、データがバインド前に時系列になっていない場合でも、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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxDataChartCoreModule,
IgxDataChartScatterModule,
IgxDataChartScatterCoreModule,
IgxDataChartInteractivityModule,
IgxDataChartAnnotationModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryDemographicEuropeItem, CountryDemographicEurope } from './CountryDemographicEurope';
import { CountryDemographicAfricanItem, CountryDemographicAfrican } from './CountryDemographicAfrican';
import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxScatterSeriesComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxDataChartComponent
@ViewChild("xAxis", { static: true } )
private xAxis: IgxNumericXAxisComponent
@ViewChild("yAxis", { static: true } )
private yAxis: IgxNumericYAxisComponent
@ViewChild("scatterSeries1", { static: true } )
private scatterSeries1: IgxScatterSeriesComponent
@ViewChild("scatterSeries2", { static: true } )
private scatterSeries2: IgxScatterSeriesComponent
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;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Population Statistics for Selected Continents
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-data-chart
name="chart"
#chart
[legend]="legend">
<igx-numeric-x-axis
name="xAxis"
#xAxis
title="Death Rate (per 1,000 people)"
minimumValue="5"
maximumValue="15">
</igx-numeric-x-axis>
<igx-numeric-y-axis
name="yAxis"
#yAxis
title="Birth Rate (per 1,000 people)"
minimumValue="0"
maximumValue="50"
interval="10">
</igx-numeric-y-axis>
<igx-scatter-series
name="scatterSeries1"
#scatterSeries1
title="Europe"
[xAxis]="xAxis"
[yAxis]="yAxis"
xMemberPath="deathRate"
yMemberPath="birthRate"
[dataSource]="countryDemographicEurope"
markerType="Circle"
showDefaultTooltip="true">
</igx-scatter-series>
<igx-scatter-series
name="scatterSeries2"
#scatterSeries2
title="Africa"
[xAxis]="xAxis"
[yAxis]="yAxis"
xMemberPath="deathRate"
yMemberPath="birthRate"
[dataSource]="countryDemographicAfrican"
markerType="Circle"
showDefaultTooltip="true">
</igx-scatter-series>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular シェープ チャート
Angular シェープ チャートは、形状の配列 (X/Y ポイントの配列) を取り、デカルト (x、y) 座標系のポリゴンまたはポリラインのコレクションとして描画するチャートのグループです。これらは、科学データの強調領域でよく使用されますが、ダイアグラム、青写真、さらには建物の間取り図のプロットにも使用できます。シェープ チャートの詳細をご覧ください。
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxDataChartCoreModule, IgxDataChartShapeModule, IgxDataChartShapeCoreModule, IgxLegendModule, IgxDataChartInteractivityModule, IgxDataChartScatterModule } from "igniteui-angular-charts";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartShapeModule,
IgxDataChartShapeCoreModule,
IgxLegendModule,
IgxDataChartInteractivityModule,
IgxDataChartScatterModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
import { IgxStyleShapeEventArgs } from "igniteui-angular-charts";
import { IgxScatterPolygonSeriesComponent } from "igniteui-angular-charts";
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent implements AfterViewInit {
@ViewChild('airplaneShapeSeries', { static: true })
public airplaneShapeSeries: IgxScatterPolygonSeriesComponent;
@ViewChild('airplaneSeatSeries', { static: true })
public airplaneSeatSeries: IgxScatterPolygonSeriesComponent;
@ViewChild('seatTooltip', { static: true })
public seatTooltip: TemplateRef<object>;
constructor() {
}
public ngAfterViewInit() {
fetch('https://static.infragistics.com/xplatform/json/airplane-shape.json')
.then((response) => response.json())
.then((data) => this.onLoadedJsonShape(data));
fetch('https://static.infragistics.com/xplatform/json/airplane-seats.json')
.then((response) => response.json())
.then((data) => this.onLoadedJsonSeats(data));
}
public onLoadedJsonShape(jsonData: any[]) {
// console.log('airplane-shape.json ' + jsonData.length);
this.airplaneShapeSeries.dataSource = jsonData;
}
public onLoadedJsonSeats(jsonData: any[]) {
// console.log('airplane-seats.json ' + jsonData.length);
this.airplaneSeatSeries.dataSource = jsonData;
this.airplaneSeatSeries.showDefaultTooltip = true;
this.airplaneSeatSeries.tooltipTemplate = this.seatTooltip;
}
public onStylingShape(ev: { sender: any, args: IgxStyleShapeEventArgs }) {
ev.args.shapeOpacity = 1.0;
ev.args.shapeStrokeThickness = 0.5;
ev.args.shapeStroke = 'Black';
const itemRecord = ev.args.item as any;
if (itemRecord.class === 'First') {
ev.args.shapeFill = 'DodgerBlue';
}
if (itemRecord.class === 'Business') {
ev.args.shapeFill = 'LimeGreen';
}
if (itemRecord.class === 'Premium') {
ev.args.shapeFill = 'Orange';
}
if (itemRecord.class === 'Economy') {
ev.args.shapeFill = 'Red';
}
if (itemRecord.status === 'Sold') {
ev.args.shapeFill = 'Gray';
}
}
}
ts<div class="container vertical">
<div class="options vertical">
<label id="legendTitle">Airplane Seating Chart (Polygons)</label>
</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>
<div class="container">
<igx-data-chart isHorizontalZoomEnabled="true" isVerticalZoomEnabled="true"
width="100%"
height="100%">
<igx-numeric-x-axis #xAxis name="xAxis" minimumValue="-1000" maximumValue="1000" interval="200"></igx-numeric-x-axis>
<igx-numeric-y-axis #yAxis name="yAxis" minimumValue="-600" maximumValue="600" interval="200"></igx-numeric-y-axis>
<igx-scatter-polygon-series name="airplaneShapeSeries" #airplaneShapeSeries
[xAxis]="xAxis"
[yAxis]="yAxis" shapeMemberPath="points" thickness="0.5"
title="Airplane Shape" brush="LightGray" outline="Black">
</igx-scatter-polygon-series>
<igx-scatter-polygon-series name="airplaneSeatSeries" #airplaneSeatSeries
[xAxis]="xAxis"
[yAxis]="yAxis" shapeMemberPath="points" thickness="0.5"
title="Airplane Seats"
(styleShape)="onStylingShape($event)">
</igx-scatter-polygon-series>
</igx-data-chart>
</div>
<div class="options horizontal">
<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>
</div>
<ng-template let-series="series" let-item="item" #seatTooltip>
<div>
<span>{{item.class}} Class</span>
<br />
<span>Seat: {{item.seat}}</span>
<br />
<span>Price: ${{item.price}}</span>
<br />
<span>Status: {{item.status}}</span>
</div>
</ng-template>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular スプライン チャート
Angular スプライン チャート、またはスプライン グラフは、傾向を示し、比較分析を実行するために、一定期間にわたる 1 つ以上の数量の滑らかな線セグメントで接続されたポイントによって表される連続データ値を示す一種のカテゴリ折れ線チャートです。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。Angular スプライン チャートは Angular 折れ線チャートと同じですが、唯一の違いは、折れ線チャートが直線で接続された点であるのに対し、スプライン チャートの点は滑らかな曲線で接続されていることです。スプライン チャートの詳細をご覧ください。
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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLegendModule, IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxCategoryChartModule,
IgxDataChartInteractivityModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxCategoryChartComponent
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-category-chart
name="chart"
#chart
chartType="Spline"
[dataSource]="countryRenewableElectricity"
[legend]="legend"
yAxisTitle="TWh"
isTransitionInEnabled="true"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
computedPlotAreaMarginMode="Series">
</igx-category-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular ステップ チャート
Angular ステップ折れ線チャート、またはステップ折れ線グラフは、ステップ状の進捗を形成する連続した垂直線と水平線で接続されたデータ ポイントのコレクションを描画するカテゴリ チャートです。値は Y 軸 (左側のラベル) に表示され、カテゴリは X 軸 (下部のラベル) に表示されます。Angular ステップ折れ線チャートは、一定期間の変化量を強調するか、複数の項目を比較します。Angular ステップ折れ線チャートは、ステップ線の下の領域が塗りつぶされていないことを除いて、すべての点で Angular ステップエリア チャートと同じです。ステップ折れ線チャートの詳細をご覧ください。
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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLegendModule, IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxCategoryChartModule,
IgxDataChartInteractivityModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxCategoryChartComponent
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-category-chart
name="chart"
#chart
[legend]="legend"
chartType="StepLine"
[dataSource]="countryRenewableElectricity"
includedProperties="year, europe, china, america"
isCategoryHighlightingEnabled="true"
isSeriesHighlightingEnabled="true"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
xAxisInterval="1"
yAxisTitle="TWh"
crosshairsSnapToData="true">
</igx-category-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular ツリーマップ
Ignite UI for Angular ツリーマップは、ネストされた一連のノードとして階層 (ツリー構造) データを表示します。ツリーの各ブランチにはツリーマップ ノードが提供されて、サブマップを表す小さなノードでタイル化されます。各ノードの長方形には、データ上の指定されたディメンションに比例した領域があります。多くの場合、ノードは色分けされて、データの個別のディメンションを示します。ツリーマップの詳細をご覧ください。
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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxTreemapModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxTreemapModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountyHierarchicalDataItem, CountyHierarchicalData } from './CountyHierarchicalData';
import { IgxTreemapComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("treemap", { static: true } )
private treemap: IgxTreemapComponent
private _countyHierarchicalData: CountyHierarchicalData = null;
public get countyHierarchicalData(): CountyHierarchicalData {
if (this._countyHierarchicalData == null)
{
this._countyHierarchicalData = new CountyHierarchicalData();
}
return this._countyHierarchicalData;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Comparing Population of Countries
</div>
<div class="container fill">
<igx-treemap
name="treemap"
#treemap
[dataSource]="countyHierarchicalData"
parentIdMemberPath="parent"
idMemberPath="name"
labelMemberPath="name"
valueMemberPath="population"
fillScaleMode="Value"
fillScaleMinimumValue="0"
fillScaleMaximumValue="1500000000"
fillBrushes="rgba(78, 98, 207, 1) rgba(138, 88, 214, 1)"
isFillScaleLogarithmic="true"
rootTitle="Countries"
headerDisplayMode="Overlay"
parentNodeBottomPadding="0"
parentNodeLeftPadding="0"
parentNodeRightPadding="0"
parentNodeTopPadding="0"
outline="black"
strokeThickness="1">
</igx-treemap>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular チャート主な機能
組み込みの時間軸を使用して、データが時間の経過とともにどのように変化するかを示します。チャートを操作すると、時間スケールとラベル書式が動的に変更されます。YahooFinance や GoogleFinance など、ファイナンシャル チャートに期待されるすべての機能を備えた完全なファイナンシャル チャートが含まれています。
動的なチャート
新しい複合チャートを作成し、単一のチャートで複数のシリーズを重ね合わせて、データを視覚化します。チャートでは、複数のチャート列を表示および重ねて、積層型縦棒を作成できます。
カスタム ツールチップ
新しい複合ビューを作成し、単一のチャートで複数のシリーズを重ね合わせて、データを視覚化します。チャートでは、画像やデータ バインディングを使用してカスタム ツールチップを作成したり、複数のシリーズのツールチップを 1 つのツールチップに組み合わせたりすることもできます。
リアルタイムの高パフォーマンスなチャート
ライブのストリーミング データを使用して、ミリ秒レベルの更新で数千のデータ ポイントをリアルタイムで表示します。タッチ デバイスでチャートを操作しているときでも、ラグ、画面のちらつき、表示の遅れは発生しません。デモについては、高頻度のチャートトピックを参照してください。
大量のデータ処理
チャート パフォーマンスを最適化して、エンドユーザーがチャートのコンテンツをズームイン/ズームアウトまたはナビゲートしようとしたときにスムーズなパフォーマンスを提供し続けながら、数百万のデータ ポイントを描画します。デモについては、大量データのチャートトピックを参照してください。
モジュラー デザイン
Angularチャート は、モジュール性のために設計されています。必要な機能のみが展開一部であるため、描画されたページで可能な限り最小のフットプリントを取得します。
スマート データ バインディング
チャート タイプの選択はお任せください。当社のスマート データ アダプタは、データに最適なチャート タイプを自動的に選択します。データ ソースを設定するだけです。
トレンドライン
Angular チャートは、線形 (x)、二次 (x2)、三次 (x3)、四次 (x4)、五次 (x5)、対数 (logn x)、指数 (ex)、べき乗 (axk + o(xk)) など、必要になるすべてのトレンドラインをサポートします。
インタラクティブなパニングとズーム
シングル タッチまたはマルチタッチ、キーボード、ズーム バー、マウス ホイールを使用し、マウスで任意の長方形領域をドラッグ選択してズームインし、データ ポイントのクローズアップ、データ履歴のスクロール、またはデータ領域のパンを行います。
マーカー、ツールチップ、およびテンプレート
10 個のマーカー タイプのいずれかを使用するか、独自のマーカー-テンプレートを作成して、データをハイライト表示するか、シンプルなツールチップまたはカスタム ツールチップを使用した多軸および複数系列のチャートで、データにコンテキストと意味を追加します。
その他の詳細
他の Angular チャートを検討している場合は、次のことを考慮しましょう:
- 65 を超える Angular チャート タイプと複合チャートが含まれており、スマート データ アダプタを使用した類を見ない最も簡単な構成が可能です。
- チャートは、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 対応しております。インフラジスティックスは、常にオンラインでグローバル サポートを提供しています。北米、アジア太平洋、中東、およびヨーロッパでは、いつでもご利用いただけます。
- チャートの他に、Angular には多くの UI コントロールもあります。アプリケーション構築のための完全な Angular ソリューションを提供します!
- Ignite UI for Angular は、Angular 開発者向けの Angular 上に構築されており、サードパーティの依存関係はありません。Angular 用に 100% 最適化されています。
- Sketch デザインからピクセル パーフェクトな Angular コントロールを生成する、UX デザイナー、ビジュアル デザイナー、開発者向けのコード プラットフォームに、世界初で唯一のエンドツーエンドの包括的なデザインを提供します。Indigo.Design を使用すると、Indigo Design System から Sketch で作成するすべてのものが Ignite UI for Angular コントロールと一致します。
API リファレンス
このトピックで言及されているすべてのチャート タイプは、次の API コンポーネントに実装されています:
GitHub