Angular 軸グリッド線

すべての Ignite UI for Angular チャートには、軸線の外観、X 軸と Y 軸に描画される主/副グリッド線および目盛りの頻度を変更するための組み込み機能が含まれています。

次の例は、IgxCategoryChartComponent および IgxFinancialChartComponent コントロールに適用されます。

軸の主グリッド線は、軸ラベルの位置から水平 (Y 軸) または垂直 (X 軸) に伸びる長い線であり、チャートのプロット領域を介して描画されます。軸の副グリッド線は、軸の主グリッド線の間に描画される線です。

軸目盛りは、Angular チャートのすべての主線の位置で各ラベルのすべての水平軸および垂直軸に沿って表示されます。

最速で機能豊富な Angular Data Grid は、ページング、ソート、フィルタリング、グループ化、PDF および Excel へのエクスポートなどの機能を提供します。究極のアプリ構築エクスペリエンスとデータ操作に必要なすべてが揃っています。

無料で試してみる

Angular 軸グリッド線の例

この例は、指定した間隔で主グリッド線と副グリッド線を表示するために軸グリッド線を構成する方法を示しています。

EXAMPLE

DATA

MODULES

TS

HTML

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));
        }
    }
}
tsコピー

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 { 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 {}
tsコピー

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } 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("legend", { static: true } )
    private legend: IgxLegendComponent
    @ViewChild("propertyEditorPanel1", { static: true } )
    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
    @ViewChild("xAxisStroke", { static: true } )
    private xAxisStroke: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("xAxisMajorStroke", { static: true } )
    private xAxisMajorStroke: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("yAxisStroke", { static: true } )
    private yAxisStroke: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("yAxisMajorStroke", { static: true } )
    private yAxisMajorStroke: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("yAxisMinorStroke", { static: true } )
    private yAxisMinorStroke: 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);
            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
      [componentRenderer]="renderer"
      [target]="chart"
      descriptionType="CategoryChart"
      isHorizontal="true"
      isWrappingEnabled="true"
      name="propertyEditorPanel1"
      #propertyEditorPanel1>
          <igx-property-editor-property-description
          propertyPath="XAxisStroke"
          name="XAxisStroke"
          #xAxisStroke
          label="X Axis Stroke"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          primitiveValue="gray">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="XAxisMajorStroke"
          name="XAxisMajorStroke"
          #xAxisMajorStroke
          label="X Axis Major Stroke"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          primitiveValue="darkslategray">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="YAxisStroke"
          name="YAxisStroke"
          #yAxisStroke
          label="Y Axis Stroke"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          primitiveValue="gray">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="YAxisMajorStroke"
          name="YAxisMajorStroke"
          #yAxisMajorStroke
          label="Y Axis Major Stroke"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          primitiveValue="darkslategray">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="YAxisMinorStroke"
          name="YAxisMinorStroke"
          #yAxisMinorStroke
          label="Y Axis Minor Stroke"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          primitiveValue="gray">
          </igx-property-editor-property-description>
      </igx-property-editor-panel>
  </div>
  <div class="legend-title">
      Renewable Electricity Generated
  </div>
  <div class="legend">
      <igx-legend
      name="legend"
      #legend
      orientation="Horizontal">
      </igx-legend>
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      computedPlotAreaMarginMode="Series"
      [dataSource]="countryRenewableElectricity"
      includedProperties="year, europe, china, america"
      chartType="Line"
      [legend]="legend"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      xAxisStroke="rgba(145, 145, 145, 1)"
      xAxisStrokeThickness="2"
      xAxisInterval="1"
      xAxisMajorStroke="rgba(71, 71, 71, 1)"
      xAxisMajorStrokeThickness="0.5"
      yAxisStroke="gray"
      yAxisStrokeThickness="2"
      yAxisInterval="20"
      yAxisMajorStroke="darkslategray"
      yAxisMajorStrokeThickness="1"
      yAxisMinorInterval="5"
      yAxisMinorStroke="gray"
      yAxisMinorStrokeThickness="0.5"
      thickness="2">
      </igx-category-chart>
  </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

Angular 軸グリッド線のプロパティ

軸間隔プロパティを設定すると、主グリッド線と軸ラベルが軸に描画される頻度を指定します。同様に、軸副間隔のプロパティは副グリッド線が軸に描画される頻度を指定します。

副間隔に対応する副グリッド線を表示するには、軸に xAxisMinorStroke と xAxisMinorStrokeThickness プロパティを設定する必要があります。これは、副グリッド線にはデフォルトの色または太さがなく、最初に割り当てるまで表示されないためです。

以下のプロパティを設定して、Angular チャートでのグリッド線の表示をカスタマイズできます。

