React チャートナビゲーション

Ignite UI for React チャートを使用すると、マウス、キーボード、およびタッチを介してインタラクティブなパンやズームが可能になります。

React チャートナビゲーションの例

次の例は、使用可能なすべてのパンやズームのオプションを示しています。ボタンを使用して例を操作したり、ドロップダウンまたはチェックボックスを使用して目的のオプションを選択したりできます。

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

ユーザーインタラクションによるチャートナビゲーション

ズームがデフォルトでオンになっているかどうかは、使用しているチャートによって異なります。IgrCategoryChart を使用している場合、デフォルトでオンになっていますが、IgrDataChart ではオフです。+UI でナビゲーションを有効または無効にするには、ズームを無効にする方向に応じて、チャートの isHorizontalZoomEnabled プロパティおよび/または isVerticalZoomEnabled プロパティを設定する必要があります。

またマウスやタッチでズームまたはパンニングできます。チャートの defaultInteraction プロパティは、マウスクリックイベントやタッチイベントで何が起こるかを決定します。このプロパティはデフォルトで DragZoom に設定されており、ズームを有効に設定すると、クリックしてドラッグした際にプロット領域の上に四角形のプレビューが配置され、グラフのズーム領域になります。この defaultInteraction プロパティは、パンニングを許可する場合は DragPan、これらの操作を禁止する場合は None に設定することもできます。

タッチ、マウスとキーボードによるチャートナビゲーション

React データチャートのナビゲーションは、タッチ、マウスまたはキーボードのいずれかを使用して発生します。以下の操作は、デフォルトで以下のタッチ、マウスまたはキーボード操作を使用して呼び出すことができます。

パン: キーボードの 🡐 🡒 🡑 🡓 矢印キーを使用するか、SHIFT キーを押したまま、マウスでクリックしてドラッグするか、タッチで指を押して移動します。
ズームイン: キーボードの PAGE UP キーを使用するか、マウスホイールを上に回転させるか、ピンチしてタッチでズームインします。
ズームアウト: キーボードの PAGE DOWN キーを使用するか、マウスホイールを下に回転させるか、ピンチしてタッチでズームアウトします。
チャートプロット領域に合わせる: キーボードのホームキーを使用します。これに対するマウスまたはタッチ操作はありません。
領域ズーム: defaultInteraction プロパティをデフォルトの DragZoom に設定して、プロット領域内でマウスをクリックしてドラッグします。

ズーム操作とパン操作は、それぞれ dragModifier プロパティと panModifier プロパティを設定し、修飾キーを使用して有効にすることもできます。これらのプロパティは以下の修飾キーに設定することができ、押すと対応する操作が実行されます。

修飾値	対応するキー
`Shift`	`SHIFT`
`Control`	`CTRL`
`Windows`	`WIN`
`Apple`	`APPLE`
`None`	なし

スクロールバーを使用したチャートナビゲーション

チャートは、verticalViewScrollbarMode プロパティと horizontalViewScrollbarMode プロパティを有効にすることでスクロールできます。

これらは、次のオプションに構成できます:

Persistent - チャートがズームインされている限り、スクロールバーは常に表示されたままになり、完全にズームアウトされるとフェードアウトします。
Fading - スクロールバーは使用後に消え、マウスがその位置に近づくと再び表示されます。
FadeToLine - ズームを使用していないときは、スクロールバーが細い線に縮小されます。
None - 既定値で、スクロールバーは表示されません。

次の例は、スクロールバーを有効にする方法を示しています。

コードによるチャートナビゲーション

[!Note] チャートのコードナビゲーションは、IgrDataChart コントロールにのみ使用できます。

React データチャートは、チャートでズームまたはパン操作が行われるたびに更新されるいくつかのナビゲーションプロパティを提供します。各プロパティは、チャートでズームやパンニングするためにコードで設定できます。以下は、これらのプロパティの一覧です。

windowPositionHorizontal: コンテンツビュー長方形の X 部分を表す数値は、チャートで表示されます。
windowPositionVertical: 数値は、チャートに表示されるコンテンツビュー四角形のの Y 部分を表します。
windowRect: 長方形を表す Rect オブジェクトは、現在ビューにあるチャート部分を表します。例えば、windowRect の "0, 0, 1, 1" はチャート全体になります。
windowScaleHorizontal: チャートで表示されるコンテンツビュー長方形の幅部分を表す数値。
windowScaleVertical: チャートで表示されるコンテンツビュー長方形の高さ部分を表す数値。

その他のリソース

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

API リファレンス

以下は、上記のセクションで説明した API メンバーのリストです。

React チャート ナビゲーション