React Toolbar コンポーネント

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

React ツールバーの例

依存関係

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

npm install igniteui-react-layouts
npm install igniteui-react-inputs
npm install igniteui-react-charts
npm install igniteui-react-core

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

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

使用方法

ツール操作

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

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

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

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

React データチャートの統合

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

  private toolbar: IgrToolbar
  private toolbarRef(r: IgrToolbar) {
      this.toolbar = r;
      this.setState({});
  }
  private chart: IgrDataChart
  private chartRef(r: IgrDataChart) {
      this.chart = r;
      this.toolbar.target = this.chart;
      this.setState({});
  }
  public render(): JSX.Element {
        return (
      <div>
        <IgrToolbar
          ref={this.toolbarRef}>
        </IgrToolbar>
      </div>

      <div>
        <IgrDataChart
          ref={this.chartRef}>
        </IgrDataChart>
      </div>
    );
  }

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

ズーム操作

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

トレンド操作

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

画像に保存アクション

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

SVG アイコン

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

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

<IgrToolbar orientation="Vertical" />

垂直方向

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

<IgrToolbar orientation="Vertical" />

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

React ツールバーの例

依存関係

使用方法

ツール操作

React データチャートの統合

SVG アイコン

垂直方向

API リファレンス

その他のリソース

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

React ツールバーの例

依存関係

使用方法

ツール操作

React データ チャートの統合

SVG アイコン

垂直方向

API リファレンス

その他のリソース

React データチャートの統合