React 棒チャート
Ignite UI for React 棒チャート、棒グラフ、または水平棒チャートは、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ高さで長さが異なる水平棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過とともに、項目の価値の変化を示すのに理想的です。データは、チャートの左から右にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。棒チャートは縦棒チャートと非常によく似ていますが、棒チャートは時計回りに 90 度回転して描画されるため、向きが水平方向 (左から右) であり、縦棒チャートは垂直方向 (上下) です。
React 棒チャートの例
次の例に示すように、データ ソースを複数の IgrBarSeries
にバインドすることにより、IgrDataChart
コントロールに 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, IgrDataChartCoreModule, IgrDataChartCategoryCoreModule, IgrDataChartCategoryModule, IgrDataChartInteractivityModule, IgrDataChartVerticalCategoryModule, IgrDataChartAnnotationModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrDataChart, IgrCategoryYAxis, IgrNumericXAxis, IgrCategoryHighlightLayer, IgrBarSeries, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts";
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
const mods: any[] = [
IgrLegendModule,
IgrDataChartCoreModule,
IgrDataChartCategoryCoreModule,
IgrDataChartCategoryModule,
IgrDataChartInteractivityModule,
IgrDataChartVerticalCategoryModule,
IgrDataChartAnnotationModule
];
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 yAxis: IgrCategoryYAxis
private xAxis: IgrNumericXAxis
private categoryHighlightLayer: IgrCategoryHighlightLayer
private barSeries1: IgrBarSeries
private barSeries2: IgrBarSeries
private tooltips: 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">
Highest Grossing Movie Franchises
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
legend={this.legend}>
<IgrCategoryYAxis
name="yAxis"
label="franchise"
useEnhancedIntervalManagement="true"
enhancedIntervalPreferMoreCategoryLabels="true"
dataSource={this.highestGrossingMovies}
isInverted="true"
gap="0.5"
overlap="-0.1">
</IgrCategoryYAxis>
<IgrNumericXAxis
name="xAxis"
title="Billions of U.S. Dollars">
</IgrNumericXAxis>
<IgrCategoryHighlightLayer
name="CategoryHighlightLayer">
</IgrCategoryHighlightLayer>
<IgrBarSeries
name="BarSeries1"
xAxisName="xAxis"
yAxisName="yAxis"
title="Total Revenue of Franchise"
valueMemberPath="totalRevenue"
dataSource={this.highestGrossingMovies}
showDefaultTooltip="true"
isTransitionInEnabled="true"
isHighlightingEnabled="true">
</IgrBarSeries>
<IgrBarSeries
name="BarSeries2"
xAxisName="xAxis"
yAxisName="yAxis"
title="Highest Grossing Movie in Series"
valueMemberPath="highestGrossing"
dataSource={this.highestGrossingMovies}
showDefaultTooltip="true"
isTransitionInEnabled="true"
isHighlightingEnabled="true">
</IgrBarSeries>
<IgrDataToolTipLayer
name="Tooltips">
</IgrDataToolTipLayer>
</IgrDataChart>
</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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
棒チャートの推奨事項
React 棒チャートはプロジェクトに適していますか?
React 棒チャートには、データまたはデータを使用して正しいストーリーを伝える方法に基づいたいくつかの種類が含まれています:
- グループ化された棒チャート
- 積層型棒チャート
- 極座標型棒チャート
- 積層型 100 棒チャート
棒チャートのユースケース
チャートを選択するための一般的なユースケースはいくつかあります:
- 時間の経過に伴う傾向またはデータのカテゴリの数値の変化を表示したい場合
- 1 つ以上のデータ系列のデータ値を比較したい場合
- 部分と全体の比較を表示したい場合
- カテゴリの上位または下位のパーセンテージを表示したい場合
- サブカテゴリにグループ化された複数のデータ ポイントの分析 (積層型棒)
これらのユースケースは、一般的に次のシナリオで使用されます:
- セールス マネージメント
- インベントリ マネージメント
- 株価チャート
- 数値または時系列値を比較する任意の文字列値
棒チャートのベスト プラクティス
- 数値軸を 0 から開始します。
- 棒には単色を使用します。
- 各棒を区切るスペースが棒自体の幅の 1/2 であることを確認します。
- ランキング、または順序付けられたカテゴリ (項目) の比較は、昇順または降順でソートされていることを確認します。
- 読みやすくするために、Y 軸 (チャートの左側のラベル) のカテゴリ値を右揃えにします。
以下の場合に棒チャートを使用しないでください:
- データが多すぎるため、Y 軸がスペースに収まらないか、判読できません。
- 詳細な時系列分析が必要なときは、時系列を含む折れ線チャートを検討してください。
棒チャートのデータ構造:
- データ ソースはデータ項目の配列またはリストである必要があります。
- データ ソースに少なくとも 1 つのデータ項目を含む必要があります。
- リストには、少なくとも 1 つのデータ列 (文字列または日時) が含まれている必要があります。
- リストには、少なくとも 1 つの数値データ列が含まれている必要があります。
単一シリーズの React 棒チャート
棒チャートは、カテゴリ シリーズのグループに属し、チャートの左から右へデータ ポイント値に向かって延びる四角形のコレクションを使用して描画されます。IgrDataChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgrBarSeries
にバインドします:
export class OnlineShoppingSearchesItem {
public constructor(init: Partial<OnlineShoppingSearchesItem>) {
Object.assign(this, init);
}
public x: number;
public y: number;
public label: string;
public percent: number;
public shop: string;
}
export class OnlineShoppingSearches extends Array<OnlineShoppingSearchesItem> {
public constructor(items: Array<OnlineShoppingSearchesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new OnlineShoppingSearchesItem(
{
x: 63,
y: 0,
label: `63%`,
percent: 63,
shop: `Amazon`
}),
new OnlineShoppingSearchesItem(
{
x: 48,
y: 1,
label: `48%`,
percent: 48,
shop: `Search Engines`
}),
new OnlineShoppingSearchesItem(
{
x: 33,
y: 2,
label: `33%`,
percent: 33,
shop: `Retailer Sites`
}),
new OnlineShoppingSearchesItem(
{
x: 25,
y: 3,
label: `25%`,
percent: 25,
shop: `Marketplaces`
}),
new OnlineShoppingSearchesItem(
{
x: 21,
y: 4,
label: `21%`,
percent: 21,
shop: `Brand Website`
}),
new OnlineShoppingSearchesItem(
{
x: 10,
y: 5,
label: `10%`,
percent: 10,
shop: `Comparison Sites`
}),
new OnlineShoppingSearchesItem(
{
x: 8,
y: 6,
label: `8%`,
percent: 8,
shop: `Social Media`
}),
new OnlineShoppingSearchesItem(
{
x: 2,
y: 7,
label: `2%`,
percent: 2,
shop: `Other`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDataChartCoreModule, IgrDataChartCategoryCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrDataChartVerticalCategoryModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChart, IgrCategoryYAxis, IgrNumericXAxis, IgrCategoryHighlightLayer, IgrBarSeries, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts";
import { OnlineShoppingSearchesItem, OnlineShoppingSearches } from './OnlineShoppingSearches';
const mods: any[] = [
IgrDataChartCoreModule,
IgrDataChartCategoryCoreModule,
IgrDataChartCategoryModule,
IgrDataChartAnnotationModule,
IgrDataChartInteractivityModule,
IgrDataChartVerticalCategoryModule
];
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 yAxis: IgrCategoryYAxis
private xAxis: IgrNumericXAxis
private categoryHighlightLayer: IgrCategoryHighlightLayer
private barSeries1: IgrBarSeries
private tooltips: IgrDataToolTipLayer
constructor(props: any) {
super(props);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Where Online Shoppers Start Their Search
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false">
<IgrCategoryYAxis
name="yAxis"
label="shop"
useEnhancedIntervalManagement="true"
enhancedIntervalPreferMoreCategoryLabels="true"
dataSource={this.onlineShoppingSearches}
isInverted="true"
gap="0.5"
overlap="-0.1">
</IgrCategoryYAxis>
<IgrNumericXAxis
name="xAxis"
labelFormat="{0}%">
</IgrNumericXAxis>
<IgrCategoryHighlightLayer
name="CategoryHighlightLayer">
</IgrCategoryHighlightLayer>
<IgrBarSeries
name="BarSeries1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="percent"
dataSource={this.onlineShoppingSearches}
showDefaultTooltip="true"
isTransitionInEnabled="true"
isHighlightingEnabled="true">
</IgrBarSeries>
<IgrDataToolTipLayer
name="Tooltips">
</IgrDataToolTipLayer>
</IgrDataChart>
</div>
</div>
);
}
private _onlineShoppingSearches: OnlineShoppingSearches = null;
public get onlineShoppingSearches(): OnlineShoppingSearches {
if (this._onlineShoppingSearches == null)
{
this._onlineShoppingSearches = new OnlineShoppingSearches();
}
return this._onlineShoppingSearches;
}
}
// 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
コントロールでこのチャート タイプを作成するには、以下の例のように、データを複数の IgrBarSeries
にバインドします:
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, IgrDataChartCoreModule, IgrDataChartCategoryCoreModule, IgrDataChartCategoryModule, IgrDataChartInteractivityModule, IgrDataChartVerticalCategoryModule, IgrDataChartAnnotationModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrDataChart, IgrCategoryYAxis, IgrNumericXAxis, IgrCategoryHighlightLayer, IgrBarSeries, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts";
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
const mods: any[] = [
IgrLegendModule,
IgrDataChartCoreModule,
IgrDataChartCategoryCoreModule,
IgrDataChartCategoryModule,
IgrDataChartInteractivityModule,
IgrDataChartVerticalCategoryModule,
IgrDataChartAnnotationModule
];
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 yAxis: IgrCategoryYAxis
private xAxis: IgrNumericXAxis
private categoryHighlightLayer: IgrCategoryHighlightLayer
private barSeries1: IgrBarSeries
private barSeries2: IgrBarSeries
private tooltips: 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">
Highest Grossing Movie Franchises
</div>
<div className="legend">
<IgrLegend
ref={this.legendRef}
orientation="Horizontal">
</IgrLegend>
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
legend={this.legend}>
<IgrCategoryYAxis
name="yAxis"
label="franchise"
useEnhancedIntervalManagement="true"
enhancedIntervalPreferMoreCategoryLabels="true"
dataSource={this.highestGrossingMovies}
isInverted="true"
gap="0.5"
overlap="-0.1">
</IgrCategoryYAxis>
<IgrNumericXAxis
name="xAxis"
title="Billions of U.S. Dollars">
</IgrNumericXAxis>
<IgrCategoryHighlightLayer
name="CategoryHighlightLayer">
</IgrCategoryHighlightLayer>
<IgrBarSeries
name="BarSeries1"
xAxisName="xAxis"
yAxisName="yAxis"
title="Total Revenue of Franchise"
valueMemberPath="totalRevenue"
dataSource={this.highestGrossingMovies}
showDefaultTooltip="true"
isTransitionInEnabled="true"
isHighlightingEnabled="true">
</IgrBarSeries>
<IgrBarSeries
name="BarSeries2"
xAxisName="xAxis"
yAxisName="yAxis"
title="Highest Grossing Movie in Series"
valueMemberPath="highestGrossing"
dataSource={this.highestGrossingMovies}
showDefaultTooltip="true"
isTransitionInEnabled="true"
isHighlightingEnabled="true">
</IgrBarSeries>
<IgrDataToolTipLayer
name="Tooltips">
</IgrDataToolTipLayer>
</IgrDataChart>
</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 棒チャートのスタイル設定
棒チャートのスタイルを設定でき、パーセント比較を示すために各棒に注釈値を使用できます。IgrDataChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgrBarSeries
にバインドし、IgrCalloutLayer
を追加します。
export class OnlineShoppingSearchesItem {
public constructor(init: Partial<OnlineShoppingSearchesItem>) {
Object.assign(this, init);
}
public x: number;
public y: number;
public label: string;
public percent: number;
public shop: string;
}
export class OnlineShoppingSearches extends Array<OnlineShoppingSearchesItem> {
public constructor(items: Array<OnlineShoppingSearchesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new OnlineShoppingSearchesItem(
{
x: 63,
y: 0,
label: `63%`,
percent: 63,
shop: `Amazon`
}),
new OnlineShoppingSearchesItem(
{
x: 48,
y: 1,
label: `48%`,
percent: 48,
shop: `Search Engines`
}),
new OnlineShoppingSearchesItem(
{
x: 33,
y: 2,
label: `33%`,
percent: 33,
shop: `Retailer Sites`
}),
new OnlineShoppingSearchesItem(
{
x: 25,
y: 3,
label: `25%`,
percent: 25,
shop: `Marketplaces`
}),
new OnlineShoppingSearchesItem(
{
x: 21,
y: 4,
label: `21%`,
percent: 21,
shop: `Brand Website`
}),
new OnlineShoppingSearchesItem(
{
x: 10,
y: 5,
label: `10%`,
percent: 10,
shop: `Comparison Sites`
}),
new OnlineShoppingSearchesItem(
{
x: 8,
y: 6,
label: `8%`,
percent: 8,
shop: `Social Media`
}),
new OnlineShoppingSearchesItem(
{
x: 2,
y: 7,
label: `2%`,
percent: 2,
shop: `Other`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartCategoryCoreModule, IgrDataChartInteractivityModule, IgrDataChartVerticalCategoryModule, IgrAnnotationLayerProxyModule, IgrCalloutLayerModule, IgrDataChartAnnotationModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChart, IgrCategoryYAxis, IgrNumericXAxis, IgrCategoryHighlightLayer, IgrBarSeries, IgrCalloutLayer, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts";
import { OnlineShoppingSearchesItem, OnlineShoppingSearches } from './OnlineShoppingSearches';
const mods: any[] = [
IgrDataChartCoreModule,
IgrDataChartCategoryModule,
IgrDataChartCategoryCoreModule,
IgrDataChartInteractivityModule,
IgrDataChartVerticalCategoryModule,
IgrAnnotationLayerProxyModule,
IgrCalloutLayerModule,
IgrDataChartAnnotationModule
];
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 yAxis: IgrCategoryYAxis
private xAxis: IgrNumericXAxis
private categoryHighlightLayer: IgrCategoryHighlightLayer
private barSeries1: IgrBarSeries
private calloutLayer1: IgrCalloutLayer
private tooltips: IgrDataToolTipLayer
constructor(props: any) {
super(props);
this.chartRef = this.chartRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div className="legend-title">
Where Online Shoppers Start Their Search
</div>
<div className="container fill">
<IgrDataChart
ref={this.chartRef}
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false">
<IgrCategoryYAxis
name="yAxis"
label="shop"
dataSource={this.onlineShoppingSearches}
isInverted="true"
gap="0.75">
</IgrCategoryYAxis>
<IgrNumericXAxis
name="xAxis"
interval="20"
maximumValue="80"
minimumValue="0"
labelFormat="{0}%">
</IgrNumericXAxis>
<IgrCategoryHighlightLayer
name="CategoryHighlightLayer">
</IgrCategoryHighlightLayer>
<IgrBarSeries
name="BarSeries1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="percent"
dataSource={this.onlineShoppingSearches}
showDefaultTooltip="true"
isTransitionInEnabled="true"
isHighlightingEnabled="true"
brush="rgba(201, 56, 207, 1)"
outline="rgba(133, 6, 138, 1)"
thickness="2"
areaFillOpacity="0.5"
markerType="Hidden">
</IgrBarSeries>
<IgrCalloutLayer
name="CalloutLayer1"
isAutoCalloutBehaviorEnabled="true"
calloutTextColor="rgba(133, 6, 138, 1)"
calloutBackground="rgba(0, 0, 0, 0)"
calloutLeaderBrush="rgba(0, 0, 0, 0)"
dataSource={this.onlineShoppingSearches}>
</IgrCalloutLayer>
<IgrDataToolTipLayer
name="Tooltips">
</IgrDataToolTipLayer>
</IgrDataChart>
</div>
</div>
);
}
private _onlineShoppingSearches: OnlineShoppingSearches = null;
public get onlineShoppingSearches(): OnlineShoppingSearches {
if (this._onlineShoppingSearches == null)
{
this._onlineShoppingSearches = new OnlineShoppingSearches();
}
return this._onlineShoppingSearches;
}
}
// 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 積層型棒チャート
積層型棒チャート、または積層型棒グラフは、チャートの横棒にさまざまなサイズのフラグメントを表示することにより、さまざまなカテゴリのデータの構成を比較するために使用されるカテゴリ チャートの一種です。各棒または積層フラグメントの長さは、その全体的な値に比例します。
積層型棒チャートは、データを表すデータ ポイントが水平方向に隣り合って積み重ねられ、データを視覚的にグループ化するという点で、棒チャートとは異なります。各積層は正の値と負の値の両方を含みます。すべての正の値は X 軸の正の側にグループ化され、すべての負の値は X 軸の負の側にグループ化されます。
IgrDataChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgrStackedBarSeries
にバインドします:
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, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartCategoryCoreModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule, IgrDataChartStackedModule, IgrStackedFragmentSeriesModule, IgrCalloutLayerModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrDataChart, IgrCategoryYAxis, IgrNumericXAxis, IgrStackedBarSeries, IgrStackedFragmentSeries, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts";
import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
const mods: any[] = [
IgrLegendModule,
IgrDataChartCoreModule,
IgrDataChartCategoryModule,
IgrDataChartCategoryCoreModule,
IgrDataChartInteractivityModule,
IgrDataChartAnnotationModule,
IgrDataChartStackedModule,
IgrStackedFragmentSeriesModule,
IgrCalloutLayerModule
];
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 yAxis: IgrCategoryYAxis
private xAxis: IgrNumericXAxis
private stackedBarSeries: IgrStackedBarSeries
private s1: IgrStackedFragmentSeries
private s2: IgrStackedFragmentSeries
private s3: IgrStackedFragmentSeries
private s4: 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">
Renewable Energy Consumption
</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">
<IgrCategoryYAxis
name="yAxis"
dataSource={this.energyRenewableConsumption}
label="location"
isInverted="true"
gap="0.75">
</IgrCategoryYAxis>
<IgrNumericXAxis
name="xAxis"
minimumValue="0"
title="TWh">
</IgrNumericXAxis>
<IgrStackedBarSeries
name="stackedBarSeries"
dataSource={this.energyRenewableConsumption}
xAxisName="xAxis"
yAxisName="yAxis"
showDefaultTooltip="true"
areaFillOpacity="1">
<IgrStackedFragmentSeries
name="s1"
valueMemberPath="hydro"
title="Hydro">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s2"
valueMemberPath="wind"
title="Wind">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s3"
valueMemberPath="solar"
title="Solar">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s4"
valueMemberPath="other"
title="Other">
</IgrStackedFragmentSeries>
</IgrStackedBarSeries>
<IgrDataToolTipLayer
name="dataToolTipLayer">
</IgrDataToolTipLayer>
</IgrDataChart>
</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
React 積層型 100% 棒チャート
React 積層型 100% 棒チャートは、X 軸 (チャートの下のラベル) の値の処理を除いて、すべての点で React 積層型棒チャートと同じです。データを直接表現するのでなく、積層型棒チャートは、データ ポイント内のすべての値の合計の割合でデータを表します。
IgrDataChart
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgrStacked100BarSeries
にバインドします:
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, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartCategoryCoreModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule, IgrDataChartStackedModule, IgrStackedFragmentSeriesModule } from "@infragistics/igniteui-react-charts";
import { IgrLegend, IgrDataChart, IgrCategoryYAxis, IgrNumericXAxis, IgrStacked100BarSeries, IgrStackedFragmentSeries, IgrDataToolTipLayer } from "@infragistics/igniteui-react-charts";
import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
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 yAxis: IgrCategoryYAxis
private xAxis: IgrNumericXAxis
private stacked100BarSeries: IgrStacked100BarSeries
private s1: IgrStackedFragmentSeries
private s2: IgrStackedFragmentSeries
private s3: IgrStackedFragmentSeries
private s4: 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">
Renewable Energy Consumption
</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">
<IgrCategoryYAxis
name="yAxis"
dataSource={this.energyRenewableConsumption}
label="location"
isInverted="true">
</IgrCategoryYAxis>
<IgrNumericXAxis
name="xAxis"
minimumValue="0"
title="TWh">
</IgrNumericXAxis>
<IgrStacked100BarSeries
name="stacked100BarSeries"
dataSource={this.energyRenewableConsumption}
xAxisName="xAxis"
yAxisName="yAxis"
showDefaultTooltip="true"
areaFillOpacity="1">
<IgrStackedFragmentSeries
name="s1"
valueMemberPath="hydro"
title="Hydro">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s2"
valueMemberPath="wind"
title="Wind">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s3"
valueMemberPath="solar"
title="Solar">
</IgrStackedFragmentSeries>
<IgrStackedFragmentSeries
name="s4"
valueMemberPath="other"
title="Other">
</IgrStackedFragmentSeries>
</IgrStacked100BarSeries>
<IgrDataToolTipLayer
name="dataToolTipLayer">
</IgrDataToolTipLayer>
</IgrDataChart>
</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 リファレンス
以下は、上記のセクションで説明されている API メンバーのリストです。