軸ビジュアル	タイプ	プロパティ名	説明
主なストロークの色	文字列	xAxisMajorStroke yAxisMajorStroke	これらのプロパティは、軸の主グリッド線の色を設定します。
副ストロークの色	文字列	xAxisMinorStroke yAxisMinorStroke	これらのプロパティは、軸の副グリッド線の色を設定します。
主なストロークの太さ	数	xAxisMajorStrokeThickness yAxisMajorStrokeThickness	これらのプロパティは、軸の主グリッド線の太さをピクセル単位で設定します。
副ストロークの太さ	数	xAxisMinorStrokeThickness yAxisMinorStrokeThickness	これらのプロパティは、軸の副グリッド線の太さをピクセル単位で設定します。
主間隔	数	xAxisInterval yAxisInterval	これらのプロパティは、軸の主グリッド線とラベルの間隔を設定します。
副間隔	数	xAxisMinorInterval yAxisMinorInterval	これらのプロパティは、軸の副グリッド線の間隔を設定します (使用する場合)。
軸線のストローク色	文字列	xAxisStroke yAxisStroke	これらのプロパティは、軸線の色を設定します。
軸のストロークの太さ	数	xAxisStrokeThickness yAxisStrokeThickness	これらのプロパティは、軸線のピクセル単位の太さを設定します。

上記のテーブルの主間隔と副間隔については、軸ラベルの主間隔も、この値によって設定され、間隔に関連付けられた軸のポイントにラベルが 1 つ表示されることに注意してください。副間隔グリッド線は常に主グリッド線の間に描画されるため、副間隔プロパティは常に主間隔プロパティの値よりもはるかに小さい値 (通常は 2〜5 倍小さい値) に設定する必要があります。

カテゴリ軸では、間隔は、最初の項目から最後のカテゴリ項目の範囲のインデックスとして表されます。通常、この値は、主間隔のカテゴリ項目の合計数の 10～20% に相当します。その結果、すべての軸ラベルは軸にフィットし、他の軸ラベルによって切り取られることはありません。副間隔の場合、主間隔プロパティの一部として表されます。通常、この値の範囲は 0.25～0.5 です。

数値軸では、間隔値は軸の最小値と最大値の間の double 値として表されます。数値軸はデフォルトで、軸の最小値および最大値から四捨五入されたバランスの良い数値に、自動的に計算されます。

日付/時刻軸では、この値は軸の最小値から最大値の範囲の時間間隔として表されます。

以下の例は、上記のプロパティを設定してグリッド線をカスタマイズする方法を示しています。

EXAMPLE

DATA

MODULES

TS

HTML

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));
        }
    }
}
tsコピー

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 { 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 {}
tsコピー

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } 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("legend", { static: true } )
    private legend: IgxLegendComponent
    @ViewChild("propertyEditorPanel1", { static: true } )
    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
    @ViewChild("xAxisStroke", { static: true } )
    private xAxisStroke: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("xAxisMajorStroke", { static: true } )
    private xAxisMajorStroke: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("yAxisStroke", { static: true } )
    private yAxisStroke: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("yAxisMajorStroke", { static: true } )
    private yAxisMajorStroke: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("yAxisMinorStroke", { static: true } )
    private yAxisMinorStroke: 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);
            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
      [componentRenderer]="renderer"
      [target]="chart"
      descriptionType="CategoryChart"
      isHorizontal="true"
      isWrappingEnabled="true"
      name="propertyEditorPanel1"
      #propertyEditorPanel1>
          <igx-property-editor-property-description
          propertyPath="XAxisStroke"
          name="XAxisStroke"
          #xAxisStroke
          label="X Axis Stroke"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          primitiveValue="gray">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="XAxisMajorStroke"
          name="XAxisMajorStroke"
          #xAxisMajorStroke
          label="X Axis Major Stroke"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          primitiveValue="darkslategray">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="YAxisStroke"
          name="YAxisStroke"
          #yAxisStroke
          label="Y Axis Stroke"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          primitiveValue="gray">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="YAxisMajorStroke"
          name="YAxisMajorStroke"
          #yAxisMajorStroke
          label="Y Axis Major Stroke"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          primitiveValue="darkslategray">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="YAxisMinorStroke"
          name="YAxisMinorStroke"
          #yAxisMinorStroke
          label="Y Axis Minor Stroke"
          shouldOverrideDefaultEditor="true"
          valueType="EnumValue"
          dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen"
          primitiveValue="gray">
          </igx-property-editor-property-description>
      </igx-property-editor-panel>
  </div>
  <div class="legend-title">
      Renewable Electricity Generated
  </div>
  <div class="legend">
      <igx-legend
      name="legend"
      #legend
      orientation="Horizontal">
      </igx-legend>
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      computedPlotAreaMarginMode="Series"
      [dataSource]="countryRenewableElectricity"
      includedProperties="year, europe, china, america"
      chartType="Line"
      [legend]="legend"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      xAxisStroke="rgba(145, 145, 145, 1)"
      xAxisStrokeThickness="2"
      xAxisInterval="1"
      xAxisMajorStroke="rgba(71, 71, 71, 1)"
      xAxisMajorStrokeThickness="0.5"
      yAxisStroke="gray"
      yAxisStrokeThickness="2"
      yAxisInterval="20"
      yAxisMajorStroke="darkslategray"
      yAxisMajorStrokeThickness="1"
      yAxisMinorInterval="5"
      yAxisMinorStroke="gray"
      yAxisMinorStrokeThickness="0.5"
      thickness="2">
      </igx-category-chart>
  </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

