Web Components Toolbar (ツールバー) の概要
Web Components ツールバー コンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、IgcDataChartComponent または IgcCategoryChartComponent コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。
Web Components ツールバーの例
依存関係
Ignite UI for Web Components のレイアウト、入力、チャート、コア パッケージをインストールします。
npm install igniteui-webcomponents-layouts
npm install igniteui-webcomponents-inputs
npm install igniteui-webcomponents-charts
npm install igniteui-webcomponents-coreIgcDataChartComponent コンポーネントとその機能とともに IgcToolbarComponent を使用する場合、次のモジュールが必要です。
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcToolbarModule } from 'igniteui-webcomponents-layouts';
import { IgcDataChartToolbarModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule, IgcDataChartCategoryTrendLineModule } from 'igniteui-webcomponents-charts';
// ...
ModuleManager.register(
IgcToolbarModule,
IgcDataChartToolbarModule,
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartAnnotationModule,
IgcDataChartInteractivityModule,
IgcDataChartCategoryTrendLineModule
);使用方法
ツール操作
以下は、ツールバーに追加できるさまざまな IgcToolActionComponent 項目のリストです。
-
IgcToolActionButtonComponent -
IgcToolActionCheckboxComponent -
IgcToolActionIconButtonComponent -
IgcToolActionIconMenuComponent -
IgcToolActionLabelComponent -
IgcToolActionNumberInputComponent -
IgcToolActionRadioComponent -
IgcToolActionSubPanelComponent
これらのツールはそれぞれ、マウスのクリックによってトリガーされる onCommand イベントを公開します。注: IgcToolActionIconMenuComponent は、IgcToolActionIconMenuComponent 内にラップすることもできる他のツールのラッパーです。
IgcToolActionComponent オブジェクトの overlayId、beforeId、および afterId プロパティを使用して、新規および既存のツールの位置を変更したり、非表示にマークしたりすることができます。ToolActions は IgcToolActionComponent.visibility プロパティも公開します。
次の例は、いくつかの機能を示しています。まず、ZoomReset や AnalyzeMenu メニュー ツール操作などの組み込みツールを非表示にするなど、IgcToolActionSubPanelComponent でツールをグループ化できます。この例では、afterId プロパティを使用して ZoomMenu 内に ZoomReset ツール操作の新しいインスタンスを作成し、それを ZoomOut に割り当てて配置を正確にします。また、ツールの isHighlighted プロパティによってもハイライト表示されます。
Web Components データ チャートの統合
Web Components ツールバーには、target プロパティが含まれています。これは、以下のコードに示すように、IgcDataChartComponent などのコンポーネントをリンクするために使用されます。
<igc-toolbar
id="toolbar"
orientation="Horizontal">
</igc-toolbar>
<igc-data-chart
id="chart"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true">
</igc-data-chart>toolbar.target = this.chart;IgcDataChartComponent が Toolbar にリンクされると、いくつかの既存の IgcToolActionComponent 項目とメニューが使用可能になります。以下は、組み込みの Web Components IgcDataChartComponent ツール操作とそれに関連付けられた overlayId のリストです。
ズーム操作
ZoomMenu: チャートのズーム レベルを増減するためのzoomInおよびzoomOutメソッドを呼び出す 3 つのIgcToolActionLabelComponent項目を公開するIgcToolActionIconMenuComponentには、チャートのresetZoomメソッドを呼び出してズーム レベルをデフォルトの位置にリセットするZoomResetが含まれます。
トレンド操作
AnalyzeMenu: チャートのさまざまなオプションを構成するためのいくつかのオプションを含むIgcToolActionIconMenuComponent。AnalyzeHeader: サブ セクションのヘッダー。LinesMenu: チャート上で水平破線を表示するためのさまざまなツールが含まれるサブ メニュー。LinesHeader: 次の 3 つのツールのサブメニュー セクション ヘッダー:MaxValue: シリーズの最大値で yAxis に沿って水平破線を表示するIgcToolActionCheckboxComponent。MinValue: シリーズの最小値で yAxis に沿って水平破線を表示するIgcToolActionCheckboxComponent。Average: シリーズの平均値で yAxis に沿って水平破線を表示するIgcToolActionCheckboxComponent。TrendsMenu: さまざまな近似曲線をIgcDataChartComponentプロット領域に適用するためのツールを含むサブ メニュー。TrendsHeader: 次の 3 つのツールのサブメニュー セクション ヘッダー:- Exponential: チャート内の各シリーズの
trendLineTypeを ExponentialFit に設定するIgcToolActionRadioComponent。 - Linear: チャート内の各シリーズの
trendLineTypeを LinearFit に設定するIgcToolActionRadioComponent。 - Logarithmic: チャート内の各シリーズの
trendLineTypeを LogarithmicFit に設定するIgcToolActionRadioComponent。
HelpersHeader: サブ セクションのヘッダー。SeriesAvg:AverageタイプのValueLayerValueModeを使用して、チャートのシリーズ コレクションにIgcValueLayerComponentを追加または削除するIgcToolActionCheckboxComponent。ValueLabelsMenu:IgcDataChartComponentのプロット領域に注釈を表示するためのさまざまなツールを含むサブ メニュー。ValueLabelsHeader: 次のツールのサブ メニュー セクション ヘッダー:ShowValueLabels:IgcCalloutLayerComponentを使用してデータ ポイント値を切り替えるIgcToolActionCheckboxComponent。ShowLastValueLabel:IgcFinalValueLayerComponentを使用して最終値軸の注釈を切り替えるIgcToolActionCheckboxComponent。
ShowCrosshairs: チャートのcrosshairsDisplayModeプロパティを介してマウスオーバー十字線の注釈を切り替えるIgcToolActionCheckboxComponent。ShowGridlines: X-Axis にmajorStrokeを適用することで追加のグリッド線を切り替えるIgcToolActionCheckboxComponent。
画像に保存アクション
CopyAsImage: チャートをクリップボードにコピーするオプションを公開するIgcToolActionLabelComponent。CopyHeader: サブ セクションのヘッダー。
SVG アイコン
ツールを手動で追加する場合、registerIconFromText メソッドを使用してアイコンを割り当てることができます。このメソッドには 3 つのパラメーターを渡す必要があります。1 つ目は、ツールで定義されたアイコン コレクション名です (例: iconCollectionName)。2 つ目は、ツールで定義されたアイコンの名前 (例: iconName) で、その後に SVG 文字列を追加します。
データ URL アイコン
svg を追加するのと同様に、registerIconFromDataURL を介して URL からアイコン画像を追加することもできます。メソッドの 3 番目のパラメーターは、文字列 URL を入力するために使用されます。
以下のコードは、SVG 文字列と URL のそれぞれの方法でアイコンを 2 つのコレクションに登録します。
var toolbar = this.toolbar;
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>';
toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);
toolbar.registerIconFromDataURL("CustomCollection2", "CustomIcon2", "https://www.svgrepo.com/show/678/calculator.svg");ツールは、登録時に指定したコレクション名と名前で、登録済みのアイコンを参照します。
<igc-tool-action-label
title="Custom Icon"
icon-name="CustomIcon"
icon-collection-name="CustomCollection">
</igc-tool-action-label>Vertical Orientation
By default the Web Components Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the IgcToolbarComponent.orientation property.
<igc-toolbar
id="toolbar"
orientation="Vertical">
</igc-toolbar>The following example demonstrates the vertical orientation of the Web Components Toolbar.
Color Editor
You can add a custom color editor tool to the the Web Components Toolbar, which will also work with the Command event to perform custom styling to your application.
<igc-toolbar
id="toolbar">
<igc-tool-action-color-editor
title="Series Brush"
id="colorEditorTool"
command-id="ToggleSeriesBrush">
</igc-tool-action-color-editor>
</igc-toolbar>
<igc-data-chart
id="chart"
is-horizontal-zoom-enabled="true">
</igc-data-chart>toolbar.target = this.chart;The following example demonstrates styling the Web Components Data Chart series brush with the Color Editor tool.