Angular Toolbar (ツールバー) の概要

Angular ツールバー コンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、IgxDataChartComponent または IgxCategoryChartComponent コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。

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 { IgxLegendModule, IgxCategoryChartModule, IgxCategoryChartToolbarModule } from 'igniteui-angular-charts';
import { IgxToolbarModule } from 'igniteui-angular-layouts';
import { IgxCheckboxListModule } from 'igniteui-angular-grids';

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

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
import { IgxToolbarComponent } from 'igniteui-angular-layouts';

@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("toolbar", { static: true } )
    private toolbar: IgxToolbarComponent
    @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;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

tsコピー

<div class="container vertical sample">
  <div class="legend-title">
      Renewable Electricity Generated
  </div>
  <div class="aboveContentSplit">
    <div class="aboveContentLeftContainer">
      <igx-toolbar
      name="toolbar"
      #toolbar
      [target]="chart"
      orientation="Horizontal">
      </igx-toolbar>
    </div>
    <div class="aboveContentRightContainer">
      <igx-legend
      name="legend"
      #legend
      orientation="Horizontal">
      </igx-legend>
    </div>
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      chartType="Line"
      isHorizontalZoomEnabled="true"
      isVerticalZoomEnabled="true"
      [dataSource]="countryRenewableElectricity"
      includedProperties="year, europe, china, america"
      [legend]="legend"
      yAxisTitle="TWh"
      yAxisTitleLeftMargin="10"
      yAxisTitleRightMargin="5"
      yAxisLabelLeftMargin="0"
      yAxisLabelLocation="OutsideRight"
      isTransitionInEnabled="true">
      </igx-category-chart>
  </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.aboveContentSplit {
    display: flex;
    flex-direction: row;
}
.aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-end;
}
.aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: flex-end;
}
scssコピー

Edit in: Codesandbox

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

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

依存関係

Ignite UI for Angular のレイアウト、入力、チャート、コア パッケージをインストールします。

npm install igniteui-angular-layouts
npm install igniteui-angular-inputs
npm install igniteui-angular-charts
npm install igniteui-angular-core
cmd

IgxDataChartComponent コンポーネントとその機能とともに IgxToolbarComponent を使用する場合、次のモジュールが必要です。

import { IgxToolbarModule } from 'igniteui-angular-layouts';
import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartCategoryTrendLineModule  } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxToolbarModule,
        IgxDataChartToolbarModule,
        IgxDataChartCoreModule,
        IgxDataChartCategoryModule,
        IgxDataChartAnnotationModule,
        IgxDataChartInteractivityModule,
        IgxDataChartCategoryTrendLineModule
        // ...
    ]
})
export class AppModule {}
ts

import { IgxToolbarModule } from 'igniteui-react-layouts';
import { IgrDataChartToolbarModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrDataChartCategoryTrendLineModule  } from 'igniteui-react-charts';

IgxToolbarModule.register();
IgrDataChartToolbarModule.register();
IgrDataChartCoreModule.register();
IgrDataChartCategoryModule.register();
IgrDataChartAnnotationModule.register();
IgrDataChartInteractivityModule.register();
IgrDataChartCategoryTrendLineModule.register();
ts

使用方法

ツール操作

以下は、ツールバーに追加できるさまざまな IgxToolActionComponent 項目のリストです。

• IgxToolActionButtonComponent
• IgxToolActionCheckboxComponent
• IgxToolActionIconButtonComponent
• IgxToolActionIconMenuComponent
• IgxToolActionLabelComponent
• IgxToolActionNumberInputComponent
• IgxToolActionRadioComponent
• IgxToolActionSubPanelComponent

これらのツールはそれぞれ、マウスのクリックによってトリガーされる OnCommand イベントを公開します。注: IgxToolActionIconMenuComponent は、IgxToolActionIconMenuComponent 内にラップすることもできる他のツールのラッパーです。

