Web Components 軸タイプ
Ignite UI for Web Components カテゴリ チャートは、IgcCategoryXAxisComponent
および IgcNumericYAxisComponent
タイプを 1 つだけ使用します。同様に、Ignite UI for Web Components ファイナンシャル チャートは、IgcTimeXAxisComponent
タイプと IgcNumericYAxisComponent
タイプを 1 つだけ使用します。ただし、Ignite UI for Web Components データ チャートは複数の軸タイプをサポートしており、軸の位置を設定してチャートの任意の側に配置したり、軸交差プロパティを使用してチャートの内部に配置したりできます。このトピックでは、相互に互換性のある軸とシリーズ、および固有の軸に対するいくつかの特定のプロパティについて、それぞれについて説明します。
デカルト軸
デカルト軸を持つ IgcDataChartComponent
では 3 つのタイプの X 軸を使用して水平 (X 軸) および垂直 (X 軸) 方向にデータをプロットすることが可能です。
(IgcCategoryXAxisComponent
、IgcNumericXAxisComponent
、および IgcTimeXAxisComponent
) と 2 つのタイプの Y 軸 (IgcCategoryYAxisComponent
および IgcNumericYAxisComponent
)。
カテゴリ X 軸
IgcCategoryXAxisComponent
は、そのデータを一連のカテゴリ データ項目として扱います。文字列や数値など、ほぼすべてのタイプのデータを表示できます。この軸に数値をプロットする場合、この軸は離散軸であり、連続ではないことに注意してください。これは、各カテゴリ データ項目がその前のデータ項目から等距離に配置されることを意味します。また、項目は軸のデータ ソースに表示される順序でプロットされます。
IgcCategoryXAxisComponent
では、データをプロットするために DataSource
と label
を提供する必要があります。通常、次のタイプの系列をプロットするために IgcNumericYAxisComponent
と共に使用されます。
次の例は、上記のスタイル設定プロパティの使用法を示しています:
export class ContinentsBirthRateItem {
public constructor(init: Partial<ContinentsBirthRateItem>) {
Object.assign(this, init);
}
public Year: string;
public Asia: number;
public Africa: number;
public Europe: number;
public NorthAmerica: number;
public SouthAmerica: number;
public Oceania: number;
}
export class ContinentsBirthRate extends Array<ContinentsBirthRateItem> {
public constructor(items: Array<ContinentsBirthRateItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new ContinentsBirthRateItem(
{
Year: `1950`,
Asia: 62,
Africa: 13,
Europe: 10,
NorthAmerica: 4,
SouthAmerica: 8,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `1960`,
Asia: 68,
Africa: 12,
Europe: 15,
NorthAmerica: 4,
SouthAmerica: 9,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `1970`,
Asia: 80,
Africa: 17,
Europe: 11,
NorthAmerica: 3,
SouthAmerica: 9,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `1980`,
Asia: 77,
Africa: 21,
Europe: 12,
NorthAmerica: 3,
SouthAmerica: 10,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `1990`,
Asia: 87,
Africa: 24,
Europe: 9,
NorthAmerica: 3,
SouthAmerica: 10,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `2000`,
Asia: 79,
Africa: 28,
Europe: 8,
NorthAmerica: 4,
SouthAmerica: 9,
Oceania: 3
}),
new ContinentsBirthRateItem(
{
Year: `2010`,
Asia: 78,
Africa: 35,
Europe: 10,
NorthAmerica: 4,
SouthAmerica: 8,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `2020`,
Asia: 75,
Africa: 43,
Europe: 7,
NorthAmerica: 4,
SouthAmerica: 7,
Oceania: 4
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStackedColumnSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartCategoryCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule,
IgcDataChartStackedModule,
IgcStackedFragmentSeriesModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private xAxis: IgcCategoryXAxisComponent
private yAxis: IgcNumericYAxisComponent
private stackedColumnSeries: IgcStackedColumnSeriesComponent
private s1: IgcStackedFragmentSeriesComponent
private s2: IgcStackedFragmentSeriesComponent
private s3: IgcStackedFragmentSeriesComponent
private s4: IgcStackedFragmentSeriesComponent
private s5: IgcStackedFragmentSeriesComponent
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 IgcCategoryXAxisComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
var stackedColumnSeries = this.stackedColumnSeries = document.getElementById('stackedColumnSeries') as IgcStackedColumnSeriesComponent;
var s1 = this.s1 = document.getElementById('s1') as IgcStackedFragmentSeriesComponent;
var s2 = this.s2 = document.getElementById('s2') as IgcStackedFragmentSeriesComponent;
var s3 = this.s3 = document.getElementById('s3') as IgcStackedFragmentSeriesComponent;
var s4 = this.s4 = document.getElementById('s4') as IgcStackedFragmentSeriesComponent;
var s5 = this.s5 = document.getElementById('s5') as IgcStackedFragmentSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
xAxis.dataSource = this.continentsBirthRate;
stackedColumnSeries.dataSource = this.continentsBirthRate;
stackedColumnSeries.xAxis = this.xAxis;
stackedColumnSeries.yAxis = this.yAxis;
}
this._bind();
}
private _continentsBirthRate: ContinentsBirthRate = null;
public get continentsBirthRate(): ContinentsBirthRate {
if (this._continentsBirthRate == null)
{
this._continentsBirthRate = new ContinentsBirthRate();
}
return this._continentsBirthRate;
}
}
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">
Annual Birth Rates by World Region
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-category-x-axis
name="xAxis"
id="xAxis"
label="Year"
gap="0.75">
</igc-category-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
minimum-value="0"
maximum-value="140"
interval="20"
title-left-margin="10"
label-format="{0} m">
</igc-numeric-y-axis>
<igc-stacked-column-series
name="stackedColumnSeries"
id="stackedColumnSeries"
show-default-tooltip="false">
<igc-stacked-fragment-series
name="s1"
id="s1"
value-member-path="Asia"
title="Asia">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s2"
id="s2"
value-member-path="Africa"
title="Africa">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s3"
id="s3"
value-member-path="Europe"
title="Europe">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s4"
id="s4"
value-member-path="NorthAmerica"
title="North America">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s5"
id="s5"
value-member-path="SouthAmerica"
title="South America">
</igc-stacked-fragment-series>
</igc-stacked-column-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
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
カテゴリ Y 軸
IgcCategoryYAxisComponent
は、上記の IgcCategoryXAxisComponent
と非常によく似た働きをしますが、水平ではなく垂直に配置されます。また、この軸では、データをプロットするために DataSource
と label
を提供する必要があります。IgcCategoryYAxisComponent
は通常 IgcNumericXAxisComponent
と組み合わせて次のタイプのシリーズをプロットするために使用されます。
次の例は、IgcCategoryYAxisComponent
タイプの使用法を示しています:
export class HighestGrossingMoviesItem {
public constructor(init: Partial<HighestGrossingMoviesItem>) {
Object.assign(this, init);
}
public franchise: string;
public totalRevenue: number;
public highestGrossing: number;
}
export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
public constructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HighestGrossingMoviesItem(
{
franchise: `Marvel Universe`,
totalRevenue: 22.55,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Star Wars`,
totalRevenue: 10.32,
highestGrossing: 2.07
}),
new HighestGrossingMoviesItem(
{
franchise: `Harry Potter`,
totalRevenue: 9.19,
highestGrossing: 1.34
}),
new HighestGrossingMoviesItem(
{
franchise: `Avengers`,
totalRevenue: 7.76,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Spider Man`,
totalRevenue: 7.22,
highestGrossing: 1.28
}),
new HighestGrossingMoviesItem(
{
franchise: `James Bond`,
totalRevenue: 7.12,
highestGrossing: 1.11
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryCoreModule, IgcDataChartCategoryModule, IgcDataChartInteractivityModule, IgcDataChartVerticalCategoryModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcCategoryHighlightLayerComponent, IgcBarSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartCategoryCoreModule,
IgcDataChartCategoryModule,
IgcDataChartInteractivityModule,
IgcDataChartVerticalCategoryModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private yAxis: IgcCategoryYAxisComponent
private xAxis: IgcNumericXAxisComponent
private categoryHighlightLayer: IgcCategoryHighlightLayerComponent
private barSeries1: IgcBarSeriesComponent
private barSeries2: IgcBarSeriesComponent
private tooltips: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('Chart') as IgcDataChartComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcCategoryYAxisComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
var categoryHighlightLayer = this.categoryHighlightLayer = document.getElementById('CategoryHighlightLayer') as IgcCategoryHighlightLayerComponent;
var barSeries1 = this.barSeries1 = document.getElementById('BarSeries1') as IgcBarSeriesComponent;
var barSeries2 = this.barSeries2 = document.getElementById('BarSeries2') as IgcBarSeriesComponent;
var tooltips = this.tooltips = document.getElementById('Tooltips') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
yAxis.dataSource = this.highestGrossingMovies;
barSeries1.xAxis = this.xAxis;
barSeries1.yAxis = this.yAxis;
barSeries1.dataSource = this.highestGrossingMovies;
barSeries2.xAxis = this.xAxis;
barSeries2.yAxis = this.yAxis;
barSeries2.dataSource = this.highestGrossingMovies;
}
this._bind();
}
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Highest Grossing Movie Franchises
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="Chart"
id="Chart">
<igc-category-y-axis
name="yAxis"
id="yAxis"
label="franchise"
use-enhanced-interval-management="true"
enhanced-interval-prefer-more-category-labels="true"
is-inverted="true"
gap="0.5"
overlap="-0.1">
</igc-category-y-axis>
<igc-numeric-x-axis
name="xAxis"
id="xAxis"
title="Billions of U.S. Dollars">
</igc-numeric-x-axis>
<igc-category-highlight-layer
name="CategoryHighlightLayer"
id="CategoryHighlightLayer">
</igc-category-highlight-layer>
<igc-bar-series
name="BarSeries1"
id="BarSeries1"
title="Total Revenue of Franchise"
value-member-path="totalRevenue"
show-default-tooltip="true"
is-transition-in-enabled="true"
is-highlighting-enabled="true">
</igc-bar-series>
<igc-bar-series
name="BarSeries2"
id="BarSeries2"
title="Highest Grossing Movie in Series"
value-member-path="highestGrossing"
show-default-tooltip="true"
is-transition-in-enabled="true"
is-highlighting-enabled="true">
</igc-bar-series>
<igc-data-tool-tip-layer
name="Tooltips"
id="Tooltips">
</igc-data-tool-tip-layer>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
数値 X 軸
IgcNumericXAxisComponent
は、そのデータを連続的に変化する数値データ項目として扱います。この軸のラベルは、X 軸に沿って水平に配置されます。IgcNumericXAxisComponent
ラベルの位置は、IgcNumericYAxisComponent
と組み合わせた場合にサポートされるさまざまな ScatterSeries (散布シリーズ) の XMemberPath
プロパティに依存します。または、IgcCategoryXAxisComponent
と組み合わせた場合、これらのラベルは、IgcBarSeriesComponent
、IgcStackedBarSeriesComponent
、および IgcStacked100BarSeriesComponent
の ValueMemberPath
に対応して配置されます。
IgcNumericXAxisComponent
は、次のタイプのシリーズと互換性があります:
IgcBarSeriesComponent
IgcBubbleSeriesComponent
IgcHighDensityScatterSeriesComponent
IgcScatterSeriesComponent
IgcScatterLineSeriesComponent
IgcScatterSplineSeriesComponent
IgcScatterAreaSeriesComponent
IgcScatterContourSeriesComponent
IgcScatterPolylineSeriesComponent
IgcScatterPolygonSeriesComponent
IgcStackedBarSeriesComponent
IgcStacked100BarSeriesComponent
次の例は、IgcNumericXAxisComponent
の使用法を示しています:
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
数値 Y 軸
IgcNumericYAxisComponent
は、そのデータを連続的に変化する数値データ項目として扱います。この軸のラベルは、Y 軸に沿って垂直に配置されます。IgcNumericYAxisComponent
ラベルの位置は、IgcNumericXAxisComponent
と組み合わせた場合にサポートされるさまざまな ScatterSeries (散布シリーズ) の YMemberPath
プロパティに依存します。または、IgcCategoryYAxisComponent
と組み合わせた場合、これらのラベルは、上記の表に記載されているカテゴリまたは積層シリーズの ValueMemberPath
に対応して配置されます。財務シリーズのいずれかを使用している場合、Open/High/Low/Close のパスと使用しているシリーズ タイプに対応して配置されます。
IgcNumericYAxisComponent
は、次のタイプのシリーズと互換性があります:
次の例は、IgcNumericYAxisComponent
の使用法を示しています:
// 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
時間 X 軸
IgcTimeXAxisComponent
は、そのデータを、日付でソートされた一連のデータ項目として扱います。この軸タイプのラベルは日付であり、日付間隔に従ってフォーマットおよび配置できます。この軸の日付範囲は、DateTimeMemberPath
を使用してマップされたデータ列の日付値によって決定されます。これは、DataSource
とともに、この軸タイプでデータをプロットするために必要です。
IgcTimeXAxisComponent
は、IgcFinancialChartComponent
コンポーネントの X 軸タイプです。
時間 X 軸のブレーク
IgcTimeXAxisComponent
には、breaks
(ブレーク) を使用してデータの間隔を除外するオプションがあります。その結果、ラベルとプロットされたデータは除外された間隔では表示されません。たとえば、勤務日/休業日、休日、週末などです。IgcTimeAxisBreakComponent
のインスタンスを軸の Breaks
コレクションに追加し、一意の start
、end
、および interval
を使用して構成できます。
時間 X 軸の書式設定
IgcTimeXAxisComponent
には、IgcTimeAxisLabelFormatComponent
オブジェクトのコレクションを表す LabelFormats
プロパティがあります。コレクションに追加された各 IgcTimeAxisLabelFormatComponent
は、一意の format
(書式) と range
(範囲) を割り当てる役割を果たします。これは、データを年からミリ秒にドリルダウンし、チャートに表示される時間の範囲に応じてラベルを調整する場合に特に役立ちます。
IgcTimeAxisLabelFormatComponent
の format
プロパティは、特定の表示範囲に使用する形式を指定します。IgcTimeAxisLabelFormatComponent
の range
プロパティは、軸ラベルの形式が別の形式に切り替わる表示範囲を指定します。たとえば、範囲が 10 日と 5 時間に設定された 2 つの IgcTimeAxisLabelFormatComponent
要素がある場合、軸の表示範囲が 10 日未満になるとすぐに、5 時間形式に切り替わります。
時間 X 軸の間隔
IgcTimeXAxisComponent
は、カテゴリ軸と数値軸の従来の interval
プロパティを IgcTimeAxisIntervalComponent
型の Intervals
コレクションに置き換えます。コレクションに追加された各 IgcTimeAxisIntervalComponent
は、一意の interval
、range
、および intervalType
を割り当てる役割を果たします。これは、データを年単位からミリ秒単位にドリルダウンして、チャートに表示される時間の範囲に応じてラベル間に一意の間隔を設ける場合に特に役立ちます。これらのプロパティの説明は次のとおりです。
interval
: 使用する間隔を指定します。intervalType
プロパティに関連付けられています。たとえば、intervalType
がDays
に設定されている場合、interval
で指定される数値は日数になります。range
: 軸間隔が別の間隔に切り替わる可視範囲を指定します。たとえば、範囲が 10 日間および 5 時間に設定された 2 つの TimeAxisInterval がある場合、軸の表示範囲が 10 日間より短くなる際に 5 時間範囲の間隔に変更します。intervalType
:interval
プロパティの時間単位を指定します。
極座標軸
極座標軸を持つ IgcDataChartComponent
により、チャートの中心から外側 (半径軸) およびチャートの中心の周り (角度軸) にデータをプロットできます。
カテゴリ角度軸
IgcCategoryAngleAxisComponent
は、そのデータを一連のカテゴリ データ項目として扱います。この軸のラベルは、その順序での位置に従って円の端に沿って配置されます。この軸のタイプでは、数字、文字列などのほぼすべてのデータのタイプを表示できます。
IgcCategoryAngleAxisComponent
は通常、ラジアル シリーズをプロットするために IgcNumericRadiusAxisComponent
と共に使用されます。
次の例は、IgcCategoryAngleAxisComponent
タイプの使用法を示しています:
export class FootballPlayerStatsItem {
public constructor(init: Partial<FootballPlayerStatsItem>) {
Object.assign(this, init);
}
public attribute: string;
public ronaldo: number;
public messi: number;
}
export class FootballPlayerStats extends Array<FootballPlayerStatsItem> {
public constructor(items: Array<FootballPlayerStatsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new FootballPlayerStatsItem(
{
attribute: `Dribbling`,
ronaldo: 8,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Passing`,
ronaldo: 8,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Finishing`,
ronaldo: 10,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Free Kicks`,
ronaldo: 8,
messi: 9
}),
new FootballPlayerStatsItem(
{
attribute: `Penalties`,
ronaldo: 9,
messi: 7
}),
new FootballPlayerStatsItem(
{
attribute: `Physical`,
ronaldo: 10,
messi: 7
}),
new FootballPlayerStatsItem(
{
attribute: `Team Play`,
ronaldo: 7,
messi: 9
}),
new FootballPlayerStatsItem(
{
attribute: `Heading`,
ronaldo: 9,
messi: 6
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialAreaSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartRadialModule,
IgcDataChartRadialCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private angleAxis: IgcCategoryAngleAxisComponent
private radiusAxis: IgcNumericRadiusAxisComponent
private radialAreaSeries1: IgcRadialAreaSeriesComponent
private radialAreaSeries2: IgcRadialAreaSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var angleAxis = this.angleAxis = document.getElementById('angleAxis') as IgcCategoryAngleAxisComponent;
var radiusAxis = this.radiusAxis = document.getElementById('radiusAxis') as IgcNumericRadiusAxisComponent;
var radialAreaSeries1 = this.radialAreaSeries1 = document.getElementById('RadialAreaSeries1') as IgcRadialAreaSeriesComponent;
var radialAreaSeries2 = this.radialAreaSeries2 = document.getElementById('RadialAreaSeries2') as IgcRadialAreaSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
angleAxis.dataSource = this.footballPlayerStats;
radialAreaSeries1.dataSource = this.footballPlayerStats;
radialAreaSeries1.angleAxis = this.angleAxis;
radialAreaSeries1.valueAxis = this.radiusAxis;
radialAreaSeries2.dataSource = this.footballPlayerStats;
radialAreaSeries2.angleAxis = this.angleAxis;
radialAreaSeries2.valueAxis = this.radiusAxis;
}
this._bind();
}
private _footballPlayerStats: FootballPlayerStats = null;
public get footballPlayerStats(): FootballPlayerStats {
if (this._footballPlayerStats == null)
{
this._footballPlayerStats = new FootballPlayerStats();
}
return this._footballPlayerStats;
}
}
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">
Ronaldo vs Messi Player Stats
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-category-angle-axis
name="angleAxis"
id="angleAxis"
label="attribute">
</igc-category-angle-axis>
<igc-numeric-radius-axis
name="radiusAxis"
id="radiusAxis"
inner-radius-extent-scale="0.1"
interval="2"
minimum-value="0"
maximum-value="10">
</igc-numeric-radius-axis>
<igc-radial-area-series
name="RadialAreaSeries1"
id="RadialAreaSeries1"
value-member-path="ronaldo"
show-default-tooltip="false"
area-fill-opacity="0.5"
thickness="3"
title="Ronaldo"
marker-type="Circle">
</igc-radial-area-series>
<igc-radial-area-series
name="RadialAreaSeries2"
id="RadialAreaSeries2"
value-member-path="messi"
show-default-tooltip="false"
area-fill-opacity="0.5"
thickness="3"
title="Messi"
marker-type="Circle">
</igc-radial-area-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
比例カテゴリ角度軸
IgcProportionalCategoryAngleAxisComponent
は、そのデータを一連のカテゴリ データ項目として扱います。この軸のラベルは、シーケンス内の位置に応じて円の端に沿って配置されます。この軸の種類では、数字、文字列などのほぼすべてのデータのタイプを表示できます。
IgcProportionalCategoryAngleAxisComponent
は通常、IgcNumericRadiusAxisComponent
と一緒に使用され、円チャートをプロットします (例: ラジアル シリーズ)。
次の例は、IgcProportionalCategoryAngleAxisComponent
タイプの使用方法を示しています。
数字角度軸
IgcNumericAngleAxisComponent
は、そのデータを連続的に変化する数値データ項目として扱います。この軸領域のラベルは、円形プロットの中心から始まる半径線に沿って配置されます。IgcNumericAngleAxisComponent
のラベルの位置は、極座標シリーズ オブジェクトの RadiusMemberPath
プロパティまたはラジアル シリーズ オブジェクトの ValueMemberPath
プロパティを使用してマップされたデータ列の値によって異なります。
IgcNumericAngleAxisComponent
は、IgcCategoryAngleAxisComponent
と共に使用してラジアル シリーズをプロットするか、IgcNumericRadiusAxisComponent
と共に使用して極座標シリーズをプロットすることができます。
次の例は、IgcNumericAngleAxisComponent
タイプの使用法を示しています:
export class BoatSailingDataItem {
public constructor(init: Partial<BoatSailingDataItem>) {
Object.assign(this, init);
}
public direction: number;
public boatSpeed: number;
public windSpeed: number;
}
export class BoatSailingData extends Array<BoatSailingDataItem> {
public constructor(items: Array<BoatSailingDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new BoatSailingDataItem(
{
direction: 0,
boatSpeed: 70,
windSpeed: 90
}),
new BoatSailingDataItem(
{
direction: 45,
boatSpeed: 35,
windSpeed: 65
}),
new BoatSailingDataItem(
{
direction: 90,
boatSpeed: 25,
windSpeed: 45
}),
new BoatSailingDataItem(
{
direction: 135,
boatSpeed: 15,
windSpeed: 25
}),
new BoatSailingDataItem(
{
direction: 180,
boatSpeed: 0,
windSpeed: 0
}),
new BoatSailingDataItem(
{
direction: 225,
boatSpeed: 15,
windSpeed: 25
}),
new BoatSailingDataItem(
{
direction: 270,
boatSpeed: 25,
windSpeed: 45
}),
new BoatSailingDataItem(
{
direction: 315,
boatSpeed: 35,
windSpeed: 65
}),
new BoatSailingDataItem(
{
direction: 360,
boatSpeed: 70,
windSpeed: 90
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarScatterSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartPolarModule,
IgcDataChartPolarCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
export class Sample {
private chart: IgcDataChartComponent
private angleAxis: IgcNumericAngleAxisComponent
private radiusAxis: IgcNumericRadiusAxisComponent
private polarScatterSeries1: IgcPolarScatterSeriesComponent
private polarScatterSeries2: IgcPolarScatterSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var angleAxis = this.angleAxis = document.getElementById('angleAxis') as IgcNumericAngleAxisComponent;
var radiusAxis = this.radiusAxis = document.getElementById('radiusAxis') as IgcNumericRadiusAxisComponent;
var polarScatterSeries1 = this.polarScatterSeries1 = document.getElementById('PolarScatterSeries1') as IgcPolarScatterSeriesComponent;
var polarScatterSeries2 = this.polarScatterSeries2 = document.getElementById('PolarScatterSeries2') as IgcPolarScatterSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
polarScatterSeries1.dataSource = this.boatSailingData;
polarScatterSeries1.angleAxis = this.angleAxis;
polarScatterSeries1.radiusAxis = this.radiusAxis;
polarScatterSeries2.dataSource = this.boatSailingData;
polarScatterSeries2.angleAxis = this.angleAxis;
polarScatterSeries2.radiusAxis = this.radiusAxis;
}
this._bind();
}
private _boatSailingData: BoatSailingData = null;
public get boatSailingData(): BoatSailingData {
if (this._boatSailingData == null)
{
this._boatSailingData = new BoatSailingData();
}
return this._boatSailingData;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Wind Speed vs Boat Speed
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-numeric-angle-axis
name="angleAxis"
id="angleAxis"
start-angle-offset="-90"
interval="30"
minimum-value="0"
maximum-value="360">
</igc-numeric-angle-axis>
<igc-numeric-radius-axis
name="radiusAxis"
id="radiusAxis"
radius-extent-scale="0.9"
inner-radius-extent-scale="0.1"
interval="25"
minimum-value="0"
maximum-value="100">
</igc-numeric-radius-axis>
<igc-polar-scatter-series
name="PolarScatterSeries1"
id="PolarScatterSeries1"
angle-member-path="direction"
radius-member-path="windSpeed"
show-default-tooltip="false"
title="Wind Speed"
marker-type="Circle">
</igc-polar-scatter-series>
<igc-polar-scatter-series
name="PolarScatterSeries2"
id="PolarScatterSeries2"
angle-member-path="direction"
radius-member-path="boatSpeed"
show-default-tooltip="false"
title="Boat Speed"
marker-type="Circle">
</igc-polar-scatter-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
数字半径軸
IgcNumericRadiusAxisComponent
は、データを連続的に変化する数値データ項目として扱います。この軸のラベルは、円形プロットの周りに配置されます。ラベルの位置は、対応する極座標シリーズの AngleMemberPath
プロパティを使用してマップされたデータ列の値によって異なります。
IgcNumericRadiusAxisComponent
を IgcNumericRadiusAxisComponent
と共に使用して、極座標シリーズをプロットできます。
次の例は、IgcNumericRadiusAxisComponent
タイプの使用法を示しています:
export class BoatSailingDataItem {
public constructor(init: Partial<BoatSailingDataItem>) {
Object.assign(this, init);
}
public direction: number;
public boatSpeed: number;
public windSpeed: number;
}
export class BoatSailingData extends Array<BoatSailingDataItem> {
public constructor(items: Array<BoatSailingDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new BoatSailingDataItem(
{
direction: 0,
boatSpeed: 70,
windSpeed: 90
}),
new BoatSailingDataItem(
{
direction: 45,
boatSpeed: 35,
windSpeed: 65
}),
new BoatSailingDataItem(
{
direction: 90,
boatSpeed: 25,
windSpeed: 45
}),
new BoatSailingDataItem(
{
direction: 135,
boatSpeed: 15,
windSpeed: 25
}),
new BoatSailingDataItem(
{
direction: 180,
boatSpeed: 0,
windSpeed: 0
}),
new BoatSailingDataItem(
{
direction: 225,
boatSpeed: 15,
windSpeed: 25
}),
new BoatSailingDataItem(
{
direction: 270,
boatSpeed: 25,
windSpeed: 45
}),
new BoatSailingDataItem(
{
direction: 315,
boatSpeed: 35,
windSpeed: 65
}),
new BoatSailingDataItem(
{
direction: 360,
boatSpeed: 70,
windSpeed: 90
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarLineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartPolarModule,
IgcDataChartPolarCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private angleAxis: IgcNumericAngleAxisComponent
private radiusAxis: IgcNumericRadiusAxisComponent
private polarLineSeries1: IgcPolarLineSeriesComponent
private polarLineSeries2: IgcPolarLineSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var angleAxis = this.angleAxis = document.getElementById('angleAxis') as IgcNumericAngleAxisComponent;
var radiusAxis = this.radiusAxis = document.getElementById('radiusAxis') as IgcNumericRadiusAxisComponent;
var polarLineSeries1 = this.polarLineSeries1 = document.getElementById('PolarLineSeries1') as IgcPolarLineSeriesComponent;
var polarLineSeries2 = this.polarLineSeries2 = document.getElementById('PolarLineSeries2') as IgcPolarLineSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
polarLineSeries1.dataSource = this.boatSailingData;
polarLineSeries1.angleAxis = this.angleAxis;
polarLineSeries1.radiusAxis = this.radiusAxis;
polarLineSeries2.dataSource = this.boatSailingData;
polarLineSeries2.angleAxis = this.angleAxis;
polarLineSeries2.radiusAxis = this.radiusAxis;
}
this._bind();
}
private _boatSailingData: BoatSailingData = null;
public get boatSailingData(): BoatSailingData {
if (this._boatSailingData == null)
{
this._boatSailingData = new BoatSailingData();
}
return this._boatSailingData;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Wind Speed vs Boat Speed
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-numeric-angle-axis
name="angleAxis"
id="angleAxis"
start-angle-offset="-90"
interval="30"
minimum-value="0"
maximum-value="360">
</igc-numeric-angle-axis>
<igc-numeric-radius-axis
name="radiusAxis"
id="radiusAxis"
radius-extent-scale="0.9"
inner-radius-extent-scale="0.1"
interval="25"
minimum-value="0"
maximum-value="100">
</igc-numeric-radius-axis>
<igc-polar-line-series
name="PolarLineSeries1"
id="PolarLineSeries1"
angle-member-path="direction"
radius-member-path="windSpeed"
show-default-tooltip="false"
thickness="1"
title="Wind Speed"
marker-type="Circle">
</igc-polar-line-series>
<igc-polar-line-series
name="PolarLineSeries2"
id="PolarLineSeries2"
angle-member-path="direction"
radius-member-path="boatSpeed"
show-default-tooltip="false"
thickness="1"
title="Boat Speed"
marker-type="Circle">
</igc-polar-line-series>
<igc-data-tool-tip-layer
name="dataToolTipLayer"
id="dataToolTipLayer">
</igc-data-tool-tip-layer>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
その他のリソース
関連するチャート機能の詳細については、次のトピックを参照してください: