Web Components 散布図
Ignite UI for Web Components 散布図は、異なる一連のデータ内の項目間の関係を示したり、数値の x 座標と y 座標を使用してデータ項目をプロットしたりするチャートのグループに属しています。このチャートは、データの不均等な散らばりやデータの塊に注意が向けられます。科学データのプロットによく用いられ、予測結果からの収集データの偏差をハイライト表示できます。また、データを時シリーズに (データが時系列でない場合であっても) 構成するためにも使用できます。
Web Components 散布マーカー チャート
Web Components 散布図は、マーカーのコレクションとして描画されます。各マーカーには、デカルト座標系での位置を決定する 1 対の数値 X/Y 値があります。IgcDataChartComponent コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgcScatterSeriesComponent にバインドします:
// 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 { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcScatterSeriesComponent } from 'igniteui-webcomponents-charts';
import { CountryDemographicEuropeItem, CountryDemographicEurope } from './CountryDemographicEurope';
import { CountryDemographicAfricanItem, CountryDemographicAfrican } from './CountryDemographicAfrican';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartScatterModule,
IgcDataChartScatterCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private xAxis: IgcNumericXAxisComponent
private yAxis: IgcNumericYAxisComponent
private scatterSeries1: IgcScatterSeriesComponent
private scatterSeries2: IgcScatterSeriesComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
var scatterSeries1 = this.scatterSeries1 = document.getElementById('scatterSeries1') as IgcScatterSeriesComponent;
var scatterSeries2 = this.scatterSeries2 = document.getElementById('scatterSeries2') as IgcScatterSeriesComponent;
this._bind = () => {
chart.legend = this.legend;
scatterSeries1.xAxis = this.xAxis;
scatterSeries1.yAxis = this.yAxis;
scatterSeries1.dataSource = this.countryDemographicEurope;
scatterSeries2.xAxis = this.xAxis;
scatterSeries2.yAxis = this.yAxis;
scatterSeries2.dataSource = this.countryDemographicAfrican;
}
this._bind();
}
private _countryDemographicEurope: CountryDemographicEurope = null;
public get countryDemographicEurope(): CountryDemographicEurope {
if (this._countryDemographicEurope == null)
{
this._countryDemographicEurope = new CountryDemographicEurope();
}
return this._countryDemographicEurope;
}
private _countryDemographicAfrican: CountryDemographicAfrican = null;
public get countryDemographicAfrican(): CountryDemographicAfrican {
if (this._countryDemographicAfrican == null)
{
this._countryDemographicAfrican = new CountryDemographicAfrican();
}
return this._countryDemographicAfrican;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Population Statistics for Selected Continents
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart">
<igc-numeric-x-axis
name="xAxis"
id="xAxis"
title="Death Rate (per 1,000 people)"
minimum-value="5"
maximum-value="15">
</igc-numeric-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
title="Birth Rate (per 1,000 people)"
minimum-value="0"
maximum-value="50"
interval="10">
</igc-numeric-y-axis>
<igc-scatter-series
name="scatterSeries1"
id="scatterSeries1"
title="Europe"
x-member-path="deathRate"
y-member-path="birthRate"
marker-type="Circle"
show-default-tooltip="true">
</igc-scatter-series>
<igc-scatter-series
name="scatterSeries2"
id="scatterSeries2"
title="Africa"
x-member-path="deathRate"
y-member-path="birthRate"
marker-type="Circle"
show-default-tooltip="true">
</igc-scatter-series>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Web Components 散布折れ線チャート
Web Components は、直線で接続されたマーカーのコレクションとして描画され、各マーカーにはデカルト座標系での位置を決定する X/Y の数値のペアがあります。IgcDataChartComponent コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgcScatterLineSeriesComponent にバインドします:
// 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 { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcScatterLineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { HealthDataForGermanyItem, HealthDataForGermany } from './HealthDataForGermany';
import { HealthDataForFranceItem, HealthDataForFrance } from './HealthDataForFrance';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcNumberAbbreviatorModule,
IgcDataChartCoreModule,
IgcDataChartScatterModule,
IgcDataChartScatterCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private xAxis: IgcNumericXAxisComponent
private yAxis: IgcNumericYAxisComponent
private scatterLineSeries1: IgcScatterLineSeriesComponent
private scatterLineSeries2: IgcScatterLineSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
var scatterLineSeries1 = this.scatterLineSeries1 = document.getElementById('ScatterLineSeries1') as IgcScatterLineSeriesComponent;
var scatterLineSeries2 = this.scatterLineSeries2 = document.getElementById('ScatterLineSeries2') as IgcScatterLineSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
scatterLineSeries1.xAxis = this.xAxis;
scatterLineSeries1.yAxis = this.yAxis;
scatterLineSeries1.dataSource = this.healthDataForGermany;
scatterLineSeries2.xAxis = this.xAxis;
scatterLineSeries2.yAxis = this.yAxis;
scatterLineSeries2.dataSource = this.healthDataForFrance;
}
this._bind();
}
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;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Life Expectancy vs Health Expenditure
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart">
<igc-numeric-x-axis
name="xAxis"
id="xAxis"
title="Life Expectancy (in years)"
minimum-value="72"
maximum-value="84"
interval="2">
</igc-numeric-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
title="Health Expenditure per Capita"
abbreviate-large-numbers="true"
minimum-value="1000"
maximum-value="6000"
interval="1000">
</igc-numeric-y-axis>
<igc-scatter-line-series
name="ScatterLineSeries1"
id="ScatterLineSeries1"
title="Germany"
x-member-path="lifeExpectancy"
y-member-path="healthExpense"
marker-type="Circle"
show-default-tooltip="true">
</igc-scatter-line-series>
<igc-scatter-line-series
name="ScatterLineSeries2"
id="ScatterLineSeries2"
title="France"
x-member-path="lifeExpectancy"
y-member-path="healthExpense"
marker-type="Circle"
show-default-tooltip="true">
</igc-scatter-line-series>
<igc-data-tool-tip-layer
name="dataToolTipLayer"
id="dataToolTipLayer">
</igc-data-tool-tip-layer>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Web Components 散布スプライン チャート
Web Components は、曲線スプラインで接続されたマーカーのコレクションとして描画され、各マーカーにはデカルト座標系での位置を決定する X/Y の数値のペアがあります。IgcDataChartComponent コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgcScatterSplineSeriesComponent にバインドします:
// 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 { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcScatterSplineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { HealthDataForGermanyItem, HealthDataForGermany } from './HealthDataForGermany';
import { HealthDataForFranceItem, HealthDataForFrance } from './HealthDataForFrance';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcNumberAbbreviatorModule,
IgcDataChartCoreModule,
IgcDataChartScatterModule,
IgcDataChartScatterCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private xAxis: IgcNumericXAxisComponent
private yAxis: IgcNumericYAxisComponent
private scatterSplineSeries1: IgcScatterSplineSeriesComponent
private scatterSplineSeries2: IgcScatterSplineSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
var scatterSplineSeries1 = this.scatterSplineSeries1 = document.getElementById('scatterSplineSeries1') as IgcScatterSplineSeriesComponent;
var scatterSplineSeries2 = this.scatterSplineSeries2 = document.getElementById('scatterSplineSeries2') as IgcScatterSplineSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
scatterSplineSeries1.xAxis = this.xAxis;
scatterSplineSeries1.yAxis = this.yAxis;
scatterSplineSeries1.dataSource = this.healthDataForGermany;
scatterSplineSeries2.xAxis = this.xAxis;
scatterSplineSeries2.yAxis = this.yAxis;
scatterSplineSeries2.dataSource = this.healthDataForFrance;
}
this._bind();
}
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;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Life Expectancy vs Health Expenditure
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart">
<igc-numeric-x-axis
name="xAxis"
id="xAxis"
title="Life Expectancy (in years)"
minimum-value="72"
maximum-value="84"
interval="2">
</igc-numeric-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
title="Health Expenditure per Capita"
abbreviate-large-numbers="true"
minimum-value="1000"
maximum-value="6000"
interval="1000">
</igc-numeric-y-axis>
<igc-scatter-spline-series
name="scatterSplineSeries1"
id="scatterSplineSeries1"
title="Germany"
x-member-path="lifeExpectancy"
y-member-path="healthExpense"
marker-type="Circle"
show-default-tooltip="true">
</igc-scatter-spline-series>
<igc-scatter-spline-series
name="scatterSplineSeries2"
id="scatterSplineSeries2"
title="France"
x-member-path="lifeExpectancy"
y-member-path="healthExpense"
marker-type="Circle"
show-default-tooltip="true">
</igc-scatter-spline-series>
<igc-data-tool-tip-layer
name="dataToolTipLayer"
id="dataToolTipLayer">
</igc-data-tool-tip-layer>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Web Components 散布高密度チャート
Web Components 散布高密度 (HD) チャートを使用して、わずかな読み込み時間で数千から数百万のデータ ポイントに及ぶ散布データをバインドして表示します。このチャート タイプは非常に多くのポイント用に設計されているため、フル サイズのマーカーではなく小さな点として視覚化され、データ ポイントのクラスターを表すより高い色密度を使用してデータが最も多い領域を表示します。IgcDataChartComponent コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgcHighDensityScatterSeriesComponent にバインドします:
export class SampleDensityData {
public static create(): any[] {
const amount = 25000;
let data: any[] = [];
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[] {
// const data: 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 = Math.round(centerX + (rangeX * dispersionX));
const y = Math.round(centerY + (rangeY * dispersionY));
data.push({ "X": x, "Y": y });
}
return data;
}
}
tsimport { SampleDensityData } from './SampleDensityData';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcHighDensityScatterSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcHighDensityScatterSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcNumberAbbreviatorModule } from 'igniteui-webcomponents-charts';
import { IgcNumericYAxisModule } from 'igniteui-webcomponents-charts';
import { IgcNumericXAxisModule } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartScatterCoreModule,
IgcDataChartScatterModule,
IgcDataChartInteractivityModule,
IgcNumberAbbreviatorModule,
IgcHighDensityScatterSeriesModule,
IgcNumericYAxisModule,
IgcNumericXAxisModule
);
export class DataChartTypeScatterDensitySeries {
constructor() {
let chart = document.getElementById('chart') as IgcDataChartComponent;
chart.dataSource = SampleDensityData.create();
}
}
new DataChartTypeScatterDensitySeries();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartTypeScatterDensitySeries</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="container vertical">
<div class="options horizontal">
<div class="legend-title">
<span>Stars Distribution in Milky Way Galaxy</span>
</div>
</div>
<igc-data-chart
id="chart"
width="100%"
height="100%"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true">
<igc-numeric-x-axis
name="xAxis"
abbreviate-large-numbers="true"
title-bottom-margin="10"
title="Plane of Rotation (in Light Years)"></igc-numeric-x-axis>
<igc-numeric-y-axis
name="yAxis"
abbreviate-large-numbers="true"
title-bottom-margin="10"
title="Plane of Rotation (in Light Years)"></igc-numeric-y-axis>
<igc-high-density-scatter-series
id="series"
x-axis-name="xAxis"
y-axis-name="yAxis"
title="Distribution"
x-member-path="X"
y-member-path="Y"
show-default-tooltip="true"
mouse-over-enabled="true"
progressive-load="true"
heat-minimum-color="Black"
heat-maximum-color="Yellow"
heat-maximum="1"
heat-minimum="5"
resolution="3">
</igc-high-density-scatter-series>
</igc-data-chart>
</div>
</div>
</div>
<script src="src/index.ts"></script>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css
Web Components 散布エリア チャート
Web Components 散布エリア チャートは各ポイントに割り当てられた数値を使って、X および Y データの三角形分割に基づいて、色付きのサーフェスを描画します。このチャートはヒート マップ、磁場の強さ、またはオフィスの Wi-Fi の強さを描画する場合などに便利です。IgcDataChartComponent コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgcScatterAreaSeriesComponent にバインドします:
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 { SampleScatterData } from './SampleScatterData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcScatterAreaSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcScatterAreaSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcCustomPaletteColorScaleModule } from 'igniteui-webcomponents-charts';
import { IgcCustomPaletteColorScaleComponent } from 'igniteui-webcomponents-charts';
import { ColorScaleInterpolationMode } from 'igniteui-webcomponents-charts';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartScatterCoreModule,
IgcDataChartScatterModule,
IgcDataChartInteractivityModule,
IgcScatterAreaSeriesModule,
IgcCustomPaletteColorScaleModule
);
export class DataChartTypeScatterAreaSeries {
constructor() {
let chart = document.getElementById('chart') as IgcDataChartComponent;
chart.dataSource = SampleScatterData.create();
let colorScale = new IgcCustomPaletteColorScaleComponent();
colorScale.interpolationMode = ColorScaleInterpolationMode.InterpolateHSV;
colorScale.minimumValue = -2;
colorScale.maximumValue = 2;
colorScale.palette = [ "#8670CB", "#4AC4FF", "#B5CC2E", "#FC8612", "#ED4840" ];
const series = document.getElementById('series') as IgcScatterAreaSeriesComponent;
series.colorScale = colorScale;
}
}
new DataChartTypeScatterAreaSeries();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartTypeScatterAreaSeries</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options horizontal">
<div class="legend-title">
<span>Distribution of Magnetic Field</span>
</div>
</div>
<div class="container vertical">
<igc-data-chart
id="chart"
width="100%"
height="100%"
grid-mode="BeforeSeries"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<!-- primary axes required for scatter-contour-series -->
<igc-numeric-x-axis name="xAxis1" label-location="OutsideLeft" minimum-value="-180" maximum-value="180" interval="30" title="Longitude"></igc-numeric-x-axis>
<igc-numeric-y-axis name="yAxis1" label-location="OutsideBottom" minimum-value="-90" maximum-value="90" interval="30" title="Latitude"></igc-numeric-y-axis>
<!-- optional axes that provide more context for displayed data -->
<igc-numeric-x-axis name="xAxis2" label-location="OutsideTop" minimum-value="-180" maximum-value="180" interval="30"></igc-numeric-x-axis>
<igc-numeric-y-axis name="yAxis2" label-location="OutsideRight" minimum-value="-90" maximum-value="90" interval="30" title="Latitude"></igc-numeric-y-axis>
<igc-scatter-area-series
id="series"
x-axis-name="xAxis1"
y-axis-name="yAxis1"
x-member-path="X"
y-member-path="Y"
color-member-path="Z"
show-default-tooltip="true">
</igc-scatter-area-series>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css
Web Components 散布等高線チャート
Web Components 散布等高線チャートは、X データと Y データの三角形分割に基づいて、各ポイントに数値データ値が割り当てられた色付きの等高線を描画します。このチャートはヒート マップ、磁場の強さ、またはオフィスの Wi-Fi の強さを描画する場合などに便利です。IgcDataChartComponent コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgcScatterContourSeriesComponent にバインドします:
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 { SampleScatterData } from './SampleScatterData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcScatterContourSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcScatterContourSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcValueBrushScaleModule } from 'igniteui-webcomponents-charts';
import { IgcValueBrushScaleComponent } from 'igniteui-webcomponents-charts';
import { IgcLinearContourValueResolverModule } from 'igniteui-webcomponents-charts';
import { IgcLinearContourValueResolverComponent } from 'igniteui-webcomponents-charts';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartScatterCoreModule,
IgcDataChartScatterModule,
IgcDataChartInteractivityModule,
IgcScatterContourSeriesModule,
IgcValueBrushScaleModule,
IgcLinearContourValueResolverModule
);
export class DataChartTypeScatterContourSeries {
private chart: IgcDataChartComponent;
private series: IgcScatterContourSeriesComponent;
public thicknessLabel: HTMLLabelElement;
public contoursLabel: HTMLLabelElement;
constructor() {
this.chart = document.getElementById('chart') as IgcDataChartComponent;
this.chart.dataSource = this.getData();
const brushScale = new IgcValueBrushScaleComponent();
brushScale.minimumValue = -2;
brushScale.maximumValue = 2;
brushScale.brushes = [
'#8670CB', '#513E8C', '#003F5E',
'#0C6B99', '#4AC4FF', '#B5CC2E',
'#FFD034', '#FC8612', '#ED4840'
];
this.series = document.getElementById('series') as IgcScatterContourSeriesComponent;
this.series.fillScale = brushScale;
this.thicknessLabel = document.getElementById('thicknessLabel') as HTMLLabelElement;
this.thicknessLabel.textContent = '5';
const thicknessSlider = document.getElementById('thicknessSlider') as HTMLInputElement;
thicknessSlider.value = '5';
thicknessSlider!.addEventListener('change', this.onSeriesThicknessChanged);
this.contoursLabel = document.getElementById('contoursLabel') as HTMLLabelElement;
this.contoursLabel.textContent = '10';
const contoursSlider = document.getElementById('contoursSlider') as HTMLInputElement;
contoursSlider.value = '10';
contoursSlider!.addEventListener('change', this.onSeriesContoursChanged);
}
public onSeriesThicknessChanged = (e: any) => {
const num: number = parseInt(e.target.value, 10);
this.series.thickness = num;
this.thicknessLabel.textContent = num.toString();
}
public onSeriesContoursChanged = (e: any) => {
const num: number = parseInt(e.target.value, 10);
if (this.series !== undefined) {
const contours = new IgcLinearContourValueResolverComponent();
contours.valueCount = num;
this.series.valueResolver = contours;
}
this.contoursLabel.textContent = num.toString();
}
getData(): any[] {
const data = SampleScatterData.create();
return data;
}
}
new DataChartTypeScatterContourSeries();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartTypeScatterContourSeries</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options horizontal">
<label class="options-label">Thickness: </label>
<label class="options-value" id="thicknessLabel">
</label>
<input class="options-slider" id="thicknessSlider"
type="range" min="1" max="10" step="1">
</input>
<label class="options-label">Contours: </label>
<label class="options-value" id="contoursLabel">
</label>
<input class="options-slider" id="contoursSlider"
type="range" min="1" max="15" step="1">
</input>
</div>
<div class="options horizontal">
<div class="legend-title">
<span>Distribution of Magnetic Field</span>
</div>
</div>
<div class="container" >
<igc-data-chart id="chart" width="100%" height="100%"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true"
grid-mode="BeforeSeries">
<!-- primary axes required for scatter-contour-series -->
<igc-numeric-x-axis name="xAxis1" label-location="OutsideLeft" minimum-value="-180" maximum-value="180" interval="30" title="Longitude"></igc-numeric-x-axis>
<igc-numeric-y-axis name="yAxis1" label-location="OutsideBottom" minimum-value="-90" maximum-value="90" interval="30" title="Latitude"></igc-numeric-y-axis>
<!-- optional axes that provide more context for displayed data -->
<igc-numeric-x-axis name="xAxis2" label-location="OutsideTop" minimum-value="-180" maximum-value="180" interval="30"></igc-numeric-x-axis>
<igc-numeric-y-axis name="yAxis2" label-location="OutsideRight" minimum-value="-90" maximum-value="90" interval="30" title="Latitude"></igc-numeric-y-axis>
<igc-scatter-contour-series
id="series"
x-axis-name="xAxis1"
y-axis-name="yAxis1"
thickness="3"
x-member-path="X"
y-member-path="Y"
value-member-path="Z">
</igc-scatter-contour-series>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css
その他のリソース
関連するチャートタイプの詳細については、以下のトピックを参照してください。
API リファレンス
以下のテーブルは、上記のセクションで説明した API メンバーをリストします。