IgxToolActionComponent オブジェクトの overlayId、beforeId、および afterId プロパティを使用して、新規および既存のツールの位置を変更したり、非表示にマークしたりすることができます。ToolActions は visibility プロパティも公開します。

次の例は、いくつかの機能を示しています。まず、ZoomReset や AnalyzeMenu メニュー ツール操作などの組み込みツールを非表示にするなど、IgxToolActionSubPanelComponent でツールをグループ化できます。この例では、afterId プロパティを使用して ZoomOut に割り当てることで、ZoomReset ツール操作の新しいインスタンスが追加され、ZoomMenu 内に配置されます。また、ツールの isHighlighted プロパティによってもハイライト表示されます。これにより、新しいリセット ツールが ZoomMenu の下部にすぐに表示されます。

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 { IgxToolbarModule } from 'igniteui-angular-layouts';
import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartCategoryTrendLineModule } from 'igniteui-angular-charts';

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

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxToolCommandEventArgs } from 'igniteui-angular-layouts';
import { IgxDataChartComponent, IgxSeriesComponent, IgxDataToolTipLayerComponent, IgxCrosshairLayerComponent, IgxFinalValueLayerComponent } from 'igniteui-angular-charts';
import { IgxToolbarComponent, IgxToolActionIconMenuComponent, IgxToolActionGroupHeaderComponent, IgxToolActionSubPanelComponent, IgxToolActionCheckboxComponent, IgxToolActionLabelComponent } from 'igniteui-angular-layouts';
import { 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("toolbar", { static: true } )
    private toolbar: IgxToolbarComponent
    @ViewChild("menuForSubPanelTool", { static: true } )
    private menuForSubPanelTool: IgxToolActionIconMenuComponent
    @ViewChild("subPanelGroup", { static: true } )
    private subPanelGroup: IgxToolActionGroupHeaderComponent
    @ViewChild("customSubPanelTools", { static: true } )
    private customSubPanelTools: IgxToolActionSubPanelComponent
    @ViewChild("enableTooltipsLabel", { static: true } )
    private enableTooltipsLabel: IgxToolActionCheckboxComponent
    @ViewChild("enableCrosshairsLabel", { static: true } )
    private enableCrosshairsLabel: IgxToolActionCheckboxComponent
    @ViewChild("enableFinalValuesLabel", { static: true } )
    private enableFinalValuesLabel: IgxToolActionCheckboxComponent
    @ViewChild("zoomResetLabel", { static: true } )
    private zoomResetLabel: IgxToolActionLabelComponent
    @ViewChild("zoomResetHidden", { static: true } )
    private zoomResetHidden: IgxToolActionLabelComponent
    @ViewChild("analyzeMenu", { static: true } )
    private analyzeMenu: IgxToolActionIconMenuComponent
    @ViewChild("copyMenu", { static: true } )
    private copyMenu: IgxToolActionLabelComponent
    @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
    {
    }

    public toolbarToggleAnnotations({ sender, args }: { sender: any, args: IgxToolCommandEventArgs }): void {
        var target = this.chart;
        switch (args.command.commandId)
        {
            case "EnableTooltips":
                var enable = args.command.argumentsList[0].value as boolean;
                if (enable)
                {
                    target.series.add(new IgxDataToolTipLayerComponent());
                }
                else
                {
                    var toRemove = null;
                    for (var i = 0; i < target.actualSeries.length; i++) {
                        let s = target.actualSeries[i] as IgxSeriesComponent;
                        if (s instanceof IgxDataToolTipLayerComponent)
                        {
                            toRemove = s;
                        }
                    }
                    if (toRemove != null)
                    {
                        target.series.remove(toRemove);
                    }
                }
            break;
            case "EnableCrosshairs":
                var enable = args.command.argumentsList[0].value as boolean;
                if (enable)
                {
                    target.series.add(new IgxCrosshairLayerComponent());
                }
                else
                {
                    var toRemove = null;
                    for (var i = 0; i < target.actualSeries.length; i++) {
                        let s = target.actualSeries[i] as IgxSeriesComponent;
                        if (s instanceof IgxCrosshairLayerComponent)
                        {
                            toRemove = s;
                        }
                    }
                    if (toRemove != null)
                    {
                        target.series.remove(toRemove);
                    }
                }
            break;
            case "EnableFinalValues":
                var enable = args.command.argumentsList[0].value as boolean;
                if (enable)
                {
                    target.series.add(new IgxFinalValueLayerComponent());
                }
                else
                {
                    var toRemove = null;
                    for (var i = 0; i < target.actualSeries.length; i++) {
                        let s = target.actualSeries[i] as IgxSeriesComponent;
                        if (s instanceof IgxFinalValueLayerComponent)
                        {
                            toRemove = s;
                        }
                    }
                    if (toRemove != null)
                    {
                        target.series.remove(toRemove);
                    }
                }
                break;
        }
    }

}

tsコピー

<div class="container vertical sample">
  <div class="aboveContentSplit">
    <div class="aboveContentLeftContainer">
      <igx-toolbar
      name="toolbar"
      #toolbar
      [target]="chart"
      orientation="Horizontal"
      (onCommand)="this.toolbarToggleAnnotations($event)">
          <igx-tool-action-icon-menu
          name="MenuForSubPanelTool"
          #menuForSubPanelTool
          iconCollectionName="ChartToolbarIcons"
          iconName="analyze">
              <igx-tool-action-group-header
              name="SubPanelGroup"
              #subPanelGroup
              closeOnExecute="true"
              title="Visualizations"
              subtitle="Layers">
              </igx-tool-action-group-header>
              <igx-tool-action-sub-panel
              name="CustomSubPanelTools"
              #customSubPanelTools>
                  <igx-tool-action-checkbox
                  name="EnableTooltipsLabel"
                  #enableTooltipsLabel
                  title="Enable Tooltips"
                  commandId="EnableTooltips">
                  </igx-tool-action-checkbox>
                  <igx-tool-action-checkbox
                  name="EnableCrosshairsLabel"
                  #enableCrosshairsLabel
                  title="Enable Crosshairs"
                  commandId="EnableCrosshairs">
                  </igx-tool-action-checkbox>
                  <igx-tool-action-checkbox
                  name="EnableFinalValuesLabel"
                  #enableFinalValuesLabel
                  title="Enable Final Values"
                  commandId="EnableFinalValues">
                  </igx-tool-action-checkbox>
              </igx-tool-action-sub-panel>
          </igx-tool-action-icon-menu>
          <igx-tool-action-label
          name="zoomResetLabel"
          #zoomResetLabel
          title="Reset"
          afterId="ZoomOut"
          iconName="reset"
          iconCollectionName="ChartToolbarIcons"
          commandId="ZoomReset"
          isHighlighted="true">
          </igx-tool-action-label>
          <igx-tool-action-label
          name="zoomResetHidden"
          #zoomResetHidden
          overlayId="ZoomReset"
          visibility="Collapsed">
          </igx-tool-action-label>
          <igx-tool-action-icon-menu
          name="AnalyzeMenu"
          #analyzeMenu
          overlayId="AnalyzeMenu"
          visibility="Collapsed">
          </igx-tool-action-icon-menu>
          <igx-tool-action-label
          name="CopyMenu"
          #copyMenu
          overlayId="CopyMenu"
          visibility="Collapsed">
          </igx-tool-action-label>
      </igx-toolbar>
    </div>
    <div class="aboveContentRightContainer">
      <!-- insert aboveContentRight -->
      <!-- end aboveContentRight -->
    </div>
  </div>
  <div class="container fill">
      <igx-data-chart
      computedPlotAreaMarginMode="Series"
      isHorizontalZoomEnabled="true"
      isVerticalZoomEnabled="true"
      name="chart"
      #chart>
          <igx-category-x-axis
          name="xAxis"
          #xAxis
          [dataSource]="countryRenewableElectricity"
          label="year">
          </igx-category-x-axis>
          <igx-numeric-y-axis
          name="yAxis"
          #yAxis
          title="TWh"
          labelLocation="OutsideRight">
          </igx-numeric-y-axis>
          <igx-line-series
          name="lineSeries1"
          #lineSeries1
          title="Electricity"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [dataSource]="countryRenewableElectricity"
          valueMemberPath="america">
          </igx-line-series>
          <igx-line-series
          name="LineSeries2"
          #lineSeries2
          title="Electricity"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [dataSource]="countryRenewableElectricity"
          valueMemberPath="europe">
          </igx-line-series>
          <igx-line-series
          name="LineSeries3"
          #lineSeries3
          title="Electricity"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [dataSource]="countryRenewableElectricity"
          valueMemberPath="china">
          </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/
