Angular 棒チャート
Ignite UI for Angular 棒チャート、棒グラフ、または水平棒チャートは、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ高さで長さが異なる水平棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過とともに、項目の価値の変化を示すのに理想的です。データは、チャートの左から右にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。棒チャートは縦棒チャートと非常によく似ていますが、棒チャートは時計回りに 90 度回転して描画されるため、向きが水平方向 (左から右) であり、縦棒チャートは垂直方向 (上下) です。
60 以上のリアルタイム Angular チャート を使用して、何百万ものデータ ポイントを描画し、視覚化を構築します。これは、あらゆるアプリケーション シナリオに対応する最も広範なチャート ライブラリです。
Angular 棒チャートの例
次の例に示すように、データ ソースを複数の IgxBarSeriesComponent
にバインドすることにより、IgxDataChartComponent
コントロールに Angular 棒チャートを作成できます。
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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartVerticalCategoryModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxDataChartCoreModule,
IgxDataChartCategoryCoreModule,
IgxDataChartCategoryModule,
IgxDataChartInteractivityModule,
IgxDataChartVerticalCategoryModule,
IgxDataChartAnnotationModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxCategoryHighlightLayerComponent, IgxBarSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxDataChartComponent
@ViewChild("yAxis", { static: true } )
private yAxis: IgxCategoryYAxisComponent
@ViewChild("xAxis", { static: true } )
private xAxis: IgxNumericXAxisComponent
@ViewChild("categoryHighlightLayer", { static: true } )
private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
@ViewChild("barSeries1", { static: true } )
private barSeries1: IgxBarSeriesComponent
@ViewChild("barSeries2", { static: true } )
private barSeries2: IgxBarSeriesComponent
@ViewChild("tooltips", { static: true } )
private tooltips: IgxDataToolTipLayerComponent
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Highest Grossing Movie Franchises
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-data-chart
name="Chart"
#chart
[legend]="legend">
<igx-category-y-axis
name="yAxis"
#yAxis
label="franchise"
useEnhancedIntervalManagement="true"
enhancedIntervalPreferMoreCategoryLabels="true"
[dataSource]="highestGrossingMovies"
isInverted="true"
gap="0.5"
overlap="-0.1">
</igx-category-y-axis>
<igx-numeric-x-axis
name="xAxis"
#xAxis
title="Billions of U.S. Dollars">
</igx-numeric-x-axis>
<igx-category-highlight-layer
name="CategoryHighlightLayer"
#categoryHighlightLayer>
</igx-category-highlight-layer>
<igx-bar-series
name="BarSeries1"
#barSeries1
[xAxis]="xAxis"
[yAxis]="yAxis"
title="Total Revenue of Franchise"
valueMemberPath="totalRevenue"
[dataSource]="highestGrossingMovies"
showDefaultTooltip="true"
isTransitionInEnabled="true"
isHighlightingEnabled="true">
</igx-bar-series>
<igx-bar-series
name="BarSeries2"
#barSeries2
[xAxis]="xAxis"
[yAxis]="yAxis"
title="Highest Grossing Movie in Series"
valueMemberPath="highestGrossing"
[dataSource]="highestGrossingMovies"
showDefaultTooltip="true"
isTransitionInEnabled="true"
isHighlightingEnabled="true">
</igx-bar-series>
<igx-data-tool-tip-layer
name="Tooltips"
#tooltips>
</igx-data-tool-tip-layer>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
棒チャートの推奨事項
Angular 棒チャートはプロジェクトに適していますか?
Angular 棒チャートには、データまたはデータを使用して正しいストーリーを伝える方法に基づいたいくつかの種類が含まれています:
- グループ化された棒チャート
- 積層型棒チャート
- 極座標型棒チャート
- 積層型 100 棒チャート
棒チャートのユースケース
チャートを選択するための一般的なユースケースはいくつかあります:
- 時間の経過に伴う傾向またはデータのカテゴリの数値の変化を表示したい場合
- 1 つ以上のデータ系列のデータ値を比較したい場合
- 部分と全体の比較を表示したい場合
- カテゴリの上位または下位のパーセンテージを表示したい場合
- サブカテゴリにグループ化された複数のデータ ポイントの分析 (積層型棒)
これらのユースケースは、一般的に次のシナリオで使用されます:
- セールス マネージメント
- インベントリ マネージメント
- 株価チャート
- 数値または時系列値を比較する任意の文字列値
棒チャートのベスト プラクティス
- 数値軸を 0 から開始します。
- 棒には単色を使用します。
- 各棒を区切るスペースが棒自体の幅の 1/2 であることを確認します。
- ランキング、または順序付けられたカテゴリ (項目) の比較は、昇順または降順でソートされていることを確認します。
- 読みやすくするために、Y 軸 (チャートの左側のラベル) のカテゴリ値を右揃えにします。
以下の場合に棒チャートを使用しないでください:
- データが多すぎるため、Y 軸がスペースに収まらないか、判読できません。
- 詳細な時系列分析が必要なときは、時系列を含む折れ線チャートを検討してください。
棒チャートのデータ構造:
- データ ソースはデータ項目の配列またはリストである必要があります。
- データ ソースに少なくとも 1 つのデータ項目を含む必要があります。
- リストには、少なくとも 1 つのデータ列 (文字列または日時) が含まれている必要があります。
- リストには、少なくとも 1 つの数値データ列が含まれている必要があります。
単一シリーズの Angular 棒チャート
棒チャートは、カテゴリ シリーズのグループに属し、チャートの左から右へデータ ポイント値に向かって延びる四角形のコレクションを使用して描画されます。IgxDataChartComponent
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgxBarSeriesComponent
にバインドします:
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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxDataChartCoreModule, IgxDataChartCategoryCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartVerticalCategoryModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartCategoryCoreModule,
IgxDataChartCategoryModule,
IgxDataChartAnnotationModule,
IgxDataChartInteractivityModule,
IgxDataChartVerticalCategoryModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { OnlineShoppingSearchesItem, OnlineShoppingSearches } from './OnlineShoppingSearches';
import { IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxCategoryHighlightLayerComponent, IgxBarSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("chart", { static: true } )
private chart: IgxDataChartComponent
@ViewChild("yAxis", { static: true } )
private yAxis: IgxCategoryYAxisComponent
@ViewChild("xAxis", { static: true } )
private xAxis: IgxNumericXAxisComponent
@ViewChild("categoryHighlightLayer", { static: true } )
private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
@ViewChild("barSeries1", { static: true } )
private barSeries1: IgxBarSeriesComponent
@ViewChild("tooltips", { static: true } )
private tooltips: IgxDataToolTipLayerComponent
private _onlineShoppingSearches: OnlineShoppingSearches = null;
public get onlineShoppingSearches(): OnlineShoppingSearches {
if (this._onlineShoppingSearches == null)
{
this._onlineShoppingSearches = new OnlineShoppingSearches();
}
return this._onlineShoppingSearches;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Where Online Shoppers Start Their Search
</div>
<div class="container fill">
<igx-data-chart
name="Chart"
#chart
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false">
<igx-category-y-axis
name="yAxis"
#yAxis
label="shop"
useEnhancedIntervalManagement="true"
enhancedIntervalPreferMoreCategoryLabels="true"
[dataSource]="onlineShoppingSearches"
isInverted="true"
gap="0.5"
overlap="-0.1">
</igx-category-y-axis>
<igx-numeric-x-axis
name="xAxis"
#xAxis
labelFormat="{0}%">
</igx-numeric-x-axis>
<igx-category-highlight-layer
name="CategoryHighlightLayer"
#categoryHighlightLayer>
</igx-category-highlight-layer>
<igx-bar-series
name="BarSeries1"
#barSeries1
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="percent"
[dataSource]="onlineShoppingSearches"
showDefaultTooltip="true"
isTransitionInEnabled="true"
isHighlightingEnabled="true">
</igx-bar-series>
<igx-data-tool-tip-layer
name="Tooltips"
#tooltips>
</igx-data-tool-tip-layer>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
複数シリーズの Angular 棒チャート
棒チャートは、比較のためにカテゴリごとに複数の棒を描画できます。この例では、棒チャートは人気のある映画フランチャイズの興行収益を比較しています。IgxDataChartComponent
コントロールでこのチャート タイプを作成するには、以下の例のように、データを複数の IgxBarSeriesComponent
にバインドします:
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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartVerticalCategoryModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxDataChartCoreModule,
IgxDataChartCategoryCoreModule,
IgxDataChartCategoryModule,
IgxDataChartInteractivityModule,
IgxDataChartVerticalCategoryModule,
IgxDataChartAnnotationModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxCategoryHighlightLayerComponent, IgxBarSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxDataChartComponent
@ViewChild("yAxis", { static: true } )
private yAxis: IgxCategoryYAxisComponent
@ViewChild("xAxis", { static: true } )
private xAxis: IgxNumericXAxisComponent
@ViewChild("categoryHighlightLayer", { static: true } )
private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
@ViewChild("barSeries1", { static: true } )
private barSeries1: IgxBarSeriesComponent
@ViewChild("barSeries2", { static: true } )
private barSeries2: IgxBarSeriesComponent
@ViewChild("tooltips", { static: true } )
private tooltips: IgxDataToolTipLayerComponent
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Highest Grossing Movie Franchises
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-data-chart
name="Chart"
#chart
[legend]="legend">
<igx-category-y-axis
name="yAxis"
#yAxis
label="franchise"
useEnhancedIntervalManagement="true"
enhancedIntervalPreferMoreCategoryLabels="true"
[dataSource]="highestGrossingMovies"
isInverted="true"
gap="0.5"
overlap="-0.1">
</igx-category-y-axis>
<igx-numeric-x-axis
name="xAxis"
#xAxis
title="Billions of U.S. Dollars">
</igx-numeric-x-axis>
<igx-category-highlight-layer
name="CategoryHighlightLayer"
#categoryHighlightLayer>
</igx-category-highlight-layer>
<igx-bar-series
name="BarSeries1"
#barSeries1
[xAxis]="xAxis"
[yAxis]="yAxis"
title="Total Revenue of Franchise"
valueMemberPath="totalRevenue"
[dataSource]="highestGrossingMovies"
showDefaultTooltip="true"
isTransitionInEnabled="true"
isHighlightingEnabled="true">
</igx-bar-series>
<igx-bar-series
name="BarSeries2"
#barSeries2
[xAxis]="xAxis"
[yAxis]="yAxis"
title="Highest Grossing Movie in Series"
valueMemberPath="highestGrossing"
[dataSource]="highestGrossingMovies"
showDefaultTooltip="true"
isTransitionInEnabled="true"
isHighlightingEnabled="true">
</igx-bar-series>
<igx-data-tool-tip-layer
name="Tooltips"
#tooltips>
</igx-data-tool-tip-layer>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular 棒チャートのスタイル設定
棒チャートのスタイルを設定でき、パーセント比較を示すために各棒に注釈値を使用できます。IgxDataChartComponent
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgxBarSeriesComponent
にバインドし、IgxCalloutLayerComponent
を追加します。
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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartVerticalCategoryModule, IgxAnnotationLayerProxyModule, IgxCalloutLayerModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartCategoryModule,
IgxDataChartCategoryCoreModule,
IgxDataChartInteractivityModule,
IgxDataChartVerticalCategoryModule,
IgxAnnotationLayerProxyModule,
IgxCalloutLayerModule,
IgxDataChartAnnotationModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { OnlineShoppingSearchesItem, OnlineShoppingSearches } from './OnlineShoppingSearches';
import { IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxCategoryHighlightLayerComponent, IgxBarSeriesComponent, IgxCalloutLayerComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("chart", { static: true } )
private chart: IgxDataChartComponent
@ViewChild("yAxis", { static: true } )
private yAxis: IgxCategoryYAxisComponent
@ViewChild("xAxis", { static: true } )
private xAxis: IgxNumericXAxisComponent
@ViewChild("categoryHighlightLayer", { static: true } )
private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
@ViewChild("barSeries1", { static: true } )
private barSeries1: IgxBarSeriesComponent
@ViewChild("calloutLayer1", { static: true } )
private calloutLayer1: IgxCalloutLayerComponent
@ViewChild("tooltips", { static: true } )
private tooltips: IgxDataToolTipLayerComponent
private _onlineShoppingSearches: OnlineShoppingSearches = null;
public get onlineShoppingSearches(): OnlineShoppingSearches {
if (this._onlineShoppingSearches == null)
{
this._onlineShoppingSearches = new OnlineShoppingSearches();
}
return this._onlineShoppingSearches;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Where Online Shoppers Start Their Search
</div>
<div class="container fill">
<igx-data-chart
name="Chart"
#chart
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false">
<igx-category-y-axis
name="yAxis"
#yAxis
label="shop"
[dataSource]="onlineShoppingSearches"
isInverted="true"
gap="0.75">
</igx-category-y-axis>
<igx-numeric-x-axis
name="xAxis"
#xAxis
interval="20"
maximumValue="80"
minimumValue="0"
labelFormat="{0}%">
</igx-numeric-x-axis>
<igx-category-highlight-layer
name="CategoryHighlightLayer"
#categoryHighlightLayer>
</igx-category-highlight-layer>
<igx-bar-series
name="BarSeries1"
#barSeries1
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="percent"
[dataSource]="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">
</igx-bar-series>
<igx-callout-layer
name="CalloutLayer1"
#calloutLayer1
isAutoCalloutBehaviorEnabled="true"
calloutTextColor="rgba(133, 6, 138, 1)"
calloutBackground="rgba(0, 0, 0, 0)"
calloutLeaderBrush="rgba(0, 0, 0, 0)"
[dataSource]="onlineShoppingSearches">
</igx-callout-layer>
<igx-data-tool-tip-layer
name="Tooltips"
#tooltips>
</igx-data-tool-tip-layer>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular 積層型棒チャート
積層型棒チャート、または積層型棒グラフは、チャートの横棒にさまざまなサイズのフラグメントを表示することにより、さまざまなカテゴリのデータの構成を比較するために使用されるカテゴリ チャートの一種です。各棒または積層フラグメントの長さは、その全体的な値に比例します。
積層型棒チャートは、データを表すデータ ポイントが水平方向に隣り合って積み重ねられ、データを視覚的にグループ化するという点で、棒チャートとは異なります。各積層は正の値と負の値の両方を含みます。すべての正の値は X 軸の正の側にグループ化され、すべての負の値は X 軸の負の側にグループ化されます。
IgxDataChartComponent
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgxStackedBarSeriesComponent
にバインドします:
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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule, IgxCalloutLayerModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxDataChartCoreModule,
IgxDataChartCategoryModule,
IgxDataChartCategoryCoreModule,
IgxDataChartInteractivityModule,
IgxDataChartAnnotationModule,
IgxDataChartStackedModule,
IgxStackedFragmentSeriesModule,
IgxCalloutLayerModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxStackedBarSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxDataChartComponent
@ViewChild("yAxis", { static: true } )
private yAxis: IgxCategoryYAxisComponent
@ViewChild("xAxis", { static: true } )
private xAxis: IgxNumericXAxisComponent
@ViewChild("stackedBarSeries", { static: true } )
private stackedBarSeries: IgxStackedBarSeriesComponent
@ViewChild("s1", { static: true } )
private s1: IgxStackedFragmentSeriesComponent
@ViewChild("s2", { static: true } )
private s2: IgxStackedFragmentSeriesComponent
@ViewChild("s3", { static: true } )
private s3: IgxStackedFragmentSeriesComponent
@ViewChild("s4", { static: true } )
private s4: IgxStackedFragmentSeriesComponent
@ViewChild("dataToolTipLayer", { static: true } )
private dataToolTipLayer: IgxDataToolTipLayerComponent
private _energyRenewableConsumption: EnergyRenewableConsumption = null;
public get energyRenewableConsumption(): EnergyRenewableConsumption {
if (this._energyRenewableConsumption == null)
{
this._energyRenewableConsumption = new EnergyRenewableConsumption();
}
return this._energyRenewableConsumption;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Renewable Energy Consumption
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-data-chart
name="chart"
#chart
[legend]="legend"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false">
<igx-category-y-axis
name="yAxis"
#yAxis
[dataSource]="energyRenewableConsumption"
label="location"
isInverted="true"
gap="0.75">
</igx-category-y-axis>
<igx-numeric-x-axis
name="xAxis"
#xAxis
minimumValue="0"
title="TWh">
</igx-numeric-x-axis>
<igx-stacked-bar-series
name="stackedBarSeries"
#stackedBarSeries
[dataSource]="energyRenewableConsumption"
[xAxis]="xAxis"
[yAxis]="yAxis"
showDefaultTooltip="true"
areaFillOpacity="1">
<igx-stacked-fragment-series
name="s1"
#s1
valueMemberPath="hydro"
title="Hydro">
</igx-stacked-fragment-series>
<igx-stacked-fragment-series
name="s2"
#s2
valueMemberPath="wind"
title="Wind">
</igx-stacked-fragment-series>
<igx-stacked-fragment-series
name="s3"
#s3
valueMemberPath="solar"
title="Solar">
</igx-stacked-fragment-series>
<igx-stacked-fragment-series
name="s4"
#s4
valueMemberPath="other"
title="Other">
</igx-stacked-fragment-series>
</igx-stacked-bar-series>
<igx-data-tool-tip-layer
name="dataToolTipLayer"
#dataToolTipLayer>
</igx-data-tool-tip-layer>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular 積層型 100% 棒チャート
Angular 積層型 100% 棒チャートは、X 軸 (チャートの下のラベル) の値の処理を除いて、すべての点で Angular 積層型棒チャートと同じです。データを直接表現するのでなく、積層型棒チャートは、データ ポイント内のすべての値の合計の割合でデータを表します。
IgxDataChartComponent
コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgxStacked100BarSeriesComponent
にバインドします:
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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxDataChartCoreModule,
IgxDataChartCategoryModule,
IgxDataChartCategoryCoreModule,
IgxDataChartInteractivityModule,
IgxDataChartAnnotationModule,
IgxDataChartStackedModule,
IgxStackedFragmentSeriesModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxStacked100BarSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxDataChartComponent
@ViewChild("yAxis", { static: true } )
private yAxis: IgxCategoryYAxisComponent
@ViewChild("xAxis", { static: true } )
private xAxis: IgxNumericXAxisComponent
@ViewChild("stacked100BarSeries", { static: true } )
private stacked100BarSeries: IgxStacked100BarSeriesComponent
@ViewChild("s1", { static: true } )
private s1: IgxStackedFragmentSeriesComponent
@ViewChild("s2", { static: true } )
private s2: IgxStackedFragmentSeriesComponent
@ViewChild("s3", { static: true } )
private s3: IgxStackedFragmentSeriesComponent
@ViewChild("s4", { static: true } )
private s4: IgxStackedFragmentSeriesComponent
@ViewChild("dataToolTipLayer", { static: true } )
private dataToolTipLayer: IgxDataToolTipLayerComponent
private _energyRenewableConsumption: EnergyRenewableConsumption = null;
public get energyRenewableConsumption(): EnergyRenewableConsumption {
if (this._energyRenewableConsumption == null)
{
this._energyRenewableConsumption = new EnergyRenewableConsumption();
}
return this._energyRenewableConsumption;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Renewable Energy Consumption
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-data-chart
name="chart"
#chart
[legend]="legend"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false">
<igx-category-y-axis
name="yAxis"
#yAxis
[dataSource]="energyRenewableConsumption"
label="location"
isInverted="true">
</igx-category-y-axis>
<igx-numeric-x-axis
name="xAxis"
#xAxis
minimumValue="0"
title="TWh">
</igx-numeric-x-axis>
<igx-stacked-100-bar-series
name="stacked100BarSeries"
#stacked100BarSeries
[dataSource]="energyRenewableConsumption"
[xAxis]="xAxis"
[yAxis]="yAxis"
showDefaultTooltip="true"
areaFillOpacity="1">
<igx-stacked-fragment-series
name="s1"
#s1
valueMemberPath="hydro"
title="Hydro">
</igx-stacked-fragment-series>
<igx-stacked-fragment-series
name="s2"
#s2
valueMemberPath="wind"
title="Wind">
</igx-stacked-fragment-series>
<igx-stacked-fragment-series
name="s3"
#s3
valueMemberPath="solar"
title="Solar">
</igx-stacked-fragment-series>
<igx-stacked-fragment-series
name="s4"
#s4
valueMemberPath="other"
title="Other">
</igx-stacked-fragment-series>
</igx-stacked-100-bar-series>
<igx-data-tool-tip-layer
name="dataToolTipLayer"
#dataToolTipLayer>
</igx-data-tool-tip-layer>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
その他のリソース
関連するチャートタイプの詳細については、以下のトピックを参照してください。
API リファレンス
以下は、上記のセクションで説明されている API メンバーのリストです。
IgxDataChartComponent
ItemsSource
IgxBarSeriesComponent
IgxCalloutLayerComponent
IgxStackedBarSeriesComponent
IgxStacked100BarSeriesComponent
IgxStackedBarSeriesComponent