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

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

    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
    

    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 {}
    
    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();
    

    使用方法

    ツール操作

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

    これらのツールはそれぞれ、マウスのクリックによってトリガーされる OnCommand イベントを公開します。

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

    次の例は、組み込みの ZoomResetAnalyzeMenu メニュー ツール アクションの両方を非表示にする方法を示しています。ZoomReset ツール操作の新しいインスタンスが追加され、afterId プロパティを使用して ZoomMenu 内に配置され、それを ZoomOut に割り当てます。これにより、新しいリセット ツールが ZoomMenu の下部に表示されます。

    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>
    

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

    ズーム操作

    トレンド操作

    画像に保存アクション

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

    SVG アイコン

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

    <igx-tool-action-label
        title="Custom Icon"
        iconName="CustomIcon"
        iconCollectionName="CustomCollection">
    </igx-tool-action-label>
    
    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);
    }
    
    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);
    }
    

    垂直方向

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

    <igx-toolbar orientation="Vertical" />
    

    次の例は、Angular ツールバーの垂直方向を示しています。

    API リファレンス

    その他のリソース