*/
.aboveContentSplit {
    display: flex;
    flex-direction: row;
}
.aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-end;
}
.aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: flex-end;
}
scssコピー

Edit in: Codesandbox

Angular データ チャートの統合

Angular ツールバーには、Target プロパティが含まれています。これは、以下のコードに示すように、IgxDataChartComponent などのコンポーネントをリンクするために使用されます。

  <div class="legend">
    <igx-toolbar
      name="toolbar"
      [target]="chart"
      #toolbar>
    </igx-toolbar>
  </div>
  <div class="container fill">
    <igx-data-chart
    name="chart"
    #chart>
  </igx-data-chart>
html

IgxDataChartComponent が Toolbar にリンクされると、いくつかの既存の IgxToolActionComponent 項目とメニューが使用可能になります。以下は、組み込みの Angular IgxDataChartComponent ツール操作とそれに関連付けられた overlayId のリストです。

ズーム操作

• ZoomReset: チャート上で resetZoom メソッドを呼び出し、ズーム レベルをデフォルトの位置にリセットする IgxToolActionLabelComponent。
• ZoomMenu: チャートのズーム レベルを増減するためにチャート上で zoomIn および zoomOut メソッドを呼び出す 2 つの IgxToolActionLabelComponent 項目を公開する IgxToolActionIconMenuComponent。

トレンド操作

• AnalyzeMenu: チャートのさまざまなオプションを構成するためのいくつかのオプションを含む IgxToolActionIconMenuComponent。
• AnalyzeHeader: サブ セクションのヘッダー。
• LinesMenu: チャート上で水平破線を表示するためのさまざまなツールが含まれるサブ メニュー。
  • LinesHeader: 次の 3 つのツールのサブメニュー セクション ヘッダー:
    • MaxValue: シリーズの最大値で yAxis に沿って水平破線を表示する IgxToolActionCheckboxComponent。
    • MinValue: シリーズの最小値で yAxis に沿って水平破線を表示する IgxToolActionCheckboxComponent。
    • Average: シリーズの平均値で yAxis に沿って水平破線を表示する IgxToolActionCheckboxComponent。
• TrendsMenu: さまざまな近似曲線を IgxDataChartComponent プロット領域に適用するためのツールを含むサブ メニュー。
  • TrendsHeader: 次の 3 つのツールのサブメニュー セクション ヘッダー:
    • Exponential: チャート内の各シリーズの trendLineType を ExponentialFit に設定する IgxToolActionRadioComponent。
    • Linear: チャート内の各シリーズの trendLineType を LinearFit に設定する IgxToolActionRadioComponent。
    • Logarithmic: チャート内の各シリーズの trendLineType を LogarithmicFit に設定する IgxToolActionRadioComponent。
• HelpersHeader: サブ セクションのヘッダー。
• SeriesAvg: Average タイプの ValueLayerValueMode を使用して、チャートのシリーズ コレクションに IgxValueLayerComponent を追加または削除する IgxToolActionCheckboxComponent。
• ValueLabelsMenu: IgxDataChartComponent のプロット領域に注釈を表示するためのさまざまなツールを含むサブ メニュー。
  • ValueLabelsHeader: 次のツールのサブ メニュー セクション ヘッダー:
    • ShowValueLabels: IgxCalloutLayerComponent を使用してデータ ポイント値を切り替える IgxToolActionCheckboxComponent。
    • ShowLastValueLabel: IgxFinalValueLayerComponent を使用して最終値軸の注釈を切り替える IgxToolActionCheckboxComponent。
