Angular 散布図
Ignite UI for Angular 散布図は、異なる一連のデータ内の項目間の関係を示したり、数値の x 座標と y 座標を使用してデータ項目をプロットしたりするチャートのグループに属しています。このチャートは、データの不均等な散らばりやデータの塊に注意が向けられます。科学データのプロットによく用いられ、予測結果からの収集データの偏差をハイライト表示できます。また、データを時シリーズに (データが時系列でない場合であっても) 構成するためにも使用できます。
60 以上のリアルタイム Angular チャート を使用して、何百万ものデータ ポイントを描画し、視覚化を構築します。これは、あらゆるアプリケーション シナリオに対応する最も広範なチャート ライブラリです。
Angular 散布マーカー チャート
Angular 散布図は、マーカーのコレクションとして描画されます。各マーカーには、デカルト座標系での位置を決定する 1 対の数値 X/Y 値があります。IgxDataChartComponent
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgxScatterSeriesComponent
にバインドします:
// NOTE this file contains multiple data sources:
// Data Source #1
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));
}
}
}
// Data Source #2
export 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
このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Angular 散布折れ線チャート
Angular は、直線で接続されたマーカーのコレクションとして描画され、各マーカーにはデカルト座標系での位置を決定する X/Y の数値のペアがあります。IgxDataChartComponent
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgxScatterLineSeriesComponent
にバインドします:
// NOTE this file contains multiple data sources:
// Data Source #1
export class HealthDataForFranceItem {
public constructor(init: Partial<HealthDataForFranceItem>) {
Object.assign(this, init);
}
public year: number;
public healthExpense: number;
public lifeExpectancy: number;
public name: string;
}
export class HealthDataForFrance extends Array<HealthDataForFranceItem> {
public constructor(items: Array<HealthDataForFranceItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HealthDataForFranceItem(
{
year: 1985,
healthExpense: 2025.98,
lifeExpectancy: 75.92,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1986,
healthExpense: 2075.21,
lifeExpectancy: 76.24,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1987,
healthExpense: 2140.51,
lifeExpectancy: 76.08,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1988,
healthExpense: 2119.07,
lifeExpectancy: 76.22,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1989,
healthExpense: 2112.67,
lifeExpectancy: 76.5,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1990,
healthExpense: 2519.81,
lifeExpectancy: 76.54,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1991,
healthExpense: 2660.33,
lifeExpectancy: 76.98,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1992,
healthExpense: 2737.93,
lifeExpectancy: 77.18,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1993,
healthExpense: 2761.36,
lifeExpectancy: 77.15,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1994,
healthExpense: 2800.17,
lifeExpectancy: 77.69,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1995,
healthExpense: 2863.39,
lifeExpectancy: 77.74,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1996,
healthExpense: 3034.79,
lifeExpectancy: 78.15,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1997,
healthExpense: 3426.25,
lifeExpectancy: 78.14,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1998,
healthExpense: 3639.47,
lifeExpectancy: 78.33,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1999,
healthExpense: 3826.04,
lifeExpectancy: 78.28,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2000,
healthExpense: 4003.97,
lifeExpectancy: 78.63,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2001,
healthExpense: 4139.3,
lifeExpectancy: 78.79,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2002,
healthExpense: 4504.06,
lifeExpectancy: 78.99,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2003,
healthExpense: 4633.59,
lifeExpectancy: 79.39,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2004,
healthExpense: 4734.15,
lifeExpectancy: 79.84,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2005,
healthExpense: 4822.75,
lifeExpectancy: 80.04,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2006,
healthExpense: 4846.36,
lifeExpectancy: 80.34,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2007,
healthExpense: 4965.14,
lifeExpectancy: 80.4,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2008,
healthExpense: 5149.6,
lifeExpectancy: 80.59,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2009,
healthExpense: 5254.08,
lifeExpectancy: 80.8,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2010,
healthExpense: 5240.42,
lifeExpectancy: 81,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2011,
healthExpense: 5387.98,
lifeExpectancy: 81.3,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2012,
healthExpense: 5499.09,
lifeExpectancy: 81.45,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2013,
healthExpense: 5557.2,
lifeExpectancy: 81.75,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2014,
healthExpense: 5730.16,
lifeExpectancy: 82.1,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2015,
healthExpense: 5926.44,
lifeExpectancy: 82.3,
name: `Norway`
}),
];
super(...newItems.slice(0));
}
}
}
// Data Source #2
export class HealthDataForGermanyItem {
public constructor(init: Partial<HealthDataForGermanyItem>) {
Object.assign(this, init);
}
public year: number;
public healthExpense: number;
public lifeExpectancy: number;
public name: string;
}
export class HealthDataForGermany extends Array<HealthDataForGermanyItem> {
public constructor(items: Array<HealthDataForGermanyItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HealthDataForGermanyItem(
{
year: 1985,
healthExpense: 2579.64,
lifeExpectancy: 74.05,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1986,
healthExpense: 2603.94,
lifeExpectancy: 74.31,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1987,
healthExpense: 2668.49,
lifeExpectancy: 74.56,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1988,
healthExpense: 2812.94,
lifeExpectancy: 74.79,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1989,
healthExpense: 2689.51,
lifeExpectancy: 75.01,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1990,
healthExpense: 2774.68,
lifeExpectancy: 75.23,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1992,
healthExpense: 2909.85,
lifeExpectancy: 75.82,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1993,
healthExpense: 2853.09,
lifeExpectancy: 75.87,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1994,
healthExpense: 2989.64,
lifeExpectancy: 76.27,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1995,
healthExpense: 3122.13,
lifeExpectancy: 76.42,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1996,
healthExpense: 3241.89,
lifeExpectancy: 76.67,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1997,
healthExpense: 3257.29,
lifeExpectancy: 77.07,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1998,
healthExpense: 3327.26,
lifeExpectancy: 77.48,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1999,
healthExpense: 3414.57,
lifeExpectancy: 77.73,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2000,
healthExpense: 3536.35,
lifeExpectancy: 77.93,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2001,
healthExpense: 3603.77,
lifeExpectancy: 78.33,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2002,
healthExpense: 3687.38,
lifeExpectancy: 78.23,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2003,
healthExpense: 3745.14,
lifeExpectancy: 78.38,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2004,
healthExpense: 3704.96,
lifeExpectancy: 78.68,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2005,
healthExpense: 3787.13,
lifeExpectancy: 78.93,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2006,
healthExpense: 3875.14,
lifeExpectancy: 79.13,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2007,
healthExpense: 3950.17,
lifeExpectancy: 79.53,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2008,
healthExpense: 4079.09,
lifeExpectancy: 79.74,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2009,
healthExpense: 4232.58,
lifeExpectancy: 79.84,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2010,
healthExpense: 4358.61,
lifeExpectancy: 79.99,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2011,
healthExpense: 4396.44,
lifeExpectancy: 80.44,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2012,
healthExpense: 4516.99,
lifeExpectancy: 80.54,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2013,
healthExpense: 4589.37,
lifeExpectancy: 80.49,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2014,
healthExpense: 4684.49,
lifeExpectancy: 81.09,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2015,
healthExpense: 4772.33,
lifeExpectancy: 80.64,
name: `Germany`
}),
];
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, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxNumberAbbreviatorModule,
IgxDataChartCoreModule,
IgxDataChartScatterModule,
IgxDataChartScatterCoreModule,
IgxDataChartInteractivityModule,
IgxDataChartAnnotationModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { HealthDataForGermanyItem, HealthDataForGermany } from './HealthDataForGermany';
import { HealthDataForFranceItem, HealthDataForFrance } from './HealthDataForFrance';
import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxScatterLineSeriesComponent, 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("scatterLineSeries1", { static: true } )
private scatterLineSeries1: IgxScatterLineSeriesComponent
@ViewChild("scatterLineSeries2", { static: true } )
private scatterLineSeries2: IgxScatterLineSeriesComponent
@ViewChild("dataToolTipLayer", { static: true } )
private dataToolTipLayer: IgxDataToolTipLayerComponent
private _healthDataForGermany: HealthDataForGermany = null;
public get healthDataForGermany(): HealthDataForGermany {
if (this._healthDataForGermany == null)
{
this._healthDataForGermany = new HealthDataForGermany();
}
return this._healthDataForGermany;
}
private _healthDataForFrance: HealthDataForFrance = null;
public get healthDataForFrance(): HealthDataForFrance {
if (this._healthDataForFrance == null)
{
this._healthDataForFrance = new HealthDataForFrance();
}
return this._healthDataForFrance;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Life Expectancy vs Health Expenditure
</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="Life Expectancy (in years)"
minimumValue="72"
maximumValue="84"
interval="2">
</igx-numeric-x-axis>
<igx-numeric-y-axis
name="yAxis"
#yAxis
title="Health Expenditure per Capita"
abbreviateLargeNumbers="true"
minimumValue="1000"
maximumValue="6000"
interval="1000">
</igx-numeric-y-axis>
<igx-scatter-line-series
name="ScatterLineSeries1"
#scatterLineSeries1
title="Germany"
[xAxis]="xAxis"
[yAxis]="yAxis"
xMemberPath="lifeExpectancy"
yMemberPath="healthExpense"
[dataSource]="healthDataForGermany"
markerType="Circle"
showDefaultTooltip="true">
</igx-scatter-line-series>
<igx-scatter-line-series
name="ScatterLineSeries2"
#scatterLineSeries2
title="France"
[xAxis]="xAxis"
[yAxis]="yAxis"
xMemberPath="lifeExpectancy"
yMemberPath="healthExpense"
[dataSource]="healthDataForFrance"
markerType="Circle"
showDefaultTooltip="true">
</igx-scatter-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 の数値のペアがあります。IgxDataChartComponent
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgxScatterSplineSeriesComponent
にバインドします:
// NOTE this file contains multiple data sources:
// Data Source #1
export class HealthDataForFranceItem {
public constructor(init: Partial<HealthDataForFranceItem>) {
Object.assign(this, init);
}
public year: number;
public healthExpense: number;
public lifeExpectancy: number;
public name: string;
}
export class HealthDataForFrance extends Array<HealthDataForFranceItem> {
public constructor(items: Array<HealthDataForFranceItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HealthDataForFranceItem(
{
year: 1985,
healthExpense: 2025.98,
lifeExpectancy: 75.92,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1986,
healthExpense: 2075.21,
lifeExpectancy: 76.24,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1987,
healthExpense: 2140.51,
lifeExpectancy: 76.08,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1988,
healthExpense: 2119.07,
lifeExpectancy: 76.22,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1989,
healthExpense: 2112.67,
lifeExpectancy: 76.5,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1990,
healthExpense: 2519.81,
lifeExpectancy: 76.54,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1991,
healthExpense: 2660.33,
lifeExpectancy: 76.98,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1992,
healthExpense: 2737.93,
lifeExpectancy: 77.18,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1993,
healthExpense: 2761.36,
lifeExpectancy: 77.15,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1994,
healthExpense: 2800.17,
lifeExpectancy: 77.69,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1995,
healthExpense: 2863.39,
lifeExpectancy: 77.74,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1996,
healthExpense: 3034.79,
lifeExpectancy: 78.15,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1997,
healthExpense: 3426.25,
lifeExpectancy: 78.14,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1998,
healthExpense: 3639.47,
lifeExpectancy: 78.33,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1999,
healthExpense: 3826.04,
lifeExpectancy: 78.28,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2000,
healthExpense: 4003.97,
lifeExpectancy: 78.63,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2001,
healthExpense: 4139.3,
lifeExpectancy: 78.79,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2002,
healthExpense: 4504.06,
lifeExpectancy: 78.99,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2003,
healthExpense: 4633.59,
lifeExpectancy: 79.39,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2004,
healthExpense: 4734.15,
lifeExpectancy: 79.84,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2005,
healthExpense: 4822.75,
lifeExpectancy: 80.04,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2006,
healthExpense: 4846.36,
lifeExpectancy: 80.34,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2007,
healthExpense: 4965.14,
lifeExpectancy: 80.4,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2008,
healthExpense: 5149.6,
lifeExpectancy: 80.59,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2009,
healthExpense: 5254.08,
lifeExpectancy: 80.8,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2010,
healthExpense: 5240.42,
lifeExpectancy: 81,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2011,
healthExpense: 5387.98,
lifeExpectancy: 81.3,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2012,
healthExpense: 5499.09,
lifeExpectancy: 81.45,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2013,
healthExpense: 5557.2,
lifeExpectancy: 81.75,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2014,
healthExpense: 5730.16,
lifeExpectancy: 82.1,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2015,
healthExpense: 5926.44,
lifeExpectancy: 82.3,
name: `Norway`
}),
];
super(...newItems.slice(0));
}
}
}
// Data Source #2
export class HealthDataForGermanyItem {
public constructor(init: Partial<HealthDataForGermanyItem>) {
Object.assign(this, init);
}
public year: number;
public healthExpense: number;
public lifeExpectancy: number;
public name: string;
}
export class HealthDataForGermany extends Array<HealthDataForGermanyItem> {
public constructor(items: Array<HealthDataForGermanyItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HealthDataForGermanyItem(
{
year: 1985,
healthExpense: 2579.64,
lifeExpectancy: 74.05,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1986,
healthExpense: 2603.94,
lifeExpectancy: 74.31,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1987,
healthExpense: 2668.49,
lifeExpectancy: 74.56,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1988,
healthExpense: 2812.94,
lifeExpectancy: 74.79,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1989,
healthExpense: 2689.51,
lifeExpectancy: 75.01,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1990,
healthExpense: 2774.68,
lifeExpectancy: 75.23,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1992,
healthExpense: 2909.85,
lifeExpectancy: 75.82,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1993,
healthExpense: 2853.09,
lifeExpectancy: 75.87,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1994,
healthExpense: 2989.64,
lifeExpectancy: 76.27,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1995,
healthExpense: 3122.13,
lifeExpectancy: 76.42,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1996,
healthExpense: 3241.89,
lifeExpectancy: 76.67,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1997,
healthExpense: 3257.29,
lifeExpectancy: 77.07,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1998,
healthExpense: 3327.26,
lifeExpectancy: 77.48,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1999,
healthExpense: 3414.57,
lifeExpectancy: 77.73,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2000,
healthExpense: 3536.35,
lifeExpectancy: 77.93,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2001,
healthExpense: 3603.77,
lifeExpectancy: 78.33,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2002,
healthExpense: 3687.38,
lifeExpectancy: 78.23,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2003,
healthExpense: 3745.14,
lifeExpectancy: 78.38,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2004,
healthExpense: 3704.96,
lifeExpectancy: 78.68,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2005,
healthExpense: 3787.13,
lifeExpectancy: 78.93,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2006,
healthExpense: 3875.14,
lifeExpectancy: 79.13,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2007,
healthExpense: 3950.17,
lifeExpectancy: 79.53,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2008,
healthExpense: 4079.09,
lifeExpectancy: 79.74,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2009,
healthExpense: 4232.58,
lifeExpectancy: 79.84,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2010,
healthExpense: 4358.61,
lifeExpectancy: 79.99,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2011,
healthExpense: 4396.44,
lifeExpectancy: 80.44,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2012,
healthExpense: 4516.99,
lifeExpectancy: 80.54,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2013,
healthExpense: 4589.37,
lifeExpectancy: 80.49,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2014,
healthExpense: 4684.49,
lifeExpectancy: 81.09,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2015,
healthExpense: 4772.33,
lifeExpectancy: 80.64,
name: `Germany`
}),
];
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, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxNumberAbbreviatorModule,
IgxDataChartCoreModule,
IgxDataChartScatterModule,
IgxDataChartScatterCoreModule,
IgxDataChartInteractivityModule,
IgxDataChartAnnotationModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { HealthDataForGermanyItem, HealthDataForGermany } from './HealthDataForGermany';
import { HealthDataForFranceItem, HealthDataForFrance } from './HealthDataForFrance';
import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxScatterSplineSeriesComponent, 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("scatterSplineSeries1", { static: true } )
private scatterSplineSeries1: IgxScatterSplineSeriesComponent
@ViewChild("scatterSplineSeries2", { static: true } )
private scatterSplineSeries2: IgxScatterSplineSeriesComponent
@ViewChild("dataToolTipLayer", { static: true } )
private dataToolTipLayer: IgxDataToolTipLayerComponent
private _healthDataForGermany: HealthDataForGermany = null;
public get healthDataForGermany(): HealthDataForGermany {
if (this._healthDataForGermany == null)
{
this._healthDataForGermany = new HealthDataForGermany();
}
return this._healthDataForGermany;
}
private _healthDataForFrance: HealthDataForFrance = null;
public get healthDataForFrance(): HealthDataForFrance {
if (this._healthDataForFrance == null)
{
this._healthDataForFrance = new HealthDataForFrance();
}
return this._healthDataForFrance;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Life Expectancy vs Health Expenditure
</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="Life Expectancy (in years)"
minimumValue="72"
maximumValue="84"
interval="2">
</igx-numeric-x-axis>
<igx-numeric-y-axis
name="yAxis"
#yAxis
title="Health Expenditure per Capita"
abbreviateLargeNumbers="true"
minimumValue="1000"
maximumValue="6000"
interval="1000">
</igx-numeric-y-axis>
<igx-scatter-spline-series
name="scatterSplineSeries1"
#scatterSplineSeries1
title="Germany"
[xAxis]="xAxis"
[yAxis]="yAxis"
xMemberPath="lifeExpectancy"
yMemberPath="healthExpense"
[dataSource]="healthDataForGermany"
markerType="Circle"
showDefaultTooltip="true">
</igx-scatter-spline-series>
<igx-scatter-spline-series
name="scatterSplineSeries2"
#scatterSplineSeries2
title="France"
[xAxis]="xAxis"
[yAxis]="yAxis"
xMemberPath="lifeExpectancy"
yMemberPath="healthExpense"
[dataSource]="healthDataForFrance"
markerType="Circle"
showDefaultTooltip="true">
</igx-scatter-spline-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 散布高密度 (HD) チャートを使用して、わずかな読み込み時間で数千から数百万のデータ ポイントに及ぶ散布データをバインドして表示します。このチャート タイプは非常に多くのポイント用に設計されているため、フル サイズのマーカーではなく小さな点として視覚化され、データ ポイントのクラスターを表すより高い色密度を使用してデータが最も多い領域を表示します。IgxDataChartComponent
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgxHighDensityScatterSeriesComponent
にバインドします:
import { Injectable } from "@angular/core";
@Injectable()
export class SampleDensityData {
public static create(): any[] {
const amount = 25000;
const data: any[] = [];
// generating a lot of data points that spread from specified X/Y center
this.generate(data, amount / 2, 0, 0, 75000, 20000);
this.generate(data, amount / 4, 0, 0, 100000, 25000);
this.generate(data, amount / 8, 0, 0, 150000, 30000);
this.generate(data, amount / 8, 0, 0, 200000, 75000);
return data;
}
public static generate(data: any[], count: number, centerX: number, centerY: number, spreadX: number, spreadY: number): any[] {
for (let i = 0; i <= count; i++) {
let rangeX = Math.random() * spreadX;
let rangeY = Math.random() * spreadY;
const flip = 1;
const prop = Math.random();
if (prop < .25) {
rangeX *= flip;
rangeY *= flip;
} else if (prop >= .25 && prop < .5) {
rangeX *= -flip;
rangeY *= flip;
} else if (prop >= .5 && prop < .75) {
rangeX *= flip;
rangeY *= -flip;
} else {
rangeX *= -flip;
rangeY *= -flip;
}
const dispersionX = Math.random() + 0.12;
const dispersionY = Math.random() + 0.12;
const x = centerX + (rangeX * dispersionX);
const y = centerY + (rangeY * dispersionY);
data.push({ X: x, Y: y });
}
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 { IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxLegendModule, IgxDataChartInteractivityModule } from "igniteui-angular-charts";
import { SampleDensityData } from "./SampleDensityData";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartScatterModule,
IgxDataChartScatterCoreModule,
IgxLegendModule,
IgxDataChartInteractivityModule
],
providers: [SampleDensityData],
schemas: []
})
export class AppModule {}
tsimport { Component, OnInit, ViewChild } from "@angular/core";
import { IgxDataChartComponent } from "igniteui-angular-charts";
import { IgxNumericXAxisComponent } from "igniteui-angular-charts";
import { IgxNumericYAxisComponent } from "igniteui-angular-charts";
import { IgxHighDensityScatterSeriesComponent } from "igniteui-angular-charts";
import { SampleDensityData } from "./SampleDensityData";
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
@ViewChild("chart", { static: true })
public chart: IgxDataChartComponent;
@ViewChild("xAxis", { static: true })
public xAxis: IgxNumericXAxisComponent;
@ViewChild("yAxis", { static: true })
public yAxis: IgxNumericYAxisComponent;
public data: any[];
constructor() { }
ngOnInit() {
this.data = SampleDensityData.create();
const i = 0;
// const scatterSeries = new IgxHighDensityScatterSeriesComponent();
// scatterSeries.title = "Distribution";
// scatterSeries.dataSource = SampleDensityData.create();
// scatterSeries.showDefaultTooltip = true;
// scatterSeries.xMemberPath = "x";
// scatterSeries.yMemberPath = "y";
// scatterSeries.mouseOverEnabled = true;
// scatterSeries.progressiveLoad = true;
// scatterSeries.heatMinimumColor = "Black";
// scatterSeries.heatMaximumColor = "Yellow";
// scatterSeries.heatMaximum = 1;
// scatterSeries.heatMinimum = 5;
// scatterSeries.resolution = 3;
// scatterSeries.xAxis = this.xAxis;
// scatterSeries.yAxis = this.yAxis;
// this.chart.series.clear();
// this.chart.series.add(scatterSeries);
}
}
ts<div class="container vertical">
<div class="options vertical">
<label id="legendTitle">Stars Distribution in Milky Way Galaxy</label>
</div>
<igx-data-chart #chart
isHorizontalZoomEnabled=true
isVerticalZoomEnabled=true
width="100%"
height="100%">
<igx-numeric-x-axis #xAxis
abbreviateLargeNumbers=true
titleBottomMargin="10"
title="Plane of Rotation (in Light Years)">
</igx-numeric-x-axis>
<igx-numeric-y-axis #yAxis
abbreviateLargeNumbers=true
titleLeftMargin="10"
title="Vertical Plane (in Light Years)">
</igx-numeric-y-axis>
<igx-high-density-scatter-series [xAxis]="xAxis"
[yAxis]="yAxis"
[dataSource]="data"
xMemberPath="X"
yMemberPath="Y"
progressiveLoad=true
heatMinimumColor="Black"
heatMaximumColor="Yellow"
heatMaximum=1
heatMinimum=5
resolution=3>
</igx-high-density-scatter-series>
</igx-data-chart>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular 散布エリア チャート
Angular 散布エリア チャートは各ポイントに割り当てられた数値を使って、X および Y データの三角形分割に基づいて、色付きのサーフェスを描画します。このチャートはヒート マップ、磁場の強さ、またはオフィスの Wi-Fi の強さを描画する場合などに便利です。IgxDataChartComponent
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgxScatterAreaSeriesComponent
にバインドします:
import { Injectable } from "@angular/core";
@Injectable()
export class SampleScatterData {
public static create(): any[] {
const data: any[] = [];
const xMin = -180;
const xMax = 180;
const yMin = -90;
const yMax = 90;
const xCount = 11;
const yCount = 11;
const xStep = (xMax - xMin) / (xCount - 1);
const yStep = (yMax - yMin) / (yCount - 1);
let index = 0;
for (let x = xMin; x <= xMax; x += xStep) {
for (let y = yMin; y <= yMax; y += yStep) {
const z = Math.cos(x) + Math.cos(y);
data.push({ X: x, Y: y, Z: z, Index: index++ });
}
}
return data;
}
public static createWaveData(): any[] {
const data: any[] = [];
let index = 0;
for (let angle = 0; angle <= 360; angle += 10) {
const radians = angle * Math.PI / 180;
const sin = Math.sin(radians);
const cos = Math.cos(radians);
data.push({ Angle: angle, Radians: radians, SinValue: sin, CosValue: cos, Index: index++ });
}
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 { IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxLegendModule, IgxDataChartInteractivityModule, IgxScatterAreaSeriesModule } from "igniteui-angular-charts";
import { SampleScatterData } from "./SampleScatterData";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartScatterModule,
IgxDataChartScatterCoreModule,
IgxLegendModule,
IgxDataChartInteractivityModule,
IgxScatterAreaSeriesModule
],
providers: [SampleScatterData],
schemas: []
})
export class AppModule {}
tsimport { Component, OnInit, ViewChild } from "@angular/core";
import { ColorScaleInterpolationMode } from "igniteui-angular-charts";
import { IgxCustomPaletteColorScaleComponent } from "igniteui-angular-charts";
import { IgxDataChartComponent } from "igniteui-angular-charts";
import { IgxScatterAreaSeriesComponent } from "igniteui-angular-charts";
import { SampleScatterData } from "./SampleScatterData";
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
@ViewChild("chart", { static: true })
public chart: IgxDataChartComponent;
@ViewChild("series", { static: true })
public series: IgxScatterAreaSeriesComponent;
public data: any[];
public colorScale: IgxCustomPaletteColorScaleComponent;
public seriesScaleMode: string;
public seriesScaleMin: number;
public seriesScaleMax: number;
constructor() {
this.data = SampleScatterData.create();
this.seriesScaleMax = 2;
this.seriesScaleMin = -2;
this.seriesScaleMode = "InterpolateHSV";
}
public ngOnInit() {
this.colorScale = new IgxCustomPaletteColorScaleComponent();
this.colorScale.interpolationMode = ColorScaleInterpolationMode.InterpolateHSV;
this.colorScale.minimumValue = -2;
this.colorScale.maximumValue = 2;
this.colorScale.palette = [
"#8670CB", "#513E8C", "#003F5E",
"#0C6B99", "#4AC4FF", "#B5CC2E",
"#FFD034", "#FC8612", "#ED4840"
];
this.series.colorScale = this.colorScale;
}
public seriesScaleMinChanged(e: any) {
const num: number = e.target.value.toString();
this.colorScale.minimumValue = num;
this.seriesScaleMin = num;
}
public seriesScaleMaxChanged(e: any) {
const num: number = e.target.value.toString();
this.colorScale.maximumValue = num;
this.seriesScaleMax = num;
}
public seriesScaleModeChanged(e: any) {
const mode = e.target.value.toString();
this.colorScale.interpolationMode = mode;
this.seriesScaleMode = mode;
}
}
ts<div class="container vertical">
<div class="options horizontal">
<span class="options-label">Scale Mode: </span>
<select value={{seriesScaleMode}}
(change)="this.seriesScaleModeChanged($event)">
<option>Select</option>
<option>InterpolateRGB</option>
<option>InterpolateHSV</option>
</select>
<label class="options-label">Minimum: </label>
<label class="optionValue" >
{{seriesScaleMin}}
</label>
<input class="slider" type="range" min="-5" max="0" step="1"
value={{seriesScaleMin}}
(change)="this.seriesScaleMinChanged($event)"/>
<label class="options-label">Maximum: </label>
<label class="optionValue" >
{{seriesScaleMax}}
</label>
<input class="slider" type="range" min="0" max="5" step="1"
value={{seriesScaleMax}}
(change)="this.seriesScaleMaxChanged($event)"/>
</div>
<div class="options vertical">
<label id="legendTitle">Distribution of Magnetic Field</label>
</div>
<div class="container">
<igx-data-chart #chart
isHorizontalZoomEnabled="true"
isVerticalZoomEnabled="true"
width="100%"
height="100%"
gridMode="BeforeSeries"
[dataSource]="data">
<!-- primary axes required for scatter-contour-series -->
<igx-numeric-x-axis #xAxis1 labelLocation="OutsideLeft" minimumValue=-180 maximumValue=180 title="Longitude"></igx-numeric-x-axis>
<igx-numeric-y-axis #yAxis1 labelLocation="OutsideBottom" minimumValue=-90 maximumValue=90 title="Latitude"></igx-numeric-y-axis>
<igx-scatter-area-series #series
name="series"
[xAxis]=xAxis1
[yAxis]=yAxis1
xMemberPath="X"
yMemberPath="Y"
colorMemberPath="Z">
</igx-scatter-area-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 データの三角形分割に基づいて、各ポイントに数値データ値が割り当てられた色付きの等高線を描画します。このチャートはヒート マップ、磁場の強さ、またはオフィスの Wi-Fi の強さを描画する場合などに便利です。IgxDataChartComponent
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgxScatterContourSeriesComponent
にバインドします:
import { Injectable } from "@angular/core";
@Injectable()
export class SampleScatterData {
public static create(): any[] {
const data: any[] = [];
const xMin = -180;
const xMax = 180;
const yMin = -90;
const yMax = 90;
const xCount = 11;
const yCount = 11;
const xStep = (xMax - xMin) / (xCount - 1);
const yStep = (yMax - yMin) / (yCount - 1);
let index = 0;
for (let x = xMin; x <= xMax; x += xStep) {
for (let y = yMin; y <= yMax; y += yStep) {
const z = Math.cos(x) + Math.cos(y);
data.push({ X: x, Y: y, Z: z, Index: index++ });
}
}
return data;
}
public static createWaveData(): any[] {
const data: any[] = [];
let index = 0;
for (let angle = 0; angle <= 360; angle += 10) {
const radians = angle * Math.PI / 180;
const sin = Math.sin(radians);
const cos = Math.cos(radians);
data.push({ Angle: angle, Radians: radians, SinValue: sin, CosValue: cos, Index: index++ });
}
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 { IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxLegendModule, IgxScatterContourSeriesModule, IgxScatterAreaSeriesModule, IgxDataChartInteractivityModule } from "igniteui-angular-charts";
import { SampleScatterData } from "./SampleScatterData";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartScatterModule,
IgxDataChartScatterCoreModule,
IgxLegendModule,
IgxScatterContourSeriesModule,
IgxScatterAreaSeriesModule,
IgxDataChartInteractivityModule
],
providers: [SampleScatterData],
schemas: []
})
export class AppModule {}
tsimport { Component, OnInit, ViewChild } from "@angular/core";
import { IgxDataChartComponent } from "igniteui-angular-charts";
import { SampleScatterData } from "./SampleScatterData";
import { IgxLinearContourValueResolverComponent } from "igniteui-angular-charts";
import { IgxNumericXAxisComponent } from "igniteui-angular-charts";
import { IgxNumericYAxisComponent } from "igniteui-angular-charts";
import { IgxScatterContourSeriesComponent } from "igniteui-angular-charts";
import { IgxValueBrushScaleComponent } from "igniteui-angular-charts";
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
public data: any[];
@ViewChild("chart", { static: true })
public chart: IgxDataChartComponent;
@ViewChild("xAxis", { static: true })
public xAxis: IgxNumericXAxisComponent;
@ViewChild("yAxis", { static: true })
public yAxis: IgxNumericYAxisComponent;
public brushScale: IgxValueBrushScaleComponent;
constructor() {
this.data = SampleScatterData.create();
this.brushScale = new IgxValueBrushScaleComponent();
this.brushScale.minimumValue = -2;
this.brushScale.maximumValue = 2;
this.brushScale.brushes = [
"#8670CB", "#513E8C", "#003F5E",
"#0C6B99", "#4AC4FF", "#B5CC2E",
"#FFD034", "#FC8612", "#ED4840"
];
}
public ngOnInit() {
}
}
ts<div class="container vertical">
<div class="options vertical">
<label id="legendTitle">Distribution of Magnetic Field</label>
</div>
<div class="container">
<igx-data-chart #chart
height="100%"
width="100%"
[dataSource]="data"
isHorizontalZoomEnabled=true
isVerticalZoomEnabled=true
gridMode="BeforeSeries">
<!-- primary axes required for scatter-contour-series -->
<igx-numeric-x-axis #xAxis1 labelLocation="OutsideLeft" minimumValue=-180 maximumValue=180 title="Longitude"></igx-numeric-x-axis>
<igx-numeric-y-axis #yAxis1 labelLocation="OutsideBottom" minimumValue=-90 maximumValue=90 title="Latitude"></igx-numeric-y-axis>
<igx-scatter-contour-series
name="series"
[xAxis]="xAxis1"
[yAxis]="yAxis1"
xMemberPath="X"
yMemberPath="Y"
valueMemberPath="Z"
thickness=2
[fillScale]="brushScale">
</igx-scatter-contour-series>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
その他のリソース
関連するチャートタイプの詳細については、以下のトピックを参照してください。
API リファレンス
以下のテーブルは、上記のセクションで説明した API メンバーをリストします。