IgxDataChartComponent の軸には、それぞれ majorStrokeDashArray プロパティと minorStrokeDashArray プロパティを利用して、主グリッド線と副グリッド線にダッシュ配列を配置する機能もあります。対応する軸の strokeDashArray プロパティを設定することで、実際の軸線も破線にすることができます。これらのプロパティは、対応するグリッド線のダッシュの長さを記述する数値の配列を受け取ります。

次の例は、上記のダッシュ配列プロパティが設定された IgxDataChartComponent を示しています。

EXAMPLE

DATA

MODULES

TS

HTML

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, items)));
        }
    }
}
tsコピー

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 { IgxLegendModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxLegendModule,
    IgxDataChartCategoryModule,
    IgxDataChartInteractivityModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxLineSeriesComponent } 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("xAxis", { static: true } )
    private xAxis: IgxCategoryXAxisComponent
    @ViewChild("yAxis", { static: true } )
    private yAxis: IgxNumericYAxisComponent
    @ViewChild("lineSeries1", { static: true } )
    private lineSeries1: IgxLineSeriesComponent
    @ViewChild("lineSeries2", { static: true } )
    private lineSeries2: IgxLineSeriesComponent
    @ViewChild("lineSeries3", { static: true } )
    private lineSeries3: IgxLineSeriesComponent
    private _countryRenewableElectricity: CountryRenewableElectricity = null;
    public get countryRenewableElectricity(): CountryRenewableElectricity {
        if (this._countryRenewableElectricity == null)
        {
            this._countryRenewableElectricity = new CountryRenewableElectricity();
        }
        return this._countryRenewableElectricity;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

tsコピー

<div class="container vertical sample">
  <div class="legend-title">
      Renewable Electricity Generated
  </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"
      computedPlotAreaMarginMode="Series">
          <igx-category-x-axis
          name="xAxis"
          #xAxis
          [dataSource]="countryRenewableElectricity"
          label="year"
          interval="1"
          majorStroke="rgba(71, 71, 71, 1)"
          majorStrokeThickness="0.5"
          stroke="rgba(145, 145, 145, 1)"
          strokeThickness="2"
          strokeDashArray="5, 5"
          majorStrokeDashArray="5, 5"
          tickLength="0">
          </igx-category-x-axis>
          <igx-numeric-y-axis
          name="yAxis"
          #yAxis
          stroke="gray"
          strokeThickness="2"
          interval="20"
          majorStroke="darkslategray"
          majorStrokeThickness="1"
          minorInterval="5"
          minorStroke="gray"
          minorStrokeThickness="0.5"
          strokeDashArray="5, 5"
          majorStrokeDashArray="5, 5"
          minorStrokeDashArray="2.5, 2.5"
          tickLength="0">
          </igx-numeric-y-axis>
          <igx-line-series
          name="LineSeries1"
          #lineSeries1
          title="Europe"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          markerType="Circle"
          [dataSource]="countryRenewableElectricity"
          valueMemberPath="europe"
          showDefaultTooltip="true">
          </igx-line-series>
          <igx-line-series
          name="LineSeries2"
          #lineSeries2
          title="China"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          markerType="Circle"
          [dataSource]="countryRenewableElectricity"
          valueMemberPath="china"
          showDefaultTooltip="true">
          </igx-line-series>
          <igx-line-series
          name="LineSeries3"
          #lineSeries3
          title="America"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          markerType="Circle"
          [dataSource]="countryRenewableElectricity"
          valueMemberPath="america"
          showDefaultTooltip="true">
          </igx-line-series>
      </igx-data-chart>
  </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

Angular 軸目盛りの例

軸の目盛りは、xAxisTickLength と yAxisTickLength プロパティを 0 より大きい値に設定することで有効になります。これらのプロパティは、目盛りを形成する線セグメントの長さを指定します。

目盛りは常に軸線から伸び、ラベルの方向を指します。ラベルは、重ならないように目盛りの長さの値でオフセットされます。たとえば、yAxisTickLength プロパティが 5 に設定されている場合、軸ラベルはその量だけ左にシフトされます。

以下の例は、上記のプロパティを設定して目盛りをカスタマイズする方法を示します。

EXAMPLE

DATA

MODULES

TS

HTML

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));
        }
    }
}
tsコピー

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 { 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 {}
tsコピー

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } 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("legend", { static: true } )
    private legend: IgxLegendComponent
    @ViewChild("propertyEditorPanel1", { static: true } )
    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
    @ViewChild("xAxisTickLength", { static: true } )
    private xAxisTickLength: 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);
            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
      [componentRenderer]="renderer"
      [target]="chart"
      descriptionType="CategoryChart"
      isHorizontal="true"
      isWrappingEnabled="true"
      name="propertyEditorPanel1"
      #propertyEditorPanel1>
          <igx-property-editor-property-description
          propertyPath="XAxisTickLength"
          name="XAxisTickLength"
          #xAxisTickLength
          label="X Axis Tick Length"
          shouldOverrideDefaultEditor="true"
          valueType="Slider"
          min="0"
          max="20"
          primitiveValue="10">
          </igx-property-editor-property-description>
      </igx-property-editor-panel>
  </div>
  <div class="legend-title">
      Renewable Electricity Generated
  </div>
  <div class="legend">
      <igx-legend
      name="legend"
      #legend
      orientation="Horizontal">
      </igx-legend>
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      [dataSource]="countryRenewableElectricity"
      includedProperties="year, europe, china, america"
      [legend]="legend"
      chartType="Line"
      computedPlotAreaMarginMode="Series"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      xAxisTickLength="10"
      xAxisTickStrokeThickness="1"
      xAxisTickStroke="gray"
      yAxisTickLength="0"
      yAxisTickStrokeThickness="0"
      yAxisTickStroke="rgba(0, 0, 0, 0)">
      </igx-category-chart>
  </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