• ShowCrosshairs: チャートの crosshairsDisplayMode プロパティを介してマウスオーバー十字線の注釈を切り替える IgxToolActionCheckboxComponent。
• ShowGridlines: X-Axis に MajorStroke を適用することで追加のグリッド線を切り替える IgxToolActionCheckboxComponent。

画像に保存アクション

• CopyAsImage: チャートをクリップボードにコピーするオプションを公開する IgxToolActionLabelComponent。
• CopyHeader: サブ セクションのヘッダー。

SVG アイコン

ツールを手動で追加する場合、RenderIconFromText メソッドを使用してアイコンを割り当てることができます。このメソッドには 3 つのパラメーターを渡す必要があります。1 つ目は、ツールで定義されたアイコン コレクション名です (例: iconCollectionName)。2 つ目は、ツールで定義されたアイコンの名前 (例: iconName) で、その後に SVG 文字列を追加します。

データ URL アイコン

svg を追加するのと同様に、RegisterIconFromDataURL を介して URL からアイコン画像を追加することもできます。メソッドの 3 番目のパラメーターは、文字列 URL を入力するために使用されます。

次のスニペットは、アイコンを追加する両方の方法を示しています。

<igx-tool-action-label
    title="Custom Icon"
    iconName="CustomIcon"
    iconCollectionName="CustomCollection">
</igx-tool-action-label>
html

public toolbarCustomIconOnViewInit(): void {

  const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';
  
  this.toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);
}
ts

public toolbarCustomIconOnViewInit(): void {

  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");

}
ts

public toolbarCustomIconOnViewInit(): void {

  const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';

  this.toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);

}
ts

public toolbarCustomIconOnViewInit(): void {

  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
  
}
ts

@code {

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    var toolbar = this.toolbar;

    if (firstRender) {
        this.ToolbarCustomIconOnViewInit();
    }
}

private IgbToolbar toolbar;

public void ToolbarCustomIconOnViewInit()
{
	this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
	{
        this.toolbar.RegisterIconFromDataURLAsync("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
	}));
}
typescript

}

