Web Components 軸オプション
すべての Ignite UI for Web Components チャートで、軸はタイトル、ラベル、範囲などの視覚的構成のプロパティを提供します。これらの機能は、以下の例で示されています。
軸タイトルの例
Web Components チャートの軸タイトル機能を使用すると、チャートにコンテキスト情報を追加できます。さまざまなフォントスタイル、色、マージン、および配置を適用するなど、さまざまな方法で軸タイトルの外観をカスタマイズできます。
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.dataSource = this.countryRenewableElectricity;
chart.legend = this.legend;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
included-properties="year, europe, china, america"
chart-type="Line"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
computed-plot-area-margin-mode="Series"
x-axis-title="Year"
x-axis-title-text-color="gray"
x-axis-title-text-style="10pt 'Titillium Web'"
x-axis-title-angle="0"
y-axis-title="Trillions of Watt-hours (Twh)"
y-axis-title-text-color="gray"
y-axis-title-text-style="10pt 'Titillium Web'"
y-axis-title-angle="90"
y-axis-title-left-margin="5">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
軸ラベルの例
Web Components チャートは、チャートで表示されるラベルの構成、書式設定、およびラベル フォントのスタイル設定を制御することが可能です。軸ラベルの回転角度、マージン、水平および垂直方向の配置、色、余白、および表示設定を変更できます。次の例は、これらの軸の機能を使用する方法を示しています。
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule,
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private legend: IgcLegendComponent
private propertyEditorPanel1: IgcPropertyEditorPanelComponent
private xAxisLabelAngleEditor: IgcPropertyEditorPropertyDescriptionComponent
private yAxisLabelAngleEditor: IgcPropertyEditorPropertyDescriptionComponent
private xAxisLabelTextColorEditor: IgcPropertyEditorPropertyDescriptionComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
var xAxisLabelAngleEditor = this.xAxisLabelAngleEditor = document.getElementById('XAxisLabelAngleEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var yAxisLabelAngleEditor = this.yAxisLabelAngleEditor = document.getElementById('YAxisLabelAngleEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var xAxisLabelTextColorEditor = this.xAxisLabelTextColorEditor = document.getElementById('XAxisLabelTextColorEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
propertyEditorPanel1.componentRenderer = this.renderer;
propertyEditorPanel1.target = this.chart;
chart.dataSource = this.countryRenewableElectricity;
chart.legend = this.legend;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
LegendDescriptionModule.register(context);
CategoryChartDescriptionModule.register(context);
}
return this._componentRenderer;
}
}
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="options vertical">
<igc-property-editor-panel
description-type="CategoryChart"
is-horizontal="true"
is-wrapping-enabled="true"
name="propertyEditorPanel1"
id="propertyEditorPanel1">
<igc-property-editor-property-description
property-path="XAxisLabelAngle"
name="XAxisLabelAngleEditor"
id="XAxisLabelAngleEditor"
label="X Axis Label Angle"
should-override-default-editor="true"
value-type="EnumValue"
drop-down-names="0, 45, 90, 135, 180, 225, 270"
drop-down-values="0, 45, 90, 135, 180, 225, 270"
primitive-value="0">
</igc-property-editor-property-description>
<igc-property-editor-property-description
property-path="YAxisLabelAngle"
name="YAxisLabelAngleEditor"
id="YAxisLabelAngleEditor"
label="Y Axis Label Angle"
should-override-default-editor="true"
value-type="EnumValue"
drop-down-names="-90, -45, 0, 45, 90"
drop-down-values="-90, -45, 0, 45, 90"
primitive-value="0">
</igc-property-editor-property-description>
<igc-property-editor-property-description
property-path="XAxisLabelTextColor"
name="XAxisLabelTextColorEditor"
id="XAxisLabelTextColorEditor"
label="Y Axis Label Color"
value-type="EnumValue"
should-override-default-editor="true"
drop-down-names="red, green"
drop-down-values="red, green"
primitive-value="red">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
included-properties="year, europe, china, america"
chart-type="Line"
computed-plot-area-margin-mode="Series"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
top-margin="20"
x-axis-label-angle="0"
x-axis-label-text-color="gray"
x-axis-label-text-style="10pt 'Titillium Web'"
x-axis-label-top-margin="5"
y-axis-label-angle="0"
y-axis-label-text-color="gray"
y-axis-label-text-style="10pt 'Titillium Web'"
y-axis-label-right-margin="5"
y-axis-label-location="OutsideRight"
title-top-margin="10">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
軸ラベルの管理と書式設定
チャートの軸には、所有する軸のラベルに使用可能なスペースの量に関する拡張計算を実行する機能があります。この拡張された計算により、軸は、指定された軸に対してより多くのラベルを表示するために、指定されたスペースの量を最適化できます。
この拡張された計算は、オプトインする必要があるものです。これは、useEnhancedIntervalManagement プロパティを true に設定することで実行できます。次に、軸の interval プロパティを手動で設定せずに、軸のディメンションに収まるだけの数のラベルを表示したい場合は、軸の enhancedIntervalPreferMoreCategoryLabels プロパティを true に設定できます。
チャートには、ラベルが割り当てられたスペースに収まらない場合にラベルの自動回転を考慮する機能と、ラベルが収まるようにプロット領域に自動マージンを適用する機能もあります。これは、最初にチャートの autoMarginAndAngleUpdateMode プロパティを SizeChanging または SizeChangingAndZoom に設定することで最初にオプトインできるものです。これにより、必要に応じて、ラベルに適用された自動マージンと角度をいつ再評価するかがチャートに通知されます。
autoMarginAndAngleUpdateMode を設定した後、shouldAutoExpandMarginForInitialLabels プロパティを true に設定して自動マージンをオプトインするか shouldConsiderAutoRotationForInitialLabels プロパティを true に設定して自動回転を行うことができます。autoExpandMarginExtraPadding と autoExpandMarginMaximumValue を設して、それぞれ追加のスペースまたは可能な最大マージンを提供することにより、適用される自動マージンをさらにカスタマイズすることもできます。
IgcNumberFormatSpecifier や IgcDateTimeFormatSpecifier などのカスタム ラベル書式は、XAxisLabelFormatSpecifier および YAxisLabelFormatSpecifier コレクションを介して各軸に追加できます。一般に、Intl.NumberFormat および Intl.DateTimeFormat の言語に依存した数値、日付、時刻の書式設定を適用するために使用されます。ラベルにカスタム書式を適用するには、yAxisLabelFormat または xAxisLabelFormat を IgcCategoryChartComponent のデータ項目のプロパティ名 (例: {Date}) に設定する必要があります。IgcFinancialChartComponent の場合、数値軸を使用するため、数値がコンテキストとなり、これを {0} に設定する必要があります。
次の例では、yAxis を IgcNumberFormatSpecifier でフォーマットして、米国のトップ興行収入映画の $USD 価格を表します。
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 { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcDataLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcNumberFormatSpecifierModule } from 'igniteui-webcomponents-core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataLegendDescriptionModule, CategoryChartDescriptionModule, NumberFormatSpecifierDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcDataLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { IgcNumberFormatSpecifier } from 'igniteui-webcomponents-core';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule,
IgcDataLegendModule,
IgcCategoryChartModule,
IgcNumberFormatSpecifierModule
);
export class Sample {
private legend: IgcDataLegendComponent
private _numberFormatSpecifier1: IgcNumberFormatSpecifier[] | null = null;
public get numberFormatSpecifier1(): IgcNumberFormatSpecifier[] {
if (this._numberFormatSpecifier1 == null)
{
let numberFormatSpecifier1: IgcNumberFormatSpecifier[] = [];
var numberFormatSpecifier2 = new IgcNumberFormatSpecifier();
numberFormatSpecifier2.style = "currency";
numberFormatSpecifier2.currency = "USD";
numberFormatSpecifier2.currencyDisplay = "symbol";
numberFormatSpecifier2.maximumFractionDigits = 2;
numberFormatSpecifier2.minimumFractionDigits = 2;
numberFormatSpecifier1.push(numberFormatSpecifier2)
this._numberFormatSpecifier1 = numberFormatSpecifier1;
}
return this._numberFormatSpecifier1;
}
private chart: IgcCategoryChartComponent
private _numberFormatSpecifier3: IgcNumberFormatSpecifier[] | null = null;
public get numberFormatSpecifier3(): IgcNumberFormatSpecifier[] {
if (this._numberFormatSpecifier3 == null)
{
let numberFormatSpecifier3: IgcNumberFormatSpecifier[] = [];
var numberFormatSpecifier4 = new IgcNumberFormatSpecifier();
numberFormatSpecifier4.style = "currency";
numberFormatSpecifier4.currency = "USD";
numberFormatSpecifier4.currencyDisplay = "symbol";
numberFormatSpecifier4.maximumFractionDigits = 2;
numberFormatSpecifier4.minimumFractionDigits = 2;
numberFormatSpecifier3.push(numberFormatSpecifier4)
this._numberFormatSpecifier3 = numberFormatSpecifier3;
}
return this._numberFormatSpecifier3;
}
private _numberFormatSpecifier5: IgcNumberFormatSpecifier[] | null = null;
public get numberFormatSpecifier5(): IgcNumberFormatSpecifier[] {
if (this._numberFormatSpecifier5 == null)
{
let numberFormatSpecifier5: IgcNumberFormatSpecifier[] = [];
var numberFormatSpecifier6 = new IgcNumberFormatSpecifier();
numberFormatSpecifier6.style = "currency";
numberFormatSpecifier6.currency = "USD";
numberFormatSpecifier6.currencyDisplay = "symbol";
numberFormatSpecifier6.minimumFractionDigits = 0;
numberFormatSpecifier5.push(numberFormatSpecifier6)
this._numberFormatSpecifier5 = numberFormatSpecifier5;
}
return this._numberFormatSpecifier5;
}
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcDataLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
legend.target = this.chart;
legend.valueFormatSpecifiers = this.numberFormatSpecifier1;
chart.dataSource = this.highestGrossingMovies;
chart.dataToolTipValueFormatSpecifiers = this.numberFormatSpecifier3;
chart.yAxisLabelFormatSpecifiers = this.numberFormatSpecifier5;
}
this._bind();
}
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
DataLegendDescriptionModule.register(context);
CategoryChartDescriptionModule.register(context);
NumberFormatSpecifierDescriptionModule.register(context);
}
return this._componentRenderer;
}
}
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-data-legend
name="legend"
id="legend"
value-format-string="{0} Billion">
</igc-data-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Column"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
final-value-annotations-precision="2"
data-tool-tip-value-format-string="{0} Billion"
y-axis-label-format="{0}B">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
軸範囲の例
チャートでは数値軸または時間軸の範囲の最小値と最大値を定義できます。範囲の最小値は軸の最小値で、範囲の最大値は軸の最大値です。これらは、yAxisMinimumValue および yAxisMaximumValue オプションを設定することによって設定されます。
既定では、Web Components チャートは、データ内の対応する最小値と最大値に基づいて、数値と時間軸の範囲の最小値と最大値を計算しますが、この自動計算は、データセットには適していません。たとえば、データの最小値が 850 の場合、yAxisMinimumValue を 800 に設定してください。これにより、軸の最小値とデータ ポイントの最小値の間に 50 のスペース値ができます。yAxisMaximumValue プロパティを使用して、同じ方法を軸の最小値と最大値に適用することができます。
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import { MarkerType, MarkerType_$type } from 'igniteui-webcomponents-charts';
import { EnumUtil } from 'igniteui-webcomponents-core';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule,
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private legend: IgcLegendComponent
private propertyEditorPanel1: IgcPropertyEditorPanelComponent
private yAxisMinimumValue: IgcPropertyEditorPropertyDescriptionComponent
private yAxisMaximumValue: IgcPropertyEditorPropertyDescriptionComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
var yAxisMinimumValue = this.yAxisMinimumValue = document.getElementById('YAxisMinimumValue') as IgcPropertyEditorPropertyDescriptionComponent;
this.editorChangeUpdateYAxisMinimumValue = this.editorChangeUpdateYAxisMinimumValue.bind(this);
var yAxisMaximumValue = this.yAxisMaximumValue = document.getElementById('YAxisMaximumValue') as IgcPropertyEditorPropertyDescriptionComponent;
this.editorChangeUpdateYAxisMaximumValue = this.editorChangeUpdateYAxisMaximumValue.bind(this);
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
propertyEditorPanel1.componentRenderer = this.renderer;
propertyEditorPanel1.target = this.chart;
yAxisMinimumValue.changed = this.editorChangeUpdateYAxisMinimumValue;
yAxisMaximumValue.changed = this.editorChangeUpdateYAxisMaximumValue;
chart.dataSource = this.countryRenewableElectricity;
chart.legend = this.legend;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
LegendDescriptionModule.register(context);
CategoryChartDescriptionModule.register(context);
}
return this._componentRenderer;
}
public editorChangeUpdateYAxisMinimumValue(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
var yAxisMinimumVal = args.newValue;
this.chart.yAxisMinimumValue = parseInt(yAxisMinimumVal);
}
public editorChangeUpdateYAxisMaximumValue(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
var yAxisMaximumVal = args.newValue;
this.chart.yAxisMaximumValue = parseInt(yAxisMaximumVal);
}
}
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="options vertical">
<igc-property-editor-panel
description-type="CategoryChart"
is-horizontal="true"
is-wrapping-enabled="true"
name="propertyEditorPanel1"
id="propertyEditorPanel1">
<igc-property-editor-property-description
property-path="YAxisMinimumValueHandler"
name="YAxisMinimumValue"
id="YAxisMinimumValue"
label="Y Axis Minimum Value"
should-override-default-editor="true"
value-type="EnumValue"
drop-down-names="0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100"
drop-down-values="0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100"
primitive-value="0">
</igc-property-editor-property-description>
<igc-property-editor-property-description
property-path="YAxisMaximumValueHandler"
name="YAxisMaximumValue"
id="YAxisMaximumValue"
label="Y Axis Maximum Value"
should-override-default-editor="true"
value-type="EnumValue"
drop-down-names="100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200"
drop-down-values="100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200"
primitive-value="150">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="legend-title">
Highest Grossing Movie Franchises
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
included-properties="year, europe, china, america"
chart-type="Line"
computed-plot-area-margin-mode="Series"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
y-axis-minimum-value="0"
y-axis-maximum-value="150">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
軸モードとスケール
IgcFinancialChartComponent および IgcCategoryChartComponent コントロールでは、yAxisIsLogarithmic プロパティが true に設定されている場合はデータを Y 軸に沿って対数スケールでプロットするか、このプロパティが false (デフォルト価値) に設定されている場合は線形スケールでプロットするかを選択できます。
yAxisLogarithmBase プロパティを使用すると、対数スケールのベースをデフォルト値の 10 から他の整数値に変更できます。IgcFinancialChartComponent とコントロールを使用すると、Numeric モードと PercentChange モードを提供する yAxisMode プロパティを使用して、Y 軸に沿ってデータをどのように表現するかを選択できます。Numeric モードは正確な値でデータをプロットし、PercentChange モードは提供された最初のデータ ポイントに対する変化率としてデータを表示します。デフォルト値は Numeric モードです。
yAxisMode プロパティに加えて、IgcFinancialChartComponent コントロールには X 軸に Time モードと Ordinal モードを提供する xAxisMode プロパティがあります。Time モードはデータのギャップを X 軸にスペースを用いて描画します。つまり、週末または休日に株取引がないことを示します。Ordinal モードはデータがない日付領域を縮小します。デフォルト値は Ordinal モードです。
export class StocksUtility {
public static priceStart: number = 200;
public static priceRange: number = 1;
public static volumeRange: number = 1000;
public static volumeStart: number = 20000000;
public static getStocksFrom(dateEnd: Date, years: number): any {
const dateStart: Date = this.addYears(dateEnd, -years);
return this.getStocksBetween(dateStart, dateEnd, true);
}
public static getStocksItems(points: number, intervalMinutes?: number): any {
if (intervalMinutes === undefined || intervalMinutes <= 0) {
intervalMinutes = 60;
}
const today: Date = new Date();
const year: number = today.getFullYear();
const dateEnd: Date = new Date(year, 11, 1);
const dateStart: Date = this.addHours(dateEnd, -points);
return this.getStocksBetween(dateStart, dateEnd, false, intervalMinutes);
}
// generates stocks data for specified number of months, with each item separated by specified interval in minutes
public static getStocksForMonths(rangeInMonths?: number, intervalMinutes?: number, stockName?: string): any {
if (rangeInMonths === undefined) {
rangeInMonths = 6;
}
const dateEnd: Date = new Date();
const dateStart: Date = this.addMonths(dateEnd, -rangeInMonths);
return this.getStocksBetween(dateStart, dateEnd, true, intervalMinutes, stockName);
}
public static getStocksBetween(dateStart: Date, dateEnd: Date, useRounding?:
boolean, intervalMinutes?: number, stockName?: string): any {
if (intervalMinutes === undefined || intervalMinutes <= 0) {
intervalMinutes = 60;
}
let time: Date = this.addDays(dateStart, 0);
let v: number = this.volumeStart;
let o: number = this.priceStart;
let h: number = o + (Math.random() * this.priceRange);
let l: number = o - (Math.random() * this.priceRange);
let c: number = l + (Math.random() * (h - l));
const stock: any[] = [];
while (time.getTime() < dateEnd.getTime()) {
stock.push({ date: time, open: o, high: h, low: l, close: c, volume: v });
o = c + ((Math.random() - 0.5) * this.priceRange);
if (o < 0) {
o = Math.abs(o) + 10;
}
h = o + (Math.random() * this.priceRange);
l = o - (Math.random() * this.priceRange);
c = l + (Math.random() * (h - l));
v = v + ((Math.random() - 0.5) * this.volumeRange);
if (v < 0) {
v = Math.abs(v) + 10000;
}
if (useRounding === undefined || useRounding) {
o = Math.round(o * 100) / 100;
h = Math.round(h * 100) / 100;
l = Math.round(l * 100) / 100;
c = Math.round(c * 100) / 100;
v = Math.round(v * 100) / 100;
}
time = this.addMinutes(time, intervalMinutes);
}
if (stockName === undefined) {
stockName = "Stock Prices";
}
// setting data intent for Series Title
(stock as any).__dataIntents = {
close: ["SeriesTitle/" + stockName]
};
// console.log("start " + this.ToString(dateStart));
// console.log("end " + this.ToString(dateEnd));
console.log("stocks " + stock.length);
return stock;
}
public static addMinutes(date: Date, minutes: number): Date {
return new Date(date.getTime() + minutes * 60 * 1000);
}
public static addHours(date: Date, hours: number): Date {
return this.addMinutes(date, hours * 60);
}
public static addDays(date: Date, days: number): Date {
return this.addHours(date, days * 24);
}
public static addMonths(date: Date, months: number): Date {
return this.addDays(date, 31 * months);
}
public static addYears(date: Date, years: number): Date {
return new Date(date.getFullYear() + years, date.getMonth(), date.getDate());
}
public static toShortString(largeValue: number): string {
let roundValue: number;
if (largeValue >= 1000000) {
roundValue = Math.round(largeValue / 100000) / 10;
return roundValue + "M";
}
if (largeValue >= 1000) {
roundValue = Math.round(largeValue / 100) / 10;
return roundValue + "K";
}
roundValue = Math.round(largeValue);
return roundValue + "";
}
public static getYear(date: Date): number {
return date.getFullYear();
}
public static getQuarter(date: Date): number {
return Math.round((date.getMonth() + 2) / 3);
}
public static getLastItem(array: any[]): any {
if (array.length === 0) {
return null;
}
return array[array.length - 1];
}
public static getNewItem(array: any[], interval?: number): any {
const lastItem: any = this.getLastItem(array);
if (interval === undefined || interval <= 0) {
interval = 60;
}
const time: Date = this.addMinutes(lastItem.date, interval);
let v: number = lastItem.volume;
let o: number = lastItem.open;
let h: number = lastItem.high;
let l: number = lastItem.low;
let c: number = lastItem.close;
o = c + ((Math.random() - 0.5) * this.priceRange);
if (o < 0) {
o = Math.abs(o) + 2;
}
h = o + (Math.random() * this.priceRange);
l = o - (Math.random() * this.priceRange);
c = l + (Math.random() * (h - l));
v = v + ((Math.random() - 0.5) * this.volumeRange);
if (v < 0) {
v = Math.abs(v) + 10000;
}
return { date: time, open: o, high: h, low: l, close: c, volume: v };
}
public static toString(date: Date): string {
const months: string[] = [
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
const index: number = date.getMonth();
return months[index] + " " + date.getDay() + " " + date.getFullYear();
}
}
tsimport { IgcFinancialChartModule } from 'igniteui-webcomponents-charts';
import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
import { FinancialChartXAxisMode } from 'igniteui-webcomponents-charts';
import { FinancialChartYAxisMode } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { StocksUtility } from './StocksUtility';
ModuleManager.register(IgcFinancialChartModule);
export class FinancialChartAxisTypes {
private chart: IgcFinancialChartComponent;
private xAxisMode = FinancialChartXAxisMode.Ordinal;
private yAxisMode = FinancialChartYAxisMode.Numeric;
private yAxisIsLogarithmic = false;
constructor() {
this.chart = document.getElementById('chart') as IgcFinancialChartComponent;
this.chart.dataSource = this.initData();
this.chart.xAxisMode = this.xAxisMode;
this.chart.yAxisMode = this.yAxisMode;
this.chart.yAxisIsLogarithmic = this.yAxisIsLogarithmic;
let xAxisSelect = <HTMLSelectElement>document.getElementById('xAxisSelect');
xAxisSelect!.addEventListener('change', this.onXAxisModeChanged);
xAxisSelect!.value = "Ordinal";
let yAxisSelect = <HTMLSelectElement>document.getElementById('yAxisSelect');
yAxisSelect!.addEventListener('change', this.onYAxisModeChanged);
yAxisSelect!.value = "Numeric";
let yAxisIsLogarithmicSelect = document.getElementById('yAxisIsLogarithmicSelect');
yAxisIsLogarithmicSelect!.addEventListener('change', this.onYAxisIsLogarithmicChanged);
}
public onXAxisModeChanged = (e: any) => {
const mode: string = e.target.value;
if (mode === 'Time') {
this.xAxisMode = FinancialChartXAxisMode.Time;
} else if (mode === 'Ordinal') {
this.xAxisMode = FinancialChartXAxisMode.Ordinal;
}
this.chart.xAxisMode = this.xAxisMode;
}
public onYAxisModeChanged = (e: any) => {
const mode: string = e.target.value;
if (mode === 'PercentChange') {
this.yAxisMode = FinancialChartYAxisMode.PercentChange;
} else if (mode === 'Numeric') {
this.yAxisMode = FinancialChartYAxisMode.Numeric;
}
this.chart.yAxisMode = this.yAxisMode;
}
public onYAxisIsLogarithmicChanged = (e: any) => {
this.yAxisIsLogarithmic = e.target.checked;
this.chart.yAxisIsLogarithmic = this.yAxisIsLogarithmic;
}
initData(): any[] {
return StocksUtility.getStocksForMonths(12);
}
}
new FinancialChartAxisTypes();
ts<!DOCTYPE html>
<html>
<head>
<title>FinancialChartAxisTypes</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">X-Axis Mode:</label>
<select id="xAxisSelect">
<option>Time</option>
<option>Ordinal</option>
</select>
<label class="options-label">Y-Axis Mode:</label>
<select id="yAxisSelect">
<option>PercentChange</option>
<option>Numeric</option>
</select>
<label class="options-label">
<input id="yAxisIsLogarithmicSelect" type="checkbox"></input> Y-Axis-IsLogarithmic
</label>
</div>
<div class="container" style="height: calc(100% - 3rem)">
<igc-financial-chart id="chart" width="100%" height="100%"
chart-type="Line"
thickness="2">
</igc-financial-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 チャートの xAxisGap プロパティは、プロットされた系列の縦棒または棒間のスペースの量を決定します。このプロパティは、0.0 から 1.0 までの数値を受け入れます。値は、シリーズ間の利用可能なピクセル数からのギャップの相対幅を表します。このプロパティを 0 に設定すると、シリーズ間にギャップがレンダリングされず、1 に設定すると最大ギャップがレンダリングされます。
Web Components チャートの xAxisMaximumGap プロパティは、許可される最大ギャップ値を決定します。このデフォルトは 1.0 に設定されていますが、xAxisGap の設定に応じて変更できます。
Web Components チャートの xAxisMinimumGapSize プロパティは、可能であれば、カテゴリ間のギャップに使用する最小のピクセル数を決定します。
以下の例は、ニューヨーク市のセントラル パークの摂氏の平均最高気温を示しています。これは、xAxisGap が最初に 1 に設定された縦棒チャートで表されているため、列の間にカテゴリ全体の幅があります。スライダーを使用すると、この例のギャップを構成して、さまざまな値の効果を確認できます。
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule,
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private propertyEditorPanel1: IgcPropertyEditorPanelComponent
private xAxisGap: IgcPropertyEditorPropertyDescriptionComponent
private xAxisMaximumGap: IgcPropertyEditorPropertyDescriptionComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
var xAxisGap = this.xAxisGap = document.getElementById('XAxisGap') as IgcPropertyEditorPropertyDescriptionComponent;
var xAxisMaximumGap = this.xAxisMaximumGap = document.getElementById('XAxisMaximumGap') as IgcPropertyEditorPropertyDescriptionComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
propertyEditorPanel1.componentRenderer = this.renderer;
propertyEditorPanel1.target = this.chart;
chart.dataSource = this.countryRenewableElectricity;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
LegendDescriptionModule.register(context);
CategoryChartDescriptionModule.register(context);
}
return this._componentRenderer;
}
}
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="options vertical">
<igc-property-editor-panel
description-type="CategoryChart"
is-horizontal="true"
is-wrapping-enabled="true"
name="propertyEditorPanel1"
id="propertyEditorPanel1">
<igc-property-editor-property-description
property-path="XAxisGap"
name="XAxisGap"
id="XAxisGap"
label="X Axis - Gap"
should-override-default-editor="true"
value-type="Slider"
primitive-value="0.5"
min="0"
max="1.5"
step="0.1">
</igc-property-editor-property-description>
<igc-property-editor-property-description
property-path="XAxisMaximumGap"
name="XAxisMaximumGap"
id="XAxisMaximumGap"
label="Maximum Gap"
should-override-default-editor="true"
value-type="EnumValue"
drop-down-names="1.5, 1.3, 1.0, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0"
drop-down-values="1.5, 1.3, 1.0, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0"
primitive-value="0.5">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
included-properties="year, europe, china, america"
chart-type="Column"
crosshairs-snap-to-data="true"
y-axis-title="TWh"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
x-axis-interval="1"
x-axis-gap="0.5"
x-axis-maximum-gap="1.5">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
軸重複の例
Web Components チャートの xAxisOverlap プロパティを使用すると、プロットされた系列の描画された縦棒または棒の重複を設定できます。このプロパティは、-1.0 から 1.0 までの数値を受け入れます。値は、各シリーズ専用の使用可能なピクセル数からの相対的な重なりを表します。このプロパティを負の値 (-1.0 まで) に設定すると、カテゴリが互いから離れてしまい、それらの間にギャップが生じます。逆に、このプロパティを正の値 (最大 1.0) に設定すると、カテゴリが互いに重なります。値が 1 の場合、チャートはカテゴリを互いの上に表示します。
以下の例は、フランチャイズの世界の興行収入の合計とシリーズで最も収益の高い映画を比較した、世界で最も収益の高い映画フランチャイズの比較を示しています。これは、xAxisOverlap が最初に 1 に設定された縦棒チャートで表されており、列は完全に重なり合います。スライダーを使用すると、この例の重複を構成して、さまざまな値の効果を確認できます。
export class HighestGrossingMoviesItem {
public constructor(init: Partial<HighestGrossingMoviesItem>) {
Object.assign(this, init);
}
public franchise: string;
public totalRevenue: number;
public highestGrossing: number;
}
export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
public constructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HighestGrossingMoviesItem(
{
franchise: `Marvel Universe`,
totalRevenue: 22.55,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Star Wars`,
totalRevenue: 10.32,
highestGrossing: 2.07
}),
new HighestGrossingMoviesItem(
{
franchise: `Harry Potter`,
totalRevenue: 9.19,
highestGrossing: 1.34
}),
new HighestGrossingMoviesItem(
{
franchise: `Avengers`,
totalRevenue: 7.76,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Spider Man`,
totalRevenue: 7.22,
highestGrossing: 1.28
}),
new HighestGrossingMoviesItem(
{
franchise: `James Bond`,
totalRevenue: 7.12,
highestGrossing: 1.11
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule,
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private legend: IgcLegendComponent
private propertyEditorPanel1: IgcPropertyEditorPanelComponent
private xAxisOverlap: IgcPropertyEditorPropertyDescriptionComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
var xAxisOverlap = this.xAxisOverlap = document.getElementById('XAxisOverlap') as IgcPropertyEditorPropertyDescriptionComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
propertyEditorPanel1.componentRenderer = this.renderer;
propertyEditorPanel1.target = this.chart;
chart.dataSource = this.highestGrossingMovies;
}
this._bind();
}
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
LegendDescriptionModule.register(context);
CategoryChartDescriptionModule.register(context);
}
return this._componentRenderer;
}
}
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="options vertical">
<igc-property-editor-panel
description-type="CategoryChart"
is-horizontal="true"
is-wrapping-enabled="true"
name="propertyEditorPanel1"
id="propertyEditorPanel1">
<igc-property-editor-property-description
property-path="XAxisOverlap"
name="XAxisOverlap"
id="XAxisOverlap"
label="X Axis - Overlap"
should-override-default-editor="true"
value-type="Slider"
min="0"
max="1"
step="0.1"
primitive-value="0">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="legend-title">
Highest Grossing Movie Franchises
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Column"
crosshairs-snap-to-data="true"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
x-axis-interval="1"
x-axis-overlap="1">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
その他のリソース
関連するチャート機能の詳細については、以下のトピックを参照してください。
API リファレンス
以下は、上記のセクションで説明した API メンバーのリストです。