Angular チャート機能
Ignite UI for Angular チャートを使用すると、さまざまな機能を表示して、チャートで伝えられる完全なデータ ストーリーを表現できます。これらの各機能は完全にカスタマイズ可能であり、デザインのニーズにに合わせてスタイルを設定できるため、完全に制御できます。ハイライト表示や注釈などの操作により、重要なデータの詳細を呼び出すことができ、チャート内のより深いデータ分析が可能になります。
Angular チャートは、次のチャート機能を提供します。
軸
異なる軸プロパティを使用して、X 軸と Y 軸の両方のすべての側面を変更またはカスタマイズします。グリッド線を表示したり、目盛りのスタイルをカスタマイズしたり、軸のタイトルを変更したり、軸の位置や交差値を変更したりすることもできます。Angular チャートのカスタマイズについての詳細には、軸グリッド線 、軸レイアウト 、および軸オプション のトピックをご覧ください。
import { 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, IgxDataChartScatterModule, IgxLegendModule } from "igniteui-angular-charts" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartCategoryModule,
IgxDataChartScatterModule,
IgxLegendModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component } from "@angular/core" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent {
public SinData: any [];
public CosData: any [];
public YAxisCrossingValue : number = 0 ;
public XAxisCrossingValue : number = 0 ;
constructor ( ) {
this .SinData= [];
this .CosData= [];
for (let i = -360 ; i <= 360 ; i+=10 )
{
const radians = (i * Math .PI) / 180 ;
const sin = Math .sin(radians);
const cos = Math .cos(radians);
this .SinData.push( { X : i, Y : sin });
this .CosData.push( { X : i, Y : cos });
}
}
public OnXAxisCrossingValueChanged (e : any ) {
this .XAxisCrossingValue = e.target.value;
}
public OnYAxisCrossingValueChanged (e : any ) {
this .YAxisCrossingValue = e.target.value;
}
}
ts コピー <div class ="container vertical" >
<div class ="options horizontal" >
<label > X Axis Crossing Value: </label >
<label class ="options-value" > <span [textContent ]="XAxisCrossingValue" > </span > </label >
<input type ="range" min ="-1.25" max ="1.25" step ="0.25" value ="0" (input )="OnXAxisCrossingValueChanged($event)" />
<label > Y Axis Crossing Value: </label >
<label class ="options-value" > <span [textContent ]="YAxisCrossingValue" > </span > </label >
<input type ="range" min ="-360" max ="360" step ="40" value ="0" (input )="OnYAxisCrossingValueChanged($event)" />
</div >
<div class ="container" >
<igx-data-chart isHorizontalZoomEnabled =true isVerticalZoomEnabled =true
width ="100%" height ="100%" [dataSource ]="SinData" >
<igx-numeric-x-axis #xAxis interval ="40"
minimumValue ="-360"
maximumValue ="360"
labelLocation ="InsideBottom"
[crossingAxis ]="yAxis"
[crossingValue ]="XAxisCrossingValue" >
</igx-numeric-x-axis >
<igx-numeric-y-axis #yAxis
minimumValue ="-1.25"
maximumValue ="1.25"
interval ="0.25"
labelLocation ="InsideLeft"
[crossingAxis ]="xAxis"
[crossingValue ]="YAxisCrossingValue" >
</igx-numeric-y-axis >
<igx-scatter-spline-series markerType ="Circle"
[dataSource ]="SinData"
[xAxis ]="xAxis"
[yAxis ]="yAxis"
xMemberPath ="X"
yMemberPath ="Y" >
</igx-scatter-spline-series >
<igx-scatter-spline-series markerType ="Circle"
[dataSource ]="CosData"
[xAxis ]="xAxis"
[yAxis ]="yAxis"
xMemberPath ="X"
yMemberPath ="Y" >
</igx-scatter-spline-series >
</igx-data-chart >
</div >
html コピー
このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
注釈
これらの追加のレイヤーは、マウス/タッチに依存するほかのチャートレイヤーの上にあります。個別にまたは組み合わせて使用すると、チャート内の特定の値を強調するのに役立つ強力な操作を提供します。この機能の詳細については、チャート注釈 トピックを参照してください。
アニメーション
アニメーションを有効にして、新しいデータ ソースを読み込むときにチャートをアニメーション化します。これらは、さまざまなタイプのアニメーションとそれらのアニメーションが実行される速度を設定することでカスタマイズできます。この機能の詳細については、チャート アニメーション トピックを参照してください。
import { 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 { IgxCategoryChartModule, IgxLegendModule } from "igniteui-angular-charts" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxCategoryChartModule,
IgxLegendModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { ChangeDetectionStrategy, Component, ViewChild } from "@angular/core" ;
import { IgxCategoryChartComponent } from "igniteui-angular-charts" ;
@Component ({
standalone : false ,
changeDetection : ChangeDetectionStrategy.OnPush,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent {
public transitionInMode: string = "Auto" ;
public transitionInInterval: string = "1000" ;
public data: any [];
@ViewChild ("chart" , { static : true })
public chart: IgxCategoryChartComponent;
constructor ( ) {
this .data = this .generateData();
}
public onChangeAmountClicked ( ) {
this .data = this .generateData();
}
public OnTransitionIntervalChange (e: any ) {
this .transitionInInterval = e.target.value;
}
private generateData(): any [] {
const data: any [] = [
{ Year : "2009" , Europe : 31 , China : 21 , USA : 19 },
{ Year : "2010" , Europe : 43 , China : 26 , USA : 24 },
{ Year : "2011" , Europe : 66 , China : 29 , USA : 28 },
{ Year : "2012" , Europe : 69 , China : 32 , USA : 26 },
{ Year : "2013" , Europe : 58 , China : 47 , USA : 38 },
{ Year : "2014" , Europe : 40 , China : 46 , USA : 31 },
{ Year : "2015" , Europe : 78 , China : 50 , USA : 19 },
{ Year : "2016" , Europe : 13 , China : 90 , USA : 52 },
{ Year : "2017" , Europe : 78 , China : 132 , USA : 50 },
{ Year : "2018" , Europe : 40 , China : 134 , USA : 34 },
{ Year : "2019" , Europe : 80 , China : 96 , USA : 38 }
];
return data;
}
}
ts コピー <div class ="container vertical" >
<div class ="options horizontal" >
<label class ="options-label" > Transition Type: </label >
<select [(ngModel )]="transitionInMode" >
<option > AccordionFromBottom</option >
<option > AccordionFromCategoryAxisMaximum</option >
<option > AccordionFromCategoryAxisMinimum</option >
<option > AccordionFromLeft</option >
<option > AccordionFromRight</option >
<option > AccordionFromTop</option >
<option > AccordionFromValueAxisMaximum</option >
<option > AccordionFromValueAxisMinimum</option >
<option > Expand</option >
<option > FromZero</option >
<option > SweepFromBottom</option >
<option > SweepFromCategoryAxisMaximum</option >
<option > SweepFromCategoryAxisMinimum</option >
<option > SweepFromCenter</option >
<option > SweepFromLeft</option >
<option > SweepFromRight</option >
<option > SweepFromTop</option >
<option > SweepFromValueAxisMaximum</option >
<option > SweepFromValueAxisMinimum</option >
<option > Auto</option >
</select >
<button (click )="onChangeAmountClicked()" > Reload Chart</button >
<input class ="options-slider" type ="range" min ="50" max ="2000" step ="50"
[value ]="transitionInInterval" (change )="OnTransitionIntervalChange($event)" />
<label class ="options-label" > {{transitionInInterval}}ms</label >
</div >
<div class ="container" >
<igx-category-chart height ="100%"
chartType ="line"
[dataSource ]="data"
isTransitionInEnabled ="true"
[transitionInMode ]="transitionInMode"
[transitionInDuration ]="transitionInInterval"
yAxisLabelExtent ="40"
computedPlotAreaMarginMode ="series"
#chart >
</igx-category-chart >
</div >
</div >
html コピー
ハイライト表示
線、列、マーカーなどのビジュアルに、マウスをデータ項目の上に置いたときにハイライト表示して、フォーカスを合わせます。この機能は、すべてのチャート タイプで有効になっています。この機能の詳細については、チャートのハイライト表示 トピックを参照してください。
マーカー
チャート シリーズのマーカーを使用して値が主要なグリッド線の間にある場合でも、データ ポイントをすばやく識別します。これらは、スタイル、カラー、および形状で完全にカスタマイズ可能です。この機能の詳細については、チャート マーカー トピックを参照してください。
ナビゲーション
マウス、キーボード、およびタッチ操作でズームおよびパンすることにより、チャートをナビゲートできます。この機能の詳細については、チャート ナビゲーション トピックを参照してください。
オーバーレイ
オーバーレイを使用すると、チャートに水平線または垂直線をプロットして、重要な値としきい値に注釈を付けることができます。この機能の詳細については、チャート オーバーレイ トピックを参照してください。
パフォーマンス
Angular チャートは、数百万のデータ ポイントを描画し、それらを数ミリ秒ごとに更新する高性能のために最適化されています。ただし、チャートのパフォーマンスに影響を与えるいくつかのチャート機能があり、アプリケーションのパフォーマンスを最適化するときにそれらを考慮する必要があります。この機能の詳細については、チャート パフォーマンス トピックを参照してください。
ツールチップ
ツールチップを使用して、特定のシリーズ タイプに関連するすべての情報を表示します。項目レベルやカテゴリ レベルのツールチップなど、有効にできるさまざまなツールチップがあります。この機能の詳細については、チャート ツールチップ トピックを参照してください。
トレンドライン
トレンドラインを使用して、トレンドを特定したり、データ内のパターンを見つけたりします。Angular チャートでは、CubicFit や LinearFit など、さまざまなトレンドラインがサポートされています。この機能の詳細については、チャート トレンドライン トピックを参照してください。
API リファレンス