```tsx
<IgrToolbar orientation="Vertical" />
autohotkey

垂直方向

デフォルトでは、Angular ツールバーは水平に表示されますが、orientation プロパティを設定することで垂直に表示することもできます。

<igx-toolbar orientation="Vertical" />
html

次の例は、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 { IgxToolbarModule } from 'igniteui-angular-layouts';
import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxAnnotationLayerProxyModule, IgxDataChartCategoryTrendLineModule } from 'igniteui-angular-charts';

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

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxToolbarComponent } from 'igniteui-angular-layouts';
import { 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("toolbar", { static: true } )
    private toolbar: IgxToolbarComponent
    @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
    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="aboveContent">
    <igx-toolbar
    name="toolbar"
    #toolbar
    [target]="chart"
    orientation="Vertical">
    </igx-toolbar>
  </div>
  <div class="container fill">
      <igx-data-chart
      isHorizontalZoomEnabled="true"
      name="chart"
      #chart>
          <igx-category-x-axis
          name="xAxis"
          #xAxis
          [dataSource]="countryRenewableElectricity"
          label="year">
          </igx-category-x-axis>
          <igx-numeric-y-axis
          name="yAxis"
          #yAxis
          title="TWh"
          labelLocation="OutsideRight">
          </igx-numeric-y-axis>
          <igx-line-series
          name="lineSeries1"
          #lineSeries1
          title="Electricity"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [dataSource]="countryRenewableElectricity"
          valueMemberPath="america">
          </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

Color Editor (カラー エディター)

Angular Toolbar にカスタム カラー エディター ツールを追加できます。このツールは、コマンド イベントと連携して、アプリケーションにカスタム スタイルを適用することもできます。

<igx-toolbar
  name="toolbar"
  #toolbar>
      <igx-tool-action-color-editor
      title="Series Brush"
      name="colorEditorTool"
      #colorEditorTool>
      </igx-tool-action-color-editor>
</igx-toolbar>
html

<igc-toolbar
  name="toolbar"
  id="toolbar">
      <igc-tool-action-color-editor
      title="Series Brush Color"
      name="colorEditorTool"
      id="colorEditorTool">
      </igc-tool-action-color-editor>
</igc-toolbar>
ts

次の例は、カラー エディター ツールを使用して Angular Data Chart シリーズ ブラシのスタイルを設定する方法を示しています。

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 { IgxToolbarModule, IgxToolActionComboModule, IgxToolActionColorEditorModule } from 'igniteui-angular-layouts';
import { IgxDataChartToolbarModule, IgxDataLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCategoryModule, IgxDataChartCoreModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxToolbarModule,
    IgxToolActionComboModule,
    IgxToolActionColorEditorModule,
    IgxDataChartToolbarModule,
    IgxDataLegendModule,
    IgxNumberAbbreviatorModule,
    IgxDataChartCategoryModule,
    IgxDataChartCoreModule,
    IgxDataChartCategoryModule,
    IgxDataChartAnnotationModule,
    IgxDataChartInteractivityModule,
    IgxDataChartAnnotationModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxToolCommandEventArgs } from 'igniteui-angular-layouts';
import { IgxDataChartComponent, IgxSeriesComponent } from 'igniteui-angular-charts';
import { IgxToolbarComponent, IgxToolActionColorEditorComponent } from 'igniteui-angular-layouts';
import { 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("toolbar", { static: true } )
    private toolbar: IgxToolbarComponent
    @ViewChild("colorEditorTool", { static: true } )
    private colorEditorTool: IgxToolActionColorEditorComponent
    @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
    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
    {
    }

    public colorEditorToggleSeriesBrush({ sender, args }: { sender: any, args: IgxToolCommandEventArgs }): void {
        var target = this.chart;
        var color = args.command.argumentsList[0].value;

        switch (args.command.commandId)
        {
            case "ToggleSeriesBrush":
                let series = target.contentSeries.first as IgxSeriesComponent;
                series.brush = color;
            break;
        }
    }

}

tsコピー

<div class="container vertical sample">
  <div class="aboveContentSplit">
    <div class="aboveContentLeftContainer">
      <igx-toolbar
      name="toolbar"
      #toolbar
      [target]="chart"
      (onCommand)="this.colorEditorToggleSeriesBrush($event)">
          <igx-tool-action-color-editor
          title="Series Brush"
          name="colorEditorTool"
          #colorEditorTool
          commandId="ToggleSeriesBrush">
          </igx-tool-action-color-editor>
      </igx-toolbar>
    </div>
    <div class="aboveContentRightContainer">
      <!-- insert aboveContentRight -->
      <!-- end aboveContentRight -->
    </div>
  </div>
  <div class="container fill">
      <igx-data-chart
      isHorizontalZoomEnabled="true"
      name="chart"
      #chart>
          <igx-category-x-axis
          name="xAxis"
          #xAxis
          [dataSource]="countryRenewableElectricity"
          label="year">
          </igx-category-x-axis>
          <igx-numeric-y-axis
          name="yAxis"
          #yAxis
          title="TWh"
          labelLocation="OutsideRight">
          </igx-numeric-y-axis>
          <igx-line-series
          name="lineSeries1"
          #lineSeries1
          title="Electricity"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [dataSource]="countryRenewableElectricity"
          valueMemberPath="america"
          markerType="None">
          </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/
*/
.aboveContentSplit {
    display: flex;
    flex-direction: row;
}
.aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-end;
}
.aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: flex-end;
}
scssコピー

Edit in: Codesandbox

API リファレンス

• IgxToolbarComponent
• IgxDataChartComponent

その他のリソース

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)