Angular チャート機能
Ignite UI for Angular チャートを使用すると、さまざまな機能を表示して、チャートで伝えられる完全なデータ ストーリーを表現できます。これらの各機能は完全にカスタマイズ可能であり、デザインのニーズにに合わせてスタイルを設定できるため、完全に制御できます。ハイライト表示や注釈などの操作により、重要なデータの詳細を呼び出すことができ、チャート内のより深いデータ分析が可能になります。
Angular チャートは、次のチャート機能を提供します。
60 以上のリアルタイム 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 {}
tsimport { 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/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
このサンプルが気に入りましたか? 完全な 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 {}
tsimport { ChangeDetectionStrategy, Component, OnInit, ViewChild } from "@angular/core";
import { IgxDataChartComponent } from "igniteui-angular-charts";
import { IgxCalloutLayerComponent } from "igniteui-angular-charts";
import { IgxSeriesComponent } from "igniteui-angular-charts";
@Component({
standalone: false,
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
public data: any[];
public calloutData: any[];
public crosshairsDisplay: string = "Both";
public crosshairAnnotations: boolean = true;
public finalValuesVisible: boolean = true;
public calloutsVisible: boolean = true;
public markerType: string = "Circle";
constructor() {
}
public ngOnInit() {
this.data = [
{ Year: "2009", USA: 19 },
{ Year: "2010", USA: 24 },
{ Year: "2011", USA: 28 },
{ Year: "2012", USA: 26 },
{ Year: "2013", USA: 38 },
{ Year: "2014", USA: 31 },
{ Year: "2015", USA: 19 },
{ Year: "2016", USA: 52 },
{ Year: "2017", USA: 50 },
{ Year: "2018", USA: 34 },
{ Year: "2019", USA: 38 },
];
this.calloutData = [];
for (let i = 0; i < this.data.length; i++) {
const item = this.data[i];
this.calloutData.push({ index: i, label: item.USA + " TWh", value: item.USA });
}
}
public OnCrosshairVisibilityChanged(e: any) {
const val = e.target.checked;
if (val) {
this.crosshairsDisplay = "Both";
}
else {
this.crosshairsDisplay = "None";
}
}
public OnMarkersVisibilityChanged(e: any) {
const val = e.target.checked;
if (val) {
this.markerType = "Circle";
}
else {
this.markerType = "None";
}
}
public OnCalloutsVisibilityChanged(e: any) {
this.calloutsVisible = e.target.checked;
}
public OnFinalValueVisibilityChanged(e: any) {
this.finalValuesVisible = e.target.checked;
}
}
ts<div class="container vertical">
<div class="options horizontal">
<label class="options-label">Annotations: </label>
<label class="options-item">
<input type="checkbox" checked=true (change)="OnCrosshairVisibilityChanged($event)" /> Crosshair
</label>
<label class="options-item">
<input type="checkbox" checked=true (change)="OnCalloutsVisibilityChanged($event)" /> Callouts
</label>
<label class="options-item">
<input type="checkbox" checked=true (change)="OnFinalValueVisibilityChanged($event)" /> Final Values
</label>
<label class="options-item">
<input type="checkbox" checked=true (change)="OnMarkersVisibilityChanged($event)" /> Markers
</label>
</div>
<div class="options vertical">
<label id="legendTitle">Renewable Electricity Generated</label>
</div>
<div class="container">
<igx-category-chart height="100%" width="100%"
[dataSource]="data"
chartType="line"
yAxisTitle="TWh"
yAxisTitleLeftMargin="5"
yAxisLabelLocation="OutsideRight"
crosshairsSnapToData="false"
[crosshairsDisplayMode]="crosshairsDisplay"
[crosshairsAnnotationEnabled]="crosshairAnnotations"
[finalValueAnnotationsVisible]="finalValuesVisible"
[calloutsVisible]="calloutsVisible"
[calloutsDataSource]="calloutData"
[markerTypes]="markerType"
calloutsXMemberPath="index"
calloutsYMemberPath="value"
calloutsLabelMemberPath="label"
computedPlotAreaMarginMode="series">
</igx-category-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
アニメーション
アニメーションを有効にして、新しいデータ ソースを読み込むときにチャートをアニメーション化します。これらは、さまざまなタイプのアニメーションとそれらのアニメーションが実行される速度を設定することでカスタマイズできます。この機能の詳細については、チャート アニメーショントピックを参照してください。
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 {}
tsimport { 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/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
ハイライト表示
線、列、マーカーなどのビジュアルに、マウスをデータ項目の上に置いたときにハイライト表示して、フォーカスを合わせます。この機能は、すべてのチャート タイプで有効になっています。この機能の詳細については、チャートのハイライト表示トピックを参照してください。
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 {}
tsimport { Component, AfterViewInit, ViewChild } from "@angular/core";
import { IgxCategoryChartComponent } from "igniteui-angular-charts";
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent implements AfterViewInit {
@ViewChild("chart", { static: true })
public chart: IgxCategoryChartComponent;
public isItemHighlightingEnabled: boolean = false;
public isSeriesHighlightingEnabled: boolean = true;
public isCategoryHighlightingEnabled: boolean = false;
public highlightMode: string = "Auto";
public highlightBehavior: string = "Auto";
public legendHighlightMode: string = "Auto";
public excludedProperties: any;
public data = [
{ Month: "JAN", NewYork : 10.6, LosAngeles : 28.3 },
{ Month: "FEB", NewYork : 7.8, LosAngeles : 31.1 },
{ Month: "MAR", NewYork : 12.2, LosAngeles : 27.8 },
{ Month: "APR", NewYork : 11.7, LosAngeles : 33.9 },
{ Month: "MAY", NewYork : 19.4, LosAngeles : 35.0 },
{ Month: "JUN", NewYork : 23.3, LosAngeles : 36.7 },
{ Month: "JUL", NewYork : 27.2, LosAngeles : 33.3 },
{ Month: "AUG", NewYork : 25.6, LosAngeles : 36.7 },
{ Month: "SEP", NewYork : 22.8, LosAngeles : 43.9 },
{ Month: "OCT", NewYork : 17.8, LosAngeles : 38.3 },
{ Month: "NOV", NewYork : 17.8, LosAngeles : 32.8 },
{ Month: "DEC", NewYork : 8.3, LosAngeles : 28.9 }
];
public OnEnableHighlightingChange = (e : any) => {
const value = e.target.value;
if(value=="Series"){
this.isItemHighlightingEnabled = false;
this.isSeriesHighlightingEnabled = true;
this.isCategoryHighlightingEnabled = false;
}
else if(value == "Item") {
this.isItemHighlightingEnabled = true;
this.isSeriesHighlightingEnabled = false;
this.isCategoryHighlightingEnabled = false;
}
else if(value == "Category") {
this.isItemHighlightingEnabled = false;
this.isSeriesHighlightingEnabled = false;
this.isCategoryHighlightingEnabled = true;
}
else if(value=="None") {
this.isItemHighlightingEnabled = false;
this.isSeriesHighlightingEnabled = false;
this.isCategoryHighlightingEnabled = false;
}
}
public ngAfterViewInit(): void {
}
constructor() { }
}
ts<div class="container vertical">
<div class="options vertical">
<div class="options horizontal">
<span style="margin-left: 0.25rem;">Highlight Target:</span>
<select (change)=OnEnableHighlightingChange($event) style="width: 7rem; margin-right: 1rem;">
<option>Series</option>
<option>Item</option>
<option>Category</option>
<option>None</option>
</select>
<span>Mode:</span>
<select [(ngModel)]="highlightMode" style="width: 7rem; margin-right: 1rem;">
<option>Auto</option>
<option>BrightenSpecific</option>
<option>Brighten</option>
<option>FadeOthersSpecific</option>
<option>FadeOthers</option>
<option>None</option>
</select>
<span>Behavior:</span>
<select [(ngModel)]="highlightBehavior" style="width: 7rem; margin-right: 1rem;">
<option>Auto</option>
<option>DirectlyOver</option>
<option>NearestItems</option>
<option>NearestItemsRetainMainShapes</option>
<option>NearestItemsAndSeries</option>
</select>
<span>Legend:</span>
<select [(ngModel)]="legendHighlightMode" style="width: 7rem; margin-right: 1rem;">
<option>Auto</option>
<option>None</option>
<option>MatchSeries</option>
</select>
</div>
<span id="legendTitle">Average Temperatures in the U.S. Cities</span>
<div class="legend" >
<igx-legend #legend orientation="Horizontal"></igx-legend>
</div>
</div>
<div class="container">
<igx-category-chart #chart height="100%" width="100%"
[legend]="legend"
[dataSource]="data"
chartType="Column"
[isCategoryHighlightingEnabled]="isCategoryHighlightingEnabled"
[isItemHighlightingEnabled]="isItemHighlightingEnabled"
[isSeriesHighlightingEnabled]="isSeriesHighlightingEnabled"
[legendHighlightingMode]="legendHighlightMode"
[highlightingMode]="highlightMode"
[highlightingBehavior]="highlightBehavior"
yAxisTitle="Temperatures in Celsius"
yAxisMinimumValue="0"
xAxisInterval="1">
</igx-category-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
マーカー
チャート シリーズのマーカーを使用して値が主要なグリッド線の間にある場合でも、データ ポイントをすばやく識別します。これらは、スタイル、カラー、および形状で完全にカスタマイズ可能です。この機能の詳細については、チャート マーカートピックを参照してください。
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { 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 { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts';
import { IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxPropertyEditorPanelModule,
IgxCategoryChartModule,
IgxDataChartInteractivityModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule, DataChartInteractivityDescriptionModule } from 'igniteui-angular-core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxPropertyEditorPropertyDescriptionChangedEventArgs, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';
import { IgxCategoryChartComponent, MarkerType, MarkerType_$type } from 'igniteui-angular-charts';
import { EnumUtil } from 'igniteui-angular-core';
import { IgxPropertyEditorPanelComponent } from 'igniteui-angular-layouts';
import { defineAllComponents } from 'igniteui-webcomponents';
defineAllComponents();
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("propertyEditor", { static: true } )
private propertyEditor: IgxPropertyEditorPanelComponent
@ViewChild("chartTypeEditor", { static: true } )
private chartTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
@ViewChild("markerTypeEditor", { static: true } )
private markerTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
@ViewChild("chart", { static: true } )
private chart: IgxCategoryChartComponent
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
CategoryChartDescriptionModule.register(context);
DataChartInteractivityDescriptionModule.register(context);
}
return this._componentRenderer;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
public editorChangeUpdateMarkerType({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void {
var item = sender as IgxPropertyEditorPropertyDescriptionComponent;
var chart = this.chart;
var markerVal = item.primitiveValue;
chart.markerTypes = markerVal;
}
}
ts<div class="container vertical sample">
<div class="options vertical">
<igx-property-editor-panel
name="PropertyEditor"
#propertyEditor
[componentRenderer]="renderer"
[target]="chart"
descriptionType="CategoryChart"
isHorizontal="true"
isWrappingEnabled="true">
<igx-property-editor-property-description
propertyPath="ChartType"
name="ChartTypeEditor"
#chartTypeEditor
label="Chart Type"
primitiveValue="Line">
</igx-property-editor-property-description>
<igx-property-editor-property-description
propertyPath="MarkerTypeHandler"
name="MarkerTypeEditor"
#markerTypeEditor
label="Marker Type"
shouldOverrideDefaultEditor="true"
valueType="EnumValue"
dropDownValues="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None"
dropDownNames="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None"
primitiveValue="Circle"
(changed)="this.editorChangeUpdateMarkerType($event)">
</igx-property-editor-property-description>
</igx-property-editor-panel>
</div>
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="container fill">
<igx-category-chart
name="chart"
#chart
isSeriesHighlightingEnabled="true"
chartType="Line"
[dataSource]="countryRenewableElectricity"
computedPlotAreaMarginMode="Series">
</igx-category-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
ナビゲーション
マウス、キーボード、およびタッチ操作でズームおよびパンすることにより、チャートをナビゲートできます。この機能の詳細については、チャート ナビゲーショントピックを参照してください。
import { Injectable } from "@angular/core";
@Injectable()
export class SampleScatterStats {
public static countries: Country[];
public static getCountries(count?: number): any[] {
if (this.countries === undefined) {
this.countries = this.initData();
}
if (count === undefined) {
count = 1000;
}
const items: Country[] = [];
for (let i = 0; i < this.countries.length; i++) {
const country = this.countries[i];
if (i < count) {
items.push(country);
}
}
// items = items.sort(this.sortByPopDescending);
return items;
}
public static getCountriesWithHighIncome(): any[] {
if (this.countries === undefined) {
this.countries = this.initData();
}
const items: any[] = [];
for (const country of this.countries) {
if (country.gdpPerCapita >= 10000) {
items.push(country);
}
}
return items;
}
public static getCountriesWithLowIncome(): any[] {
if (this.countries === undefined) {
this.countries = this.initData();
}
const items: any[] = [];
for (const country of this.countries) {
if (country.gdpPerCapita < 10000) {
items.push(country);
}
}
return items;
}
public static getCountriesWithLargePop(): any[] {
if (this.countries === undefined) {
this.countries = this.initData();
}
const items: any[] = [];
for (const country of this.countries) {
if (country.population >= 10000000) {
items.push(country);
}
}
return items;
}
public static getCountriesWithSmallPop(): any[] {
if (this.countries === undefined) {
this.countries = this.initData();
}
const items: any[] = [];
for (const country of this.countries) {
if (country.population < 10000000) {
items.push(country);
}
}
return items;
}
public static sortByPopDescending(a: Country, b: Country) {
if (a.population > b.population) { return 1; }
if (a.population < b.population) { return -1; }
return 0;
}
public static sortByPopAscending(a: Country, b: Country) {
if (a.population > b.population) { return -1; }
if (a.population < b.population) { return 1; }
return 0;
}
public static sortByGdpAscending(a: Country, b: Country) {
if (a.gdpPerCapita > b.gdpPerCapita) { return -1; }
if (a.gdpPerCapita < b.gdpPerCapita) { return 1; }
return 0;
}
public static sortByGdpDescending(a: Country, b: Country) {
if (a.gdpPerCapita > b.gdpPerCapita) { return 1; }
if (a.gdpPerCapita < b.gdpPerCapita) { return -1; }
return 0;
}
public static sortByDepDescending(a: Country, b: Country) {
if (a.dptPerCapita > b.dptPerCapita) { return 1; }
if (a.dptPerCapita < b.dptPerCapita) { return -1; }
return 0;
}
public static sortByDptAscending(a: Country, b: Country) {
if (a.dptPerCapita > b.dptPerCapita) { return -1; }
if (a.dptPerCapita < b.dptPerCapita) { return 1; }
return 0;
}
public static initData(): Country[] {
let data: Country[] = [];
// Code, Population, GDP per Capita, Debt per Capita, Mobile Phones (per 100 people), Name, Region
data.push(new Country("AFG", 29824536, 688, 92, 46, "Afghanistan", "Asia"));
data.push(new Country("ALB", 2801681, 4406, 882, 86, "Albania", "Europe"));
data.push(new Country("DZA", 38481705, 5310, 115, 88, "Algeria", "Africa"));
data.push(new Country("ADO", 78360, 40365, 15212, 84, "Andorra", "Europe"));
data.push(new Country("AGO", 20820525, 5539, 944, 48, "Angola", "Africa"));
data.push(new Country("ATG", 89069, 13406, 4388, 193, "Antigua and Barbuda", "North America"));
data.push(new Country("ARG", 41086927, 14680, 7759, 141, "Argentina", "South America"));
data.push(new Country("ARM", 2969081, 3354, 1584, 130, "Armenia", "Asia"));
data.push(new Country("ABW", 102384, 0, 4935, 130, "Aruba", "South America"));
data.push(new Country("AUS", 22723900, 67436, 52596, 100, "Australia", "Oceania"));
data.push(new Country("AUT", 8429991, 46792, 90128, 146, "Austria", "Europe"));
data.push(new Country("AZE", 9295784, 7394, 8513, 100, "Azerbaijan", "Asia"));
data.push(new Country("BHS", 371960, 21908, 1067, 119, "Bahamas", "North America"));
data.push(new Country("BHR", 1317827, 23040, 13261, 125, "Bahrain", "Asia"));
data.push(new Country("BGD", 154695368, 750, 149, 45, "Bangladesh", "Asia"));
data.push(new Country("BRB", 283221, 14917, 2456, 125, "Barbados", "North America"));
data.push(new Country("BLR", 9464000, 6722, 2629, 109, "Belarus", "Europe"));
data.push(new Country("BEL", 11128246, 43396, 113603, 111, "Belgium", "Europe"));
data.push(new Country("BLZ", 324060, 4852, 3079, 63, "Belize", "North America"));
data.push(new Country("BEN", 10050702, 751, 308, 74, "Benin", "Asia"));
data.push(new Country("BMU", 64798, 84471, 2575, 136, "Bermuda", "North America"));
data.push(new Country("BTN", 741822, 2509, 1193, 55, "Bhutan", "Asia"));
data.push(new Country("BOL", 10496285, 2576, 275, 71, "Bolivia", "South America"));
data.push(new Country("BIH", 3833916, 4396, 2052, 81, "Bosnia and Herzegovina", "Europe"));
data.push(new Country("BWA", 2003910, 7255, 1208, 120, "Botswana", "Africa"));
data.push(new Country("BRA", 198656019, 11320, 1608, 101, "Brazil", "South America"));
data.push(new Country("BRN", 412238, 41127, 0, 109, "Brunei", "Oceania"));
data.push(new Country("BGR", 7305888, 7022, 6261, 138, "Bulgaria", "Europe"));
data.push(new Country("BFA", 16460141, 652, 136, 37, "Burkina Faso", "Africa"));
data.push(new Country("BDI", 9849569, 251, 167, 18, "Burundi", "Africa"));
data.push(new Country("CPV", 494401, 3554, 714, 76, "Cabo Verde", "Africa"));
data.push(new Country("KHM", 14864646, 945, 304, 57, "Cambodia", "Asia"));
data.push(new Country("CMR", 21699631, 1220, 164, 42, "Cameroon", "Africa"));
data.push(new Country("CAN", 34754312, 52409, 29625, 76, "Canada", "North America"));
data.push(new Country("CYM", 57570, 0, 2078, 181, "Cayman Islands", "North America"));
data.push(new Country("CAF", 4525209, 479, 270, 23, "Central African Republic", "Africa"));
data.push(new Country("TCD", 12448175, 1035, 160, 25, "Chad", "Africa"));
data.push(new Country("CHL", 17464814, 15245, 5867, 116, "Chile", "South America"));
data.push(new Country("CHN", 1350695000, 6093, 2221, 63, "China", "Asia"));
data.push(new Country("COL", 47704427, 7763, 1269, 96, "Colombia", "South America"));
data.push(new Country("COM", 717503, 831, 430, 24, "Comoros", "Africa"));
data.push(new Country("ZAR", 65705093, 418, 197, 19, "Congo Dem. Rep.", "Africa"));
data.push(new Country("COG", 4337051, 3154, 1722, 90, "Congo Rep.", "Africa"));
data.push(new Country("CRI", 4805295, 9443, 1874, 67, "Costa Rica", "North America"));
data.push(new Country("CIV", 19839750, 1244, 527, 82, "Cote d'Ivoire", "Africa"));
data.push(new Country("HRV", 4267558, 13159, 13519, 114, "Croatia", "Europe"));
data.push(new Country("CUB", 11270957, 0, 1780, 9, "Cuba", "North America"));
data.push(new Country("CUW", 152056, 0, 0, 138, "Curacao", "North America"));
data.push(new Country("CYP", 1128994, 26352, 37812, 94, "Cyprus", "Europe"));
data.push(new Country("CZE", 10510785, 18690, 8260, 123, "Czech Republic", "Europe"));
data.push(new Country("DNK", 5591572, 56364, 101084, 116, "Denmark", "Europe"));
data.push(new Country("DJI", 859652, 1575, 573, 20, "Djibouti", "Africa"));
data.push(new Country("DMA", 71684, 6913, 3000, 148, "Dominica", "North America"));
data.push(new Country("DOM", 10276621, 5733, 1162, 89, "Dominican Republic", "North America"));
data.push(new Country("ECU", 15492264, 5425, 995, 99, "Ecuador", "South America"));
data.push(new Country("EGY", 80721874, 3256, 391, 91, "Egypt", "Africa"));
data.push(new Country("SLV", 6297394, 3782, 1953, 124, "El Salvador", "North America"));
data.push(new Country("GNQ", 736296, 22391, 634, 57, "Equatorial Guinea", "Africa"));
data.push(new Country("ERI", 6130922, 504, 195, 3, "Eritrea", "Africa"));
data.push(new Country("EST", 1325016, 16887, 16944, 127, "Estonia", "Europe"));
data.push(new Country("ETH", 91728849, 467, 51, 8, "Ethiopia", "Africa"));
data.push(new Country("EUU", 505640311, 32917, 0, 118, "Euroean Union", "Europe"));
data.push(new Country("FRO", 49506, 0, 0, 120, "Faeroe Islands", "Europe"));
data.push(new Country("FJI", 874742, 4613, 150, 81, "Fiji", "Oceania"));
data.push(new Country("FIN", 5413971, 45649, 68960, 156, "Finland", "Europe"));
data.push(new Country("FRA", 65676758, 39759, 74619, 91, "France", "Europe"));
data.push(new Country("GAB", 1632572, 10930, 1587, 103, "Gabon", "Africa"));
data.push(new Country("GMB", 1791225, 510, 306, 88, "Gambia", "Africa"));
data.push(new Country("GEO", 4490700, 3529, 1940, 91, "Georgia", "Asia"));
data.push(new Country("DEU", 80425823, 42598, 57755, 106, "Germany", "Europe"));
data.push(new Country("GHA", 25366462, 1646, 274, 72, "Ghana", "Africa"));
data.push(new Country("GRC", 11092771, 22395, 47636, 111, "Greece", "Europe"));
data.push(new Country("GRL", 56810, 0, 1035, 101, "Greenland", "Europe"));
data.push(new Country("GRD", 105483, 7598, 3402, 116, "Grenada", "North America"));
data.push(new Country("GTM", 15082831, 3341, 1216, 126, "Guatemala", "North America"));
data.push(new Country("GIN", 11451273, 493, 305, 37, "Guinea", "Asia"));
data.push(new Country("GNB", 1663558, 494, 722, 43, "Guinea-Bissau", "Asia"));
data.push(new Country("GUY", 795369, 3585, 1049, 71, "Guyana", "South America"));
data.push(new Country("HTI", 10173775, 776, 36, 40, "Haiti", "North America"));
data.push(new Country("HND", 7935846, 2339, 465, 125, "Honduras", "North America"));
data.push(new Country("HKG", 7154600, 36708, 105420, 196, "Hong Kong", "Asia"));
data.push(new Country("HUN", 9920362, 12560, 14821, 120, "Hungary", "Europe"));
data.push(new Country("ISL", 320716, 42362, 362942, 107, "Iceland", "Europe"));
data.push(new Country("IND", 1236686732, 1503, 240, 62, "India", "Asia"));
data.push(new Country("IDN", 246864191, 3551, 837, 88, "Indonesia", "Asia"));
data.push(new Country("IRN", 76424443, 6578, 170, 73, "Iran", "Asia"));
data.push(new Country("IRQ", 32578209, 6625, 1641, 75, "Iraq", "Asia"));
data.push(new Country("IRL", 4586897, 45922, 512083, 105, "Ireland", "Europe"));
data.push(new Country("ISR", 7910500, 32567, 12070, 123, "Israel", "Asia"));
data.push(new Country("ITA", 59539717, 33814, 36841, 155, "Italy", "Europe"));
data.push(new Country("JAM", 2707805, 5464, 4660, 116, "Jamaica", "North America"));
data.push(new Country("JPN", 127561489, 46548, 24000, 97, "Japan", "Asia"));
data.push(new Country("JOR", 6318000, 4909, 903, 103, "Jordan", "Asia"));
data.push(new Country("KAZ", 16791425, 12120, 6060, 122, "Kazakhstan", "Asia"));
data.push(new Country("KEN", 43178141, 933, 200, 61, "Kenya", "Africa"));
data.push(new Country("KIR", 100786, 1736, 120, 11, "Kiribati", "Oceania"));
data.push(new Country("PRK", 24763188, 0, 544, 2, "Korea North", "Asia"));
data.push(new Country("KOR", 50004441, 24454, 7567, 105, "Korea South", "Asia"));
data.push(new Country("KSV", 1807106, 3567, 0, 0, "Kosovo", "Europe"));
data.push(new Country("KWT", 3250496, 56367, 15754, 133, "Kuwait", "Asia"));
data.push(new Country("KGZ", 5607200, 1178, 699, 99, "Kyrgyzstan", "Asia"));
data.push(new Country("LAO", 6645827, 1412, 900, 63, "Laos", "Asia"));
data.push(new Country("LVA", 2034319, 13947, 18527, 110, "Latvia", "Europe"));
data.push(new Country("LBN", 4424888, 9764, 8815, 66, "Lebanon", "Asia"));
data.push(new Country("LSO", 2051545, 1135, 255, 49, "Lesotho", "Africa"));
data.push(new Country("LBR", 4190435, 414, 65, 40, "Liberia", "Africa"));
data.push(new Country("LBY", 6154623, 13303, 972, 180, "Libya", "Africa"));
data.push(new Country("LIE", 36656, 0, 0, 98, "Liechtenstein", "Europe"));
data.push(new Country("LTU", 2987773, 14172, 9995, 159, "Lithuania", "Europe"));
data.push(new Country("LUX", 530946, 103859, 3696467, 143, "Luxembourg", "Europe"));
data.push(new Country("MAC", 556783, 77196, 0, 210, "Macao", "Asia"));
data.push(new Country("MKD", 2105575, 4548, 2668, 102, "Macedonia", "Europe"));
data.push(new Country("MDG", 22293914, 443, 140, 37, "Madagascar", "Africa"));
data.push(new Country("MWI", 15906483, 267, 77, 21, "Malawi", "Africa"));
data.push(new Country("MYS", 29239927, 10432, 2570, 120, "Malaysia", "Asia"));
data.push(new Country("MDV", 338442, 6244, 2947, 152, "Maldives", "Oceania"));
data.push(new Country("MLI", 14853572, 696, 254, 53, "Mali", "Africa"));
data.push(new Country("MLT", 419455, 20839, 14233, 107, "Malta", "Europe"));
data.push(new Country("MHL", 52555, 3292, 1377, 0, "Marshall Islands", "Oceania"));
data.push(new Country("MRT", 3796141, 1043, 831, 77, "Mauritania", "Africa"));
data.push(new Country("MUS", 1291167, 8862, 3937, 97, "Mauritius", "Africa"));
data.push(new Country("MEX", 120847477, 9818, 1956, 78, "Mexico", "North America"));
data.push(new Country("FSM", 103395, 3155, 556, 27, "Micronesia", "Oceania"));
data.push(new Country("MDA", 3559519, 2047, 1296, 71, "Moldova", "Europe"));
data.push(new Country("MCO", 37579, 0, 471428, 64, "Monaco", "Europe"));
data.push(new Country("MNG", 2796484, 3691, 686, 93, "Mongolia", "Asia"));
data.push(new Country("MNE", 621081, 6514, 939, 189, "Montenegro", "Europe"));
data.push(new Country("MAR", 32521143, 2902, 712, 101, "Morocco", "Africa"));
data.push(new Country("MOZ", 25203395, 570, 231, 30, "Mozambique", "Africa"));
data.push(new Country("MMR", 52797319, 0, 117, 1, "Myanmar", "Asia"));
data.push(new Country("NAM", 2259393, 5931, 1131, 90, "Namibia", "Africa"));
data.push(new Country("NPL", 27474377, 699, 161, 34, "Nepal", "Asia"));
data.push(new Country("NLD", 16754962, 45961, 226503, 115, "Netherlands", "Europe"));
data.push(new Country("NCL", 258000, 0, 385, 90, "New Caledonia", "Oceania"));
data.push(new Country("NZL", 4433000, 38680, 52300, 108, "New Zealand", "Oceania"));
data.push(new Country("NIC", 5991733, 1777, 693, 68, "Nicaragua", "North America"));
data.push(new Country("NER", 17157042, 395, 178, 23, "Niger", "Africa"));
data.push(new Country("NGA", 168833776, 2722, 71, 55, "Nigeria", "Africa"));
data.push(new Country("NAC", 348692795, 51826, 0, 90, "North America", "North America"));
data.push(new Country("NOR", 5018573, 99636, 131220, 114, "Norway", "Europe"));
data.push(new Country("OMN", 3314001, 23624, 2962, 164, "Oman", "Asia"));
data.push(new Country("PAK", 179160111, 1255, 366, 57, "Pakistan", "Asia"));
data.push(new Country("PLW", 20754, 11202, 0, 71, "Palau", "Oceania"));
data.push(new Country("PAN", 3802281, 9982, 3927, 181, "Panama", "North America"));
data.push(new Country("PNG", 7167010, 2184, 238, 28, "Papua New Guinea", "Oceania"));
data.push(new Country("PRY", 6687361, 3680, 382, 92, "Paraguay", "South America"));
data.push(new Country("PER", 29987800, 6424, 1126, 100, "Peru", "South America"));
data.push(new Country("PHL", 96706764, 2587, 636, 89, "Philippines", "Asia"));
data.push(new Country("POL", 38535873, 12721, 6586, 123, "Poland", "Europe"));
data.push(new Country("PRT", 10514844, 20175, 47835, 115, "Portugal", "Europe"));
data.push(new Country("PRI", 3651545, 27795, 15692, 79, "Puerto Rico", "North America"));
data.push(new Country("QAT", 2050514, 92633, 41988, 125, "Qatar", "Asia"));
data.push(new Country("ROM", 20076727, 8437, 5082, 111, "Romania", "Europe"));
data.push(new Country("RUS", 143178000, 14091, 3634, 166, "Russian", "Asia"));
data.push(new Country("RWA", 11457801, 623, 284, 33, "Rwanda", "Africa"));
data.push(new Country("WSM", 188889, 3623, 968, 0, "Samoa", "Oceania"));
data.push(new Country("SMR", 31247, 0, 8388, 99, "San Marino", "Europe"));
data.push(new Country("STP", 188098, 1400, 2193, 58, "Sao Tome and Principe", "Oceania"));
data.push(new Country("SAU", 28287855, 25946, 3176, 189, "Saudi Arabia", "Asia"));
data.push(new Country("SEN", 13726021, 1023, 296, 64, "Senegal", "Africa"));
data.push(new Country("SRB", 7199077, 5294, 4178, 125, "Serbia", "Europe"));
data.push(new Country("SYC", 88303, 11689, 15614, 129, "Seychelles", "Africa"));
data.push(new Country("SLE", 5978727, 633, 340, 35, "Sierra Leone", "Africa"));
data.push(new Country("SGP", 5312400, 54007, 0, 145, "Singapore", "Asia"));
data.push(new Country("SVK", 5407579, 16893, 10926, 109, "Slovakia", "Europe"));
data.push(new Country("SVN", 2057159, 22059, 25555, 103, "Slovenia", "Europe"));
data.push(new Country("SLB", 549598, 1819, 355, 22, "Solomon Islands", "Oceania"));
data.push(new Country("SOM", 10195134, 0, 386, 7, "Somalia", "Africa"));
data.push(new Country("ZAF", 52274945, 7314, 1613, 98, "South Africa", "Africa"));
data.push(new Country("SAS", 1649249388, 1396, 0, 60, "South Asia", "South Asia"));
data.push(new Country("SSD", 10837527, 974, 0, 0, "South Sudan", "Africa"));
data.push(new Country("ESP", 46761264, 28282, 52045, 111, "Spain", "Europe"));
data.push(new Country("LKA", 20328000, 2922, 881, 84, "Sri Lanka", "Asia"));
data.push(new Country("KNA", 53584, 13658, 6408, 153, "St. Kitts and Nevis", "North America"));
data.push(new Country("LCA", 180870, 7288, 1586, 112, "St. Lucia", "North America"));
data.push(new Country("VCT", 109373, 6349, 4477, 121, "St. Vincent and the Grenadines", "North America"));
data.push(new Country("SXM", 30959, 0, 0, 0, "Sint Maarten", "North America"));
data.push(new Country("SDN", 37195349, 1695, 946, 42, "Sudan", "Africa"));
data.push(new Country("SUR", 534541, 9376, 1011, 99, "Suriname", "South America"));
data.push(new Country("SWZ", 1230985, 3290, 428, 61, "Swaziland", "Africa"));
data.push(new Country("SWE", 9519374, 55039, 91487, 117, "Sweden", "Europe"));
data.push(new Country("CHE", 7996861, 78929, 154063, 123, "Switzerland", "Europe"));
data.push(new Country("SYR", 22399254, 0, 373, 54, "Syria", "Asia"));
data.push(new Country("TJK", 8008990, 953, 262, 78, "Tajikistan", "Asia"));
data.push(new Country("TZA", 47783107, 609, 183, 47, "Tanzania", "Africa"));
data.push(new Country("THA", 66785001, 5480, 1292, 108, "Thailand", "Asia"));
data.push(new Country("TMP", 1148958, 1179, 0, 44, "East Timor", "Oceania"));
data.push(new Country("TGO", 6642928, 589, 0, 41, "Togo", "Africa"));
data.push(new Country("TON", 104941, 4494, 799, 52, "Tonga", "Africa"));
data.push(new Country("TTO", 1337439, 17523, 3502, 143, "Trinidad and Tobago", "North America"));
data.push(new Country("TUN", 10777500, 4197, 1779, 105, "Tunisia", "Africa"));
data.push(new Country("TUR", 73997128, 10661, 3794, 86, "Turkey", "Asia"));
data.push(new Country("TKM", 5172931, 6798, 978, 63, "Turkmenistan", "Asia"));
data.push(new Country("TUV", 9860, 4044, 0, 16, "Tuvalu", "Oceania"));
data.push(new Country("UGA", 36345860, 551, 85, 38, "Uganda", "Africa"));
data.push(new Country("UKR", 45593300, 3873, 2144, 117, "Ukraine", "Europe"));
data.push(new Country("ARE", 9205651, 41692, 24273, 129, "United Arab Emirates", "Asia"));
data.push(new Country("GBR", 63695687, 38649, 160158, 124, "United Kingdom", "Europe"));
data.push(new Country("USA", 313873685, 51755, 52170, 91, "United States", "North America"));
data.push(new Country("URY", 3395253, 14728, 3989, 132, "Uruguay", "South America"));
data.push(new Country("UZB", 29774500, 1719, 150, 76, "Uzbekistan", "Asia"));
data.push(new Country("VUT", 247262, 3183, 389, 72, "Vanuatu", "Oceania"));
data.push(new Country("VEN", 29954782, 12729, 1906, 96, "Venezuela", "South America"));
data.push(new Country("VNM", 88772900, 1755, 379, 125, "Vietnam", "Asia"));
data.push(new Country("WBG", 4046901, 2530, 414, 65, "Palestine", "Asia"));
data.push(new Country("YEM", 23852409, 1341, 293, 49, "Yemen Rep.", "Asia"));
data.push(new Country("ZMB", 14075099, 1463, 264, 41, "Zambia", "Africa"));
data.push(new Country("ZWE", 13724317, 909, 609, 59, "Zimbabwe", "Africa"));
// data = data.sort(this.sortByPopAscending);
data = data.sort(this.sortByPopDescending);
const countries: Country[] = [];
for (const country of data) {
if (country.isValid()) {
countries.push(country);
}
}
return countries;
}
public static abbreviate(value: number): string {
const suffixes = ["", "K", "M", "B", "T"];
const suffixNum = Math.floor(("" + value).length / 3);
const shortValue = parseFloat((suffixNum !== 0 ? (value / Math.pow(1000, suffixNum)) : value).toFixed(1));
return shortValue + suffixes[suffixNum];
}
}
class Country {
public population: number;
public gdpPerCapita: number;
public gdpTotal: number;
public dptPerCapita: number;
public phonePer100: number;
public code: string;
public name: string;
public region: string;
constructor(code: string, pop: number, gdp: number, dpt: number, phones: number, name: string, region: string) {
this.code = code;
this.region = region;
this.name = name;
this.population = pop;
this.gdpPerCapita = gdp;
this.gdpTotal = gdp * pop;
this.dptPerCapita = dpt;
this.phonePer100 = phones;
}
public getPopulation(): string {
return SampleScatterStats.abbreviate(this.population);
}
public getGdpTotal(): string {
return SampleScatterStats.abbreviate(this.gdpTotal);
}
public getGdpPerCapita(): string {
return SampleScatterStats.abbreviate(this.gdpPerCapita);
}
public isValid(): boolean {
return this.gdpPerCapita > 0 && this.population > 0 &&
this.dptPerCapita > 0 && this.phonePer100 > 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, IgxDataChartScatterCoreModule, IgxDataChartScatterModule, IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartInteractivityModule } from "igniteui-angular-charts";
import { SampleScatterStats } from "./SampleScatterStats";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartScatterCoreModule,
IgxDataChartScatterModule,
IgxLegendModule,
IgxNumberAbbreviatorModule,
IgxDataChartInteractivityModule
],
providers: [SampleScatterStats],
schemas: []
})
export class AppModule {}
tsimport { Component, OnInit, ViewChild } from "@angular/core";
import { IgxDataChartComponent } from "igniteui-angular-charts";
import { IgxNumericXAxisComponent } from "igniteui-angular-charts";
import { IgxNumericYAxisComponent } from "igniteui-angular-charts";
import { IgxBubbleSeriesComponent } from "igniteui-angular-charts";
import { IgxSizeScaleComponent } from "igniteui-angular-charts";
import { SampleScatterStats } from "./SampleScatterStats";
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
public data: any[];
public isZoomEnabled: boolean = true;
public defaultInteraction: string = "DragZoom";
public panModifier: string = "None";
public zoomModifier: string = "None";
@ViewChild("xAxis", { static: true })
public xAxis: IgxNumericXAxisComponent;
@ViewChild("yAxis", { static: true })
public yAxis: IgxNumericYAxisComponent;
@ViewChild("chart", { static: true })
public chart: IgxDataChartComponent;
constructor() {
this.data = SampleScatterStats.getCountriesWithHighIncome();
}
public ngOnInit() {
this.createSeries();
this.chart.actualWindowScaleHorizontal = 0.6;
this.chart.actualWindowScaleVertical = 0.6;
this.chart.actualWindowPositionVertical = 0.2;
this.chart.actualWindowPositionHorizontal = 0.2;
}
public onPanUpClick() {
this.chart.actualWindowPositionVertical -= 0.05;
}
public onPanDownClick() {
this.chart.actualWindowPositionVertical += 0.05;
}
public onPanRightClick() {
this.chart.actualWindowPositionHorizontal += 0.05;
}
public onPanLeftClick() {
this.chart.actualWindowPositionHorizontal -= 0.05;
}
public createSeries() {
const sizeScale = new IgxSizeScaleComponent();
sizeScale.minimumValue = 10;
sizeScale.maximumValue = 60;
const series = new IgxBubbleSeriesComponent();
series.title = "Countries";
series.dataSource = SampleScatterStats.getCountries();
series.showDefaultTooltip = true;
series.xMemberPath = "population";
series.yMemberPath = "gdpTotal";
series.radiusMemberPath = "gdpPerCapita";
series.radiusScale = sizeScale;
series.xAxis = this.xAxis;
series.yAxis = this.yAxis;
this.chart.series.clear();
this.chart.series.add(series);
}
}
ts<div class="container vertical">
<div class="options horizontal">
<span class="options-item">Default Drag Option:</span>
<select [(ngModel)]="defaultInteraction">
<option>DragZoom</option>
<option>DragPan</option>
<option>None</option>
</select>
<span class="options-item">Pan Modifier:</span>
<select [(ngModel)]="panModifier">
<option>Alt</option>
<option>Control</option>
<option>Shift</option>
<option>Windows</option>
<option>Apple</option>
<option>None</option>
</select>
<span class="options-item">Zoom Modifier:</span>
<select [(ngModel)]="zoomModifier">
<option>Alt</option>
<option>Control</option>
<option>Shift</option>
<option>Windows</option>
<option>Apple</option>
<option>None</option>
</select>
</div>
<div class="options horizontal">
<label class="options-item"><input type="checkbox" [(ngModel)]="isZoomEnabled" /> Enable Zooming</label>
<button class="options-item" (click)="onPanUpClick()">Pan Up</button>
<button class="options-item" (click)="onPanDownClick()">Pan Down</button>
<button class="options-item" (click)="onPanLeftClick()">Pan Left</button>
<button class="options-item" (click)="onPanRightClick()">Pan Right</button>
</div>
<div class="container">
<igx-data-chart #chart [dataSource]="data"
width="100%"
height="100%"
[defaultInteraction]="defaultInteraction"
[dragModifier]="zoomModifier"
[panModifier]="panModifier"
[isHorizontalZoomEnabled]="isZoomEnabled"
[isVerticalZoomEnabled]="isZoomEnabled">
<igx-numeric-x-axis #xAxis
isLogarithmic=true
abbreviateLargeNumbers=true
title="Population">
</igx-numeric-x-axis>
<igx-numeric-y-axis #yAxis
isLogarithmic=true
abbreviateLargeNumbers=true
title="Total GDP ($)">
</igx-numeric-y-axis>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
オーバーレイ
オーバーレイを使用すると、チャートに水平線または垂直線をプロットして、重要な値としきい値に注釈を付けることができます。この機能の詳細については、チャート オーバーレイトピックを参照してください。
import { Injectable } from "@angular/core";
@Injectable()
export class SharedData {
public static getEnergyProduction() {
const data: any[] = [
{
Coal: 400000000,
Country: "Canada",
Gas: 175000000,
Hydro: 350000000,
Nuclear: 225000000,
Oil: 100000000
},
{
Coal: 925000000,
Country: "China",
Gas: 350000000,
Hydro: 625000000,
Nuclear: 400000000,
Oil: 200000000
},
{
Coal: 550000000,
Country: "Russia",
Gas: 250000000,
Hydro: 425000000,
Nuclear: 475000000,
Oil: 200000000
},
{
Coal: 450000000,
Country: "Australia",
Gas: 150000000,
Hydro: 350000000,
Nuclear: 175000000,
Oil: 100000000
},
{
Coal: 800000000,
Country: "United States",
Gas: 475000000,
Hydro: 750000000,
Nuclear: 575000000,
Oil: 250000000
},
{
Coal: 375000000,
Country: "France",
Gas: 350000000,
Hydro: 325000000,
Nuclear: 275000000,
Oil: 150000000
}
];
return data;
}
public static getItems(startValue: number, maxPoints: number, useShortLabels?: boolean): any[] {
const data: any[] = [];
let value = startValue;
for (let i = 0; i <= maxPoints; i++) {
value += Math.random() * 4.0 - 2.0;
const v = Math.round(value);
let l = i.toString();
if (useShortLabels) {
l = this.toShortString(i);
}
data.push({ Label: l, Value: v });
}
return data;
}
public static getTemperatures(startValue: number, startYear: number, endYear: number): any[] {
const data: any[] = [];
let value = startValue;
for (let i = startYear; i <= endYear; i++) {
value += (Math.random() - 0.5) * 0.5;
const high = value + (Math.random() * 2);
const low = value - (Math.random() * 2);
const v = Math.abs(Math.round(value * 10) / 10);
const h = Math.abs(Math.round(high * 10) / 10);
const l = Math.abs(Math.round(low * 10) / 10);
data.push({ Label: i.toString(), Value: v, High: h, Low: l });
}
return data;
}
public static getLastItem(array: any[]): any {
if (array.length === 0) {
return null;
}
return array[array.length - 1];
}
public static getNewItem(array: any[], index: number): any {
const lastItem = this.getLastItem(array);
const newValue = lastItem.Value + Math.random() * 4.0 - 2.0;
return { Label: index.toString(), Value: newValue };
}
public static toShortString(largeValue: number): string {
let roundValue: number;
if (largeValue >= 1000000) {
roundValue = Math.round(largeValue / 100000) / 10;
return roundValue + "m";
}
if (largeValue >= 1000) {
roundValue = Math.round(largeValue / 100) / 10;
return roundValue + "k";
}
roundValue = Math.round(largeValue);
return roundValue + "";
}
public static addDays(date: Date, days: number): Date {
date.setDate(date.getDate() + days);
return date;
}
}
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, IgxValueOverlayModule, IgxLegendModule } from "igniteui-angular-charts";
import { SharedData } from "./SharedData";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartCategoryModule,
IgxValueOverlayModule,
IgxLegendModule
],
providers: [SharedData],
schemas: []
})
export class AppModule {}
tsimport { Component, OnInit } from "@angular/core";
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent {
public data: any[];
constructor() {
this.initData();
}
public initData() {
this.data = [
{ Label: 1, Value: 1.0 },
{ Label: 2, Value: 2.0 },
{ Label: 3, Value: 6.0 },
{ Label: 4, Value: 8.0 },
{ Label: 5, Value: 2.0 },
{ Label: 6, Value: 6.0 },
{ Label: 7, Value: 4.0 },
{ Label: 8, Value: 2.0 },
{ Label: 9, Value: 1.0 }
];
}
}
ts<div class="container vertical">
<igx-legend #legend orientation="horizontal"></igx-legend>
<igx-data-chart #chart height="100%" width="100%" [dataSource]="data">
<igx-category-x-axis #xAxis label="Label"></igx-category-x-axis>
<igx-numeric-y-axis #yAxis minimumValue=0 maximumValue=10></igx-numeric-y-axis>
<igx-column-series [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Value" showDefaultTooltip=true
markerType="None"></igx-column-series>
<igx-value-overlay [axis]="yAxis" value=2.0 thickness=5></igx-value-overlay>
<igx-value-overlay [axis]="yAxis" value=3.6 thickness=5></igx-value-overlay>
<igx-value-overlay [axis]="yAxis" value=5.8 thickness=5></igx-value-overlay>
<igx-value-overlay [axis]="yAxis" value=1.0 thickness=5></igx-value-overlay>
<igx-value-overlay [axis]="yAxis" value=8.0 thickness=5></igx-value-overlay>
<igx-value-overlay [axis]="yAxis" value=7.0 thickness=5></igx-value-overlay>
<igx-value-overlay [axis]="yAxis" value=5.0 thickness=5></igx-value-overlay>
</igx-data-chart>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
パフォーマンス
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";
import { IgxSliderModule } from "igniteui-angular";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxCategoryChartModule,
IgxLegendModule,
IgxSliderModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, NgZone, OnDestroy, ViewChild } from "@angular/core";
import { IgxAssigningCategoryStyleEventArgs } from "igniteui-angular-charts";
import { IgxCategoryChartComponent } from "igniteui-angular-charts";
import { IgxChartSeriesEventArgs } from "igniteui-angular-charts";
import { IgxHorizontalAnchoredCategorySeriesComponent } from "igniteui-angular-charts";
@Component({
standalone: false,
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent implements AfterViewInit, OnDestroy {
@Input()
public scalingRatio: number = 1;
@ViewChild("chart", { static: true })
public chart: IgxCategoryChartComponent;
private currValue: number = 15;
private currIndex: number = 0;
private _maxPoints: number = 500000;
private _refreshMilliseconds: number = 10;
private _interval: number = -1;
private _frames: number = 0;
private _time: Date;
private _assigningData: boolean = false;
private _data: any[];
constructor(private _zone: NgZone) {
this._data = this.generateData();
}
public onGenerateDataClicked() {
this._data = this.generateData();
}
public onAssignDataClicked() {
this._time = new Date();
this._assigningData = true;
this.chart.dataSource = this._data;
}
public onMaxPointsChanged(e: any) {
let num: number = parseInt(e.target.value, 10);
if (isNaN(num)) {
num = 5000;
}
if (num < 5000) {
num = 5000;
}
if (num > 2000000) {
num = 2000000;
}
this.maxPoints = num;
}
public get maxPointsText(): string {
return this.toShortString(this._maxPoints);
}
public get maxPoints(): number {
return this._maxPoints;
}
@Input()
public set maxPoints(v: number) {
this._maxPoints = v;
}
public ngOnDestroy(): void {
if (this._interval >= 0) {
this._zone.runOutsideAngular(() => {
window.clearInterval(this._interval);
});
this._interval = -1;
}
}
public ngAfterViewInit(): void {
this.chart.seriesAdded.subscribe((args: { sender: any, args: IgxChartSeriesEventArgs }) => {
const cat = args.args.series as IgxHorizontalAnchoredCategorySeriesComponent;
cat.isCustomCategoryStyleAllowed = true;
cat.assigningCategoryStyle.subscribe((event: { sender: any, args: IgxAssigningCategoryStyleEventArgs }) => {
if (this._assigningData) {
this._assigningData = false;
this._zone.runOutsideAngular(() => {
window.setTimeout(() => {}, 0);
});
}
});
});
this.chart.seriesRemoved.subscribe((event: { sender: any, args: IgxChartSeriesEventArgs }) => {
const cat = event.args.series as IgxHorizontalAnchoredCategorySeriesComponent;
cat.isCustomCategoryStyleAllowed = false;
cat.assigningCategoryStyle.unsubscribe();
});
this.chart.dataSource = this._data;
}
private generateData(): any[] {
const data: any[] = [];
for (this.currIndex = 0; this.currIndex <= this.maxPoints; this.currIndex++) {
this.currValue += Math.random() * 4.0 - 2.0;
const label = this.toShortString(this.currIndex);
data.push({ Label: label, Value: this.currValue });
}
return data;
}
private toShortString(largeValue: number): string {
let roundValue: number;
if (largeValue >= 1000000) {
roundValue = Math.round(largeValue / 100000) / 10;
return roundValue + "m";
}
if (largeValue >= 1000) {
roundValue = Math.round(largeValue / 100) / 10;
return roundValue + "k";
}
roundValue = Math.round(largeValue);
return roundValue + "";
}
}
ts<div class="container vertical">
<div class="options horizontal">
<button (click)="onGenerateDataClicked()">Generate Data</button>
<button (click)="onAssignDataClicked()">AssignData</button>
<label class="options-label">Data amount: {{ maxPointsText }}</label>
<input class="options-slider" type="range" id="slider" min="5000" max="2000000" step="1000" [value]="maxPoints"
(input)="onMaxPointsChanged($event)"/>
</div>
<div class="container">
<igx-category-chart height="100%" yAxisLabelExtent="40"
markerTypes="None"
toolTipType="Default"
xAxisEnhancedIntervalPreferMoreCategoryLabels="false"
shouldAutoExpandMarginForInitialLabels="false"
crosshairsDisplayMode="None"
#chart>
</igx-category-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
ツールチップ
ツールチップを使用して、特定のシリーズ タイプに関連するすべての情報を表示します。項目レベルやカテゴリ レベルのツールチップなど、有効にできるさまざまなツールチップがあります。この機能の詳細については、チャート ツールチップトピックを参照してください。
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 { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts';
import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxPropertyEditorPanelModule,
IgxLegendModule,
IgxCategoryChartModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
import { defineAllComponents } from 'igniteui-webcomponents';
defineAllComponents();
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("propertyEditor", { static: true } )
private propertyEditor: IgxPropertyEditorPanelComponent
@ViewChild("toolTipTypeEditor", { static: true } )
private toolTipTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxCategoryChartComponent
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
LegendDescriptionModule.register(context);
CategoryChartDescriptionModule.register(context);
}
return this._componentRenderer;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="options vertical">
<igx-property-editor-panel
name="PropertyEditor"
#propertyEditor
[componentRenderer]="renderer"
[target]="chart"
descriptionType="CategoryChart"
isHorizontal="true"
isWrappingEnabled="true">
<igx-property-editor-property-description
propertyPath="ToolTipType"
name="ToolTipTypeEditor"
#toolTipTypeEditor
label="ToolTip Type: "
primitiveValue="Data">
</igx-property-editor-property-description>
</igx-property-editor-panel>
</div>
<div class="legend-title">
Highest Grossing Movie Franchises
</div>
<div class="legend">
<igx-legend
name="legend"
#legend>
</igx-legend>
</div>
<div class="container fill">
<igx-category-chart
name="chart"
#chart
chartType="Column"
[legend]="legend"
[dataSource]="highestGrossingMovies"
xAxisInterval="1"
yAxisTitle="Billions of U.S. Dollars"
yAxisTitleLeftMargin="10"
yAxisTitleRightMargin="5"
yAxisLabelLeftMargin="0"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
crosshairsSnapToData="true">
</igx-category-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
トレンドライン
トレンドラインを使用して、トレンドを特定したり、データ内のパターンを見つけたりします。Angular チャートでは、CubicFit や LinearFit など、さまざまなトレンドラインがサポートされています。この機能の詳細については、チャート トレンドライントピックを参照してください。
API リファレンス
GitHub