React 縦棒チャート
Ignite UI for React 縦棒チャート、縦棒グラフ、または垂直棒チャートは、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、幅は同じで高さが異なる縦棒でエンコードされたデータによってすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらの縦棒は、チャートの下から上へデータ ポイント値に向かって伸びています。縦棒チャートは棒チャートと非常によく似ていますが、縦棒チャートは垂直方向 (上下) で描画され、棒チャートは水平方向 (左から右) または時計回りに 90 度回転します。
React 縦棒チャートの例
次の例に示すように、データをバインドし、chartType
を Column 列挙型に設定することで、IgrCategoryChart
コントロールに React 縦棒チャートを作成できます。
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 React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLegendModule, IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
const mods: any[] = [
IgrLegendModule,
IgrCategoryChartModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrLegend
private legendRef(r: IgrLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrCategoryChart
private chartRef(r: IgrCategoryChart) {
this.chart = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.legendRef = this.legendRef.bind(this);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Highest Grossing Movie Franchises
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrCategoryChart
ref={this.chartRef}
chartType="Column"
dataSource={this.highestGrossingMovies}
legend={this.legend}
xAxisInterval="1"
yAxisTitle="Billions of U.S. Dollars"
yAxisTitleLeftMargin="10"
yAxisTitleRightMargin="5"
yAxisLabelLeftMargin="0"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
isCategoryHighlightingEnabled="true"
crosshairsDisplayMode="None">
</IgrCategoryChart>
</div>
</div>
);
}
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
縦棒チャートの推奨事項
縦棒チャートのユース ケース
縦棒チャートにはいくつかのユース ケースがあります:
- 関連するカテゴリのデータ値を比較する必要がある場合。
- 一定期間のデータを比較する必要がある場合。
- 同じデータ セットに正の値だけでなく負の値も表示する必要がある場合。
- パン、ズーム、ドリルダウンなどのチャート操作に適した大容量のデータセットを使用する場合。
縦棒チャートのベスト プラクティス:
- データ比較が正確になるように Y 軸 (左軸または右軸) を常に 0 から開始する。
- 時系列データを左から右へ並べ替える。
以下の場合に縦棒チャートを使用しないでください:
- 多くの (10 または 12 以上) シリーズのデータがある場合。チャートが読みやすいことを確認する必要があります。
縦棒チャートのデータ構造:
- データ モデルには少なくとも 1 つの数値プロパティを含む必要があります。
- データ モデルにはラベルのためのオプションの文字列または日時プロパティを含むことができます。
- データ ソースに少なくとも 1 つのデータ項目を含む必要があります。
単一シリーズの React 縦棒チャート
縦棒シリーズは、カテゴリ シリーズのグループに属し、チャートの下から上へデータ ポイント値に向かって延びる四角形のコレクションを使用して描画されます。
IgrCategoryChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、chartType
プロパティを Column 値に設定します:
export class TemperatureAverageDataItem {
public constructor(init: Partial<TemperatureAverageDataItem>) {
Object.assign(this, init);
}
public month: string;
public temperature: number;
}
export class TemperatureAverageData extends Array<TemperatureAverageDataItem> {
public constructor(items: Array<TemperatureAverageDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new TemperatureAverageDataItem(
{
month: `Jan`,
temperature: 3
}),
new TemperatureAverageDataItem(
{
month: `Feb`,
temperature: 4
}),
new TemperatureAverageDataItem(
{
month: `Mar`,
temperature: 9
}),
new TemperatureAverageDataItem(
{
month: `Apr`,
temperature: 15
}),
new TemperatureAverageDataItem(
{
month: `May`,
temperature: 21
}),
new TemperatureAverageDataItem(
{
month: `Jun`,
temperature: 26
}),
new TemperatureAverageDataItem(
{
month: `Jul`,
temperature: 29
}),
new TemperatureAverageDataItem(
{
month: `Aug`,
temperature: 28
}),
new TemperatureAverageDataItem(
{
month: `Sep`,
temperature: 24
}),
new TemperatureAverageDataItem(
{
month: `Oct`,
temperature: 18
}),
new TemperatureAverageDataItem(
{
month: `Nov`,
temperature: 11
}),
new TemperatureAverageDataItem(
{
month: `Dec`,
temperature: 5
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { TemperatureAverageDataItem, TemperatureAverageData } from './TemperatureAverageData';
const mods: any[] = [
IgrCategoryChartModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private chart: IgrCategoryChart
private chartRef(r: IgrCategoryChart) {
this.chart = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Average Temperature Range in New York
</div>
<div className="container fill">
<IgrCategoryChart
ref={this.chartRef}
chartType="Column"
dataSource={this.temperatureAverageData}
yAxisTitle="Temperature in Degrees Celsius"
yAxisTitleLeftMargin="10"
yAxisTitleRightMargin="5"
yAxisLabelLeftMargin="0"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
isCategoryHighlightingEnabled="true"
highlightingMode="FadeOthersSpecific"
highlightingBehavior="NearestItemsAndSeries"
crosshairsDisplayMode="None">
</IgrCategoryChart>
</div>
</div>
);
}
private _temperatureAverageData: TemperatureAverageData = null;
public get temperatureAverageData(): TemperatureAverageData {
if (this._temperatureAverageData == null)
{
this._temperatureAverageData = new TemperatureAverageData();
}
return this._temperatureAverageData;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
複数シリーズの React 縦棒チャート
縦棒チャートは、比較のためにカテゴリごとに複数の列を描画できます。IgrCategoryChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、chartType
プロパティを Column 値に設定します:
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 React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLegendModule, IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
const mods: any[] = [
IgrLegendModule,
IgrCategoryChartModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrLegend
private legendRef(r: IgrLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrCategoryChart
private chartRef(r: IgrCategoryChart) {
this.chart = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.legendRef = this.legendRef.bind(this);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Highest Grossing Movie Franchises
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrCategoryChart
ref={this.chartRef}
chartType="Column"
dataSource={this.highestGrossingMovies}
legend={this.legend}
xAxisInterval="1"
yAxisTitle="Billions of U.S. Dollars"
yAxisTitleLeftMargin="10"
yAxisTitleRightMargin="5"
yAxisLabelLeftMargin="0"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
isCategoryHighlightingEnabled="true"
crosshairsDisplayMode="None">
</IgrCategoryChart>
</div>
</div>
);
}
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
React 縦棒チャートのスタイル設定
React 縦棒チャートには、外観のスタイル設定と変更のための多くのオプションがあります。
IgrCategoryChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドします:
export class EnergyRenewableConsumptionItem {
public constructor(init: Partial<EnergyRenewableConsumptionItem>) {
Object.assign(this, init);
}
public location: string;
public year: number;
public hydro: number;
public solar: number;
public wind: number;
public other: number;
}
export class EnergyRenewableConsumption extends Array<EnergyRenewableConsumptionItem> {
public constructor(items: Array<EnergyRenewableConsumptionItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EnergyRenewableConsumptionItem(
{
location: `China`,
year: 2019,
hydro: 1269.5,
solar: 223,
wind: 405.2,
other: 102.8
}),
new EnergyRenewableConsumptionItem(
{
location: `Europe`,
year: 2019,
hydro: 632.54,
solar: 154,
wind: 461.3,
other: 220.3
}),
new EnergyRenewableConsumptionItem(
{
location: `USA`,
year: 2019,
hydro: 271.16,
solar: 108,
wind: 303.4,
other: 78.34
}),
new EnergyRenewableConsumptionItem(
{
location: `Brazil`,
year: 2019,
hydro: 399.3,
solar: 5.5,
wind: 55.83,
other: 56.25
}),
new EnergyRenewableConsumptionItem(
{
location: `Canada`,
year: 2019,
hydro: 381.98,
solar: 4.3,
wind: 34.17,
other: 10.81
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLegendModule, IgrCategoryChartModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrCategoryChart } from "@infragistics/igniteui-react-charts";
import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
const mods: any[] = [
IgrLegendModule,
IgrCategoryChartModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrLegend
private legendRef(r: IgrLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrCategoryChart
private chartRef(r: IgrCategoryChart) {
this.chart = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.legendRef = this.legendRef.bind(this);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Percentage Change in Energy Generation
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrCategoryChart
ref={this.chartRef}
dataSource={this.energyRenewableConsumption}
chartType="Column"
legend={this.legend}
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
isSeriesHighlightingEnabled="true"
brushes="rgba(157, 231, 114, 1) rgba(139, 91, 177, 1) rgba(109, 177, 255, 1) rgba(238, 88, 121, 1) rgba(248, 161, 95, 1)"
outlines="white"
xAxisMajorStroke="lightgray"
xAxisGap="0.5"
crosshairsDisplayMode="None"
isCategoryHighlightingEnabled="true"
highlightingMode="FadeOthersSpecific"
highlightingBehavior="NearestItemsAndSeries">
</IgrCategoryChart>
</div>
</div>
);
}
private _energyRenewableConsumption: EnergyRenewableConsumption = null;
public get energyRenewableConsumption(): EnergyRenewableConsumption {
if (this._energyRenewableConsumption == null)
{
this._energyRenewableConsumption = new EnergyRenewableConsumption();
}
return this._energyRenewableConsumption;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
高度なタイプの縦棒チャート
次のセクションでは、簡略化された API を使用した IgrCategoryChart
コントロールの代わりに IgrDataChart
コントロールを使用して作成できる、より高度なタイプの React 縦棒チャートについて説明します。
React ウォーターフォール チャート
ウォーターフォール チャートはカテゴリ チャートのグループに属し、連続するデータポイント間の差を示す垂直列のコレクションを使用して描画されます。値の正/負の変化を区別するため、列は色分けされます。ウォーターフォール チャートは、外観が範囲縦棒チャートに似ていますが、各データ ポイントに必要な数値データ列は 2 つでなく 1 つのみです。
IgrDataChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgrWaterfallSeries
にバインドします:
export class CompanyIncomeDataItem {
public constructor(init: Partial<CompanyIncomeDataItem>) {
Object.assign(this, init);
}
public costs: number;
public netIncome: number;
public category: string;
}
export class CompanyIncomeData extends Array<CompanyIncomeDataItem> {
public constructor(items: Array<CompanyIncomeDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CompanyIncomeDataItem(
{
costs: 55,
netIncome: null,
category: `Revenue`
}),
new CompanyIncomeDataItem(
{
costs: 45,
netIncome: null,
category: `Expenses`
}),
new CompanyIncomeDataItem(
{
costs: 35,
netIncome: null,
category: `Research`
}),
new CompanyIncomeDataItem(
{
costs: 28,
netIncome: null,
category: `Marketing`
}),
new CompanyIncomeDataItem(
{
costs: 25,
netIncome: null,
category: `Administration`
}),
new CompanyIncomeDataItem(
{
costs: 55,
netIncome: null,
category: `Total Costs`
}),
new CompanyIncomeDataItem(
{
costs: 0,
netIncome: 25,
category: `Net Income`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDataChartCoreModule, IgrDataChartCategoryModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrWaterfallSeries } from "@infragistics/igniteui-react-charts";
import { CompanyIncomeDataItem, CompanyIncomeData } from './CompanyIncomeData';
const mods: any[] = [
IgrDataChartCoreModule,
IgrDataChartCategoryModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private chart: IgrDataChart
private chartRef(r: IgrDataChart) {
this.chart = r;
this.setState({});
}
private xAxis: IgrCategoryXAxis
private yAxis: IgrNumericYAxis
private waterfallSeries1: IgrWaterfallSeries
private waterfallSeries2: IgrWaterfallSeries
constructor(props: any) {
super(props);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Facebook Consolidated Statements of Income
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false">
<IgrCategoryXAxis
name="xAxis"
label="category"
interval="1"
dataSource={this.companyIncomeData}
overlap="1">
</IgrCategoryXAxis>
<IgrNumericYAxis
name="yAxis"
title="Millions of Dollars"
titleAngle="90"
titleLeftMargin="10"
minimumValue="0"
maximumValue="60">
</IgrNumericYAxis>
<IgrWaterfallSeries
name="WaterfallSeries1"
title="Value"
xAxisName="xAxis"
yAxisName="yAxis"
dataSource={this.companyIncomeData}
valueMemberPath="costs"
showDefaultTooltip="true"
isTransitionInEnabled="true">
</IgrWaterfallSeries>
<IgrWaterfallSeries
name="WaterfallSeries2"
title="Value"
xAxisName="xAxis"
yAxisName="yAxis"
dataSource={this.companyIncomeData}
brush="rgba(116, 70, 185, 1)"
outline="rgba(116, 70, 185, 1)"
valueMemberPath="netIncome"
showDefaultTooltip="true"
isTransitionInEnabled="true">
</IgrWaterfallSeries>
</IgrDataChart>
</div>
</div>
);
}
private _companyIncomeData: CompanyIncomeData = null;
public get companyIncomeData(): CompanyIncomeData {
if (this._companyIncomeData == null)
{
this._companyIncomeData = new CompanyIncomeData();
}
return this._companyIncomeData;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
React 積層型縦棒チャート
積層型縦棒チャートは、シリーズが横ではなく上に表示されることを除いて、すべての面でカテゴリ縦棒チャートに似ています。積層型縦棒チャートは、シリーズ間の結果の比較を示すために使用されます。コレクションのそれぞれの積層フラグメントは各積層の視覚的な要素を表します。各積層は正の値と負の値の両方を含みます。正の値はいずれも Y 軸の正の側にグループ化され、負の値は Y 軸の負の側にグループ化されます。積層型縦棒チャートは積層型棒チャートと同じデータプロットの概念を使用していますが、データ ポイントは横の線 (X 軸) に沿ってではなく、縦の線 (Y 軸) に沿って積層されます。
IgrDataChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgrStackedBarSeries
にバインドします:
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 React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLegendModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartCategoryCoreModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule, IgrDataChartStackedModule, IgrStackedFragmentSeriesModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrStackedColumnSeries, IgrStackedFragmentSeries, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts";
import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
const mods: any[] = [
IgrLegendModule,
IgrDataChartCoreModule,
IgrDataChartCategoryModule,
IgrDataChartCategoryCoreModule,
IgrDataChartInteractivityModule,
IgrDataChartAnnotationModule,
IgrDataChartStackedModule,
IgrStackedFragmentSeriesModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrLegend
private legendRef(r: IgrLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrDataChart
private chartRef(r: IgrDataChart) {
this.chart = r;
this.setState({});
}
private xAxis: IgrCategoryXAxis
private yAxis: IgrNumericYAxis
private stackedColumnSeries: IgrStackedColumnSeries
private s1: IgrStackedFragmentSeries
private s2: IgrStackedFragmentSeries
private s3: IgrStackedFragmentSeries
private s4: IgrStackedFragmentSeries
private s5: IgrStackedFragmentSeries
private dataToolTipLayer: IgrDataToolTipLayer
constructor(props: any) {
super(props);
this.legendRef = this.legendRef.bind(this);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Annual Birth Rates by World Region
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
legend={this.legend}
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false">
<IgrCategoryXAxis
name="xAxis"
dataSource={this.continentsBirthRate}
label="Year"
gap="0.75">
</IgrCategoryXAxis>
<IgrNumericYAxis
name="yAxis"
minimumValue="0"
maximumValue="140"
interval="20"
titleLeftMargin="10"
labelFormat="{0} m">
</IgrNumericYAxis>
<IgrStackedColumnSeries
name="stackedColumnSeries"
dataSource={this.continentsBirthRate}
xAxisName="xAxis"
yAxisName="yAxis"
showDefaultTooltip="false">
<IgrStackedFragmentSeries
name="s1"
valueMemberPath="Asia"
title="Asia">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s2"
valueMemberPath="Africa"
title="Africa">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s3"
valueMemberPath="Europe"
title="Europe">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s4"
valueMemberPath="NorthAmerica"
title="North America">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s5"
valueMemberPath="SouthAmerica"
title="South America">
</IgrStackedFragmentSeries>
</IgrStackedColumnSeries>
<IgrDataToolTipLayer
name="dataToolTipLayer">
</IgrDataToolTipLayer>
</IgrDataChart>
</div>
</div>
);
}
private _continentsBirthRate: ContinentsBirthRate = null;
public get continentsBirthRate(): ContinentsBirthRate {
if (this._continentsBirthRate == null)
{
this._continentsBirthRate = new ContinentsBirthRate();
}
return this._continentsBirthRate;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
React 積層型 100% 縦棒チャート
積層型 100% 縦棒チャートは、Y 軸上の値の取り扱いを除いたすべての面で積層型縦棒チャートと同じです。データを直接表現するのでなく、積層型 100 縦棒は、データ ポイント内のすべての値の合計の割合でデータを表します。
IgrDataChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgrStacked100BarSeries
にバインドします:
export class OnlineTrafficByDeviceItem {
public constructor(init: Partial<OnlineTrafficByDeviceItem>) {
Object.assign(this, init);
}
public category: string;
public desktop: number;
public mobile: number;
public tablet: number;
}
export class OnlineTrafficByDevice extends Array<OnlineTrafficByDeviceItem> {
public constructor(items: Array<OnlineTrafficByDeviceItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new OnlineTrafficByDeviceItem(
{
category: `Apparel`,
desktop: 27,
mobile: 66,
tablet: 7
}),
new OnlineTrafficByDeviceItem(
{
category: `Beauty`,
desktop: 29,
mobile: 66,
tablet: 5
}),
new OnlineTrafficByDeviceItem(
{
category: `Travel`,
desktop: 41,
mobile: 51,
tablet: 8
}),
new OnlineTrafficByDeviceItem(
{
category: `Grocery`,
desktop: 37,
mobile: 57,
tablet: 6
}),
new OnlineTrafficByDeviceItem(
{
category: `Energy`,
desktop: 58,
mobile: 39,
tablet: 3
}),
new OnlineTrafficByDeviceItem(
{
category: `Home Supply`,
desktop: 35,
mobile: 56,
tablet: 8
}),
new OnlineTrafficByDeviceItem(
{
category: `Financial`,
desktop: 58,
mobile: 39,
tablet: 3
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrLegendModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartCategoryCoreModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule, IgrDataChartStackedModule, IgrStackedFragmentSeriesModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrStacked100ColumnSeries, IgrStackedFragmentSeries, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts";
import { OnlineTrafficByDeviceItem, OnlineTrafficByDevice } from './OnlineTrafficByDevice';
const mods: any[] = [
IgrLegendModule,
IgrDataChartCoreModule,
IgrDataChartCategoryModule,
IgrDataChartCategoryCoreModule,
IgrDataChartInteractivityModule,
IgrDataChartAnnotationModule,
IgrDataChartStackedModule,
IgrStackedFragmentSeriesModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrLegend
private legendRef(r: IgrLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrDataChart
private chartRef(r: IgrDataChart) {
this.chart = r;
this.setState({});
}
private xAxis: IgrCategoryXAxis
private yAxis: IgrNumericYAxis
private stacked100ColumnSeries: IgrStacked100ColumnSeries
private s1: IgrStackedFragmentSeries
private s2: IgrStackedFragmentSeries
private s3: IgrStackedFragmentSeries
private dataToolTipLayer: IgrDataToolTipLayer
constructor(props: any) {
super(props);
this.legendRef = this.legendRef.bind(this);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Distribution of Online Traffic Worldwide, by Device
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
legend={this.legend}
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false">
<IgrCategoryXAxis
name="xAxis"
dataSource={this.onlineTrafficByDevice}
label="category"
gap="0.75">
</IgrCategoryXAxis>
<IgrNumericYAxis
name="yAxis"
minimumValue="0">
</IgrNumericYAxis>
<IgrStacked100ColumnSeries
name="stacked100ColumnSeries"
dataSource={this.onlineTrafficByDevice}
xAxisName="xAxis"
yAxisName="yAxis"
showDefaultTooltip="true"
areaFillOpacity="1">
<IgrStackedFragmentSeries
name="s1"
valueMemberPath="desktop"
title="Desktop">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s2"
valueMemberPath="mobile"
title="Mobile">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s3"
valueMemberPath="tablet"
title="Tablet">
</IgrStackedFragmentSeries>
</IgrStacked100ColumnSeries>
<IgrDataToolTipLayer
name="dataToolTipLayer">
</IgrDataToolTipLayer>
</IgrDataChart>
</div>
</div>
);
}
private _onlineTrafficByDevice: OnlineTrafficByDevice = null;
public get onlineTrafficByDevice(): OnlineTrafficByDevice {
if (this._onlineTrafficByDevice == null)
{
this._onlineTrafficByDevice = new OnlineTrafficByDevice();
}
return this._onlineTrafficByDevice;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
React 範囲縦棒チャート
Ignite UI for React 範囲縦棒チャートは、範囲チャートのグループに属し、従来のカテゴリ縦棒チャートのように下から伸びるのではなく、チャートのプロット領域の中央に表示できる垂直の長方形を使用して描画されます。このタイプのシリーズは、同じデータ ポイントの低い値と高い値の間の変化量を強調します一定期間、または複数の項目を比較します。範囲値は Y 軸に表示され、カテゴリは X 軸に表示されます。
範囲縦棒チャートは、範囲が塗りつぶされた領域ではなく垂直柱の集まりで表されること以外は範囲エリア チャートと同じです。
IgrDataChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgrRangeColumnSeries
にバインドします:
export class TemperatureRangeDataItem {
public constructor(init: Partial<TemperatureRangeDataItem>) {
Object.assign(this, init);
}
public month: string;
public highNY: number;
public lowNY: number;
public highLA: number;
public lowLA: number;
}
export class TemperatureRangeData extends Array<TemperatureRangeDataItem> {
public constructor(items: Array<TemperatureRangeDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new TemperatureRangeDataItem(
{
month: `Jan`,
highNY: 10.6,
lowNY: -6.6,
highLA: 28.3,
lowLA: 7.8
}),
new TemperatureRangeDataItem(
{
month: `Feb`,
highNY: 7.8,
lowNY: -9.9,
highLA: 31.1,
lowLA: 5.6
}),
new TemperatureRangeDataItem(
{
month: `Mar`,
highNY: 12.2,
lowNY: -3.8,
highLA: 27.8,
lowLA: 8.3
}),
new TemperatureRangeDataItem(
{
month: `Apr`,
highNY: 11.7,
lowNY: 2.2,
highLA: 33.9,
lowLA: 10.6
}),
new TemperatureRangeDataItem(
{
month: `May`,
highNY: 19.4,
lowNY: 1.1,
highLA: 35,
lowLA: 13.9
}),
new TemperatureRangeDataItem(
{
month: `Jun`,
highNY: 23.3,
lowNY: 10.6,
highLA: 36.7,
lowLA: 16.1
}),
new TemperatureRangeDataItem(
{
month: `Jul`,
highNY: 27.2,
lowNY: 19.4,
highLA: 33.3,
lowLA: 15.6
}),
new TemperatureRangeDataItem(
{
month: `Aug`,
highNY: 25.6,
lowNY: 16.7,
highLA: 36.7,
lowLA: 15.6
}),
new TemperatureRangeDataItem(
{
month: `Sep`,
highNY: 22.8,
lowNY: 8.9,
highLA: 43.9,
lowLA: 16.1
}),
new TemperatureRangeDataItem(
{
month: `Oct`,
highNY: 17.8,
lowNY: 0,
highLA: 38.3,
lowLA: 11.1
}),
new TemperatureRangeDataItem(
{
month: `Nov`,
highNY: 17.8,
lowNY: -1,
highLA: 32.8,
lowLA: 6.7
}),
new TemperatureRangeDataItem(
{
month: `Dec`,
highNY: 8.3,
lowNY: -6.6,
highLA: 28.9,
lowLA: 5.6
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule, IgrLegendModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrRangeColumnSeries, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts";
import { TemperatureRangeDataItem, TemperatureRangeData } from './TemperatureRangeData';
const mods: any[] = [
IgrDataChartCoreModule,
IgrDataChartCategoryModule,
IgrDataChartInteractivityModule,
IgrDataChartAnnotationModule,
IgrLegendModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrLegend
private legendRef(r: IgrLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrDataChart
private chartRef(r: IgrDataChart) {
this.chart = r;
this.setState({});
}
private xAxis: IgrCategoryXAxis
private yAxis: IgrNumericYAxis
private rangeColumnSeries1: IgrRangeColumnSeries
private rangeColumnSeries2: IgrRangeColumnSeries
private dataToolTipLayer: IgrDataToolTipLayer
constructor(props: any) {
super(props);
this.legendRef = this.legendRef.bind(this);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Monthly Temperature Range in LA and NYC
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
legend={this.legend}>
<IgrCategoryXAxis
name="xAxis"
label="month"
interval="1"
dataSource={this.temperatureRangeData}>
</IgrCategoryXAxis>
<IgrNumericYAxis
name="yAxis"
title="Temperature (in Celsius)"
titleAngle="90"
titleLeftMargin="10">
</IgrNumericYAxis>
<IgrRangeColumnSeries
name="RangeColumnSeries1"
xAxisName="xAxis"
yAxisName="yAxis"
title="Los Angeles"
lowMemberPath="lowLA"
highMemberPath="highLA"
showDefaultTooltip="false"
dataSource={this.temperatureRangeData}>
</IgrRangeColumnSeries>
<IgrRangeColumnSeries
name="RangeColumnSeries2"
xAxisName="xAxis"
yAxisName="yAxis"
title="New York"
lowMemberPath="lowNY"
highMemberPath="highNY"
showDefaultTooltip="false"
dataSource={this.temperatureRangeData}>
</IgrRangeColumnSeries>
<IgrDataToolTipLayer
name="dataToolTipLayer">
</IgrDataToolTipLayer>
</IgrDataChart>
</div>
</div>
);
}
private _temperatureRangeData: TemperatureRangeData = null;
public get temperatureRangeData(): TemperatureRangeData {
if (this._temperatureRangeData == null)
{
this._temperatureRangeData = new TemperatureRangeData();
}
return this._temperatureRangeData;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
React ラジアル縦棒チャート
ラジアル縦棒チャートは、ラジアル チャートのグループに属し、チャートの中心からデータ ポイントの位置に向かって伸びる長方形のコレクションを使用して描画されます。これはカテゴリ縦棒チャートと同じデータ プロットの概念を使用していますが、データ ポイントを横の線に並べるのではなく、データ ポイントを円でラップします。
IgrDataChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgrRadialColumnSeries
にバインドします:
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 React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDataChartCoreModule, IgrDataChartRadialModule, IgrDataChartRadialCoreModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule, IgrLegendModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrDataChart, IgrCategoryAngleAxis, IgrNumericRadiusAxis, IgrRadialColumnSeries, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts";
import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
const mods: any[] = [
IgrDataChartCoreModule,
IgrDataChartRadialModule,
IgrDataChartRadialCoreModule,
IgrDataChartInteractivityModule,
IgrDataChartAnnotationModule,
IgrLegendModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private legend: IgrLegend
private legendRef(r: IgrLegend) {
this.legend = r;
this.setState({});
}
private chart: IgrDataChart
private chartRef(r: IgrDataChart) {
this.chart = r;
this.setState({});
}
private angleAxis: IgrCategoryAngleAxis
private radiusAxis: IgrNumericRadiusAxis
private radialColumnSeries1: IgrRadialColumnSeries
private radialColumnSeries2: IgrRadialColumnSeries
private dataToolTipLayer: IgrDataToolTipLayer
constructor(props: any) {
super(props);
this.legendRef = this.legendRef.bind(this);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Ronaldo vs Messi Player Stats
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
legend={this.legend}
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false">
<IgrCategoryAngleAxis
name="angleAxis"
dataSource={this.footballPlayerStats}
label="attribute">
</IgrCategoryAngleAxis>
<IgrNumericRadiusAxis
name="radiusAxis"
innerRadiusExtentScale="0.1"
interval="2"
minimumValue="0"
maximumValue="10">
</IgrNumericRadiusAxis>
<IgrRadialColumnSeries
name="RadialColumnSeries1"
dataSource={this.footballPlayerStats}
angleAxisName="angleAxis"
valueAxisName="radiusAxis"
valueMemberPath="ronaldo"
showDefaultTooltip="false"
areaFillOpacity="0.8"
thickness="3"
title="Ronaldo">
</IgrRadialColumnSeries>
<IgrRadialColumnSeries
name="RadialColumnSeries2"
dataSource={this.footballPlayerStats}
angleAxisName="angleAxis"
valueAxisName="radiusAxis"
valueMemberPath="messi"
showDefaultTooltip="false"
areaFillOpacity="0.8"
thickness="3"
title="Messi">
</IgrRadialColumnSeries>
<IgrDataToolTipLayer
name="dataToolTipLayer">
</IgrDataToolTipLayer>
</IgrDataChart>
</div>
</div>
);
}
private _footballPlayerStats: FootballPlayerStats = null;
public get footballPlayerStats(): FootballPlayerStats {
if (this._footballPlayerStats == null)
{
this._footballPlayerStats = new FootballPlayerStats();
}
return this._footballPlayerStats;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
その他のリソース
関連するチャートタイプの詳細については、以下のトピックを参照してください。
API リファレンス
以下のテーブルは、上記のセクションで説明した API メンバーをリストします。
チャート タイプ | コントロール名 | API メンバー |
---|---|---|
縦棒 | IgrCategoryChart |
chartType = Column |
ラジアル縦棒 | IgrDataChart |
IgrRadialColumnSeries |
範囲縦棒 | IgrDataChart |
IgrRangeColumnSeries |
積層型縦棒 | IgrDataChart |
IgrStackedColumnSeries |
積層型 100% 縦棒 | IgrDataChart |
IgrStacked100ColumnSeries |
ウォーターフォール | IgrDataChart |
IgrWaterfallSeries |