Angular 軸目盛りのプロパティ

以下のプロパティを設定して、Angular チャートで軸の目盛りの表示方法をカスタマイズできます。

軸ビジュアル	タイプ	プロパティ名	説明
目盛りストロークの色	文字列	xAxisTickStroke yAxisTickStroke	これらのプロパティは、目盛りの色を設定します。
目盛りストロークの太さ	数	xAxisTickStrokeThickness yAxisTickStrokeThickness	これらのプロパティは、軸の目盛りの太さを設定します。
目盛りストロークの長さ	数	xAxisTickLength yAxisTickLength	これらのプロパティは、軸の目盛りの長さを設定します。

その他のリソース

関連するチャート機能の詳細については、以下のトピックを参照してください。

• 軸レイアウト
• 軸オプション

API リファレンス

以下は、上記のセクションで説明されている API メンバーのリストです。

IgxDataChartComponent	IgxCategoryChartComponent または IgxFinancialChartComponent
Axes ➔ IgxNumericXAxisComponent ➔ interval	xAxisInterval (主間隔)
Axes ➔ IgxNumericYAxisComponent ➔ interval	yAxisInterval (主間隔)
Axes ➔ IgxNumericXAxisComponent ➔ minorInterval	xAxisMinorInterval
Axes ➔ IgxNumericYAxisComponent ➔ minorInterval	yAxisMinorInterval
Axes ➔ IgxNumericXAxisComponent ➔ majorStroke	xAxisMajorStroke
Axes ➔ IgxNumericYAxisComponent ➔ majorStroke	yAxisMajorStroke
Axes ➔ IgxNumericXAxisComponent ➔ majorStrokeThickness	xAxisMajorStrokeThickness
Axes ➔ IgxNumericYAxisComponent ➔ majorStrokeThickness	yAxisMajorStrokeThickness
Axes ➔ IgxNumericXAxisComponent ➔ minorStrokeThickness	xAxisMinorStrokeThickness
Axes ➔ IgxNumericYAxisComponent ➔ minorStrokeThickness	yAxisMinorStrokeThickness
Axes ➔ IgxNumericXAxisComponent ➔ strokeThickness	xAxisStrokeThickness
Axes ➔ IgxNumericYAxisComponent ➔ strokeThickness	yAxisStrokeThickness
Axes ➔ IgxNumericXAxisComponent ➔ stroke	xAxisStroke (軸線色)
Axes ➔ IgxNumericYAxisComponent ➔ stroke	yAxisStroke (軸線色)
Axes ➔ IgxNumericXAxisComponent ➔ tickLength	xAxisTickLength
Axes ➔ IgxNumericYAxisComponent ➔ tickLength	yAxisTickLength
Axes ➔ IgxNumericXAxisComponent ➔ tickStroke	xAxisTickStroke
Axes ➔ IgxNumericYAxisComponent ➔ tickStroke	yAxisTickStroke
Axes ➔ IgxNumericXAxisComponent ➔ strip	xAxisStrip (軸の主グリッド線の空間)
Axes ➔ IgxNumericYAxisComponent ➔ strip	yAxisStrip (軸の主グリッド線の空間)