Angular チャート ナビゲーション
Ignite UI for Angular チャートを使用すると、マウス、キーボード、およびタッチを介してインタラクティブなパンやズームが可能になります。
Angular チャート ナビゲーションの例
次の例は、使用可能なすべてのパンやズームのオプションを示しています。ボタンを使用して例を操作したり、ドロップダウンまたはチェックボックスを使用して目的のオプションを選択したりできます。
このサンプルが気に入りましたか?完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
ユーザー インタラクションによるチャート ナビゲーション
チャートでは、ズームはデフォルトでオンになっています。UI でナビゲーションを無効にするには、ズームを無効にする方向に応じて、チャートの isHorizontalZoomEnabled
プロパティまたは isVerticalZoomEnabled
プロパティのいずれかを false に設定する必要があります。
またマウスやタッチでズームまたはパンニングできます。チャートの defaultInteraction
プロパティは、マウスクリック イベントやタッチ イベントで何が起こるかを決定します。このプロパティはデフォルトで DragZoom
に設定されており、ズームを有効に設定すると、クリックしてドラッグした際にプロット領域の上に四角形のプレビューが配置され、グラフのズーム領域になります。この defaultInteraction
プロパティは、パンニングを許可する場合は DragPan
、これらの操作を禁止する場合は None
に設定することもできます。
タッチ、マウスとキーボードによるチャート ナビゲーション
Angular データ チャートのナビゲーションは、タッチ、マウスまたはキーボードのいずれかを使用して発生します。以下の操作は、デフォルトで以下のタッチ、マウスまたはキーボード操作を使用して呼び出すことができます。
- パン: キーボードの矢印キーを使用するか、Shift キーを押したまま、マウスでクリックしてドラッグするか、タッチで指を押して移動します。
- ズームイン: キーボードの PageUp キーを使用するか、マウスホイールを上に回転させるか、ピンチしてタッチでズームインします。
- ズームアウト: キーボードの PageDown キーを使用するか、マウスホイールを下に回転させるか、ピンチしてタッチでズームアウトします。
- チャート プロット領域に合わせる: キーボードのホームキーを使用します。これに対するマウスまたはタッチ操作はありません。
- 領域ズーム:
defaultInteraction
プロパティをデフォルトのDragZoom
に設定して、プロット領域内でマウスをクリックしてドラッグします。
ズーム操作とパン操作は、それぞれ dragModifier
プロパティと panModifier
プロパティを設定し、修飾キーを使用して有効にすることもできます。これらのプロパティは以下の修飾キーに設定することができ、押すと対応する操作が実行されます。
修飾値 | 対応するキー |
---|---|
Shift |
Shift |
Control |
Ctrl |
Windows |
Win |
Apple |
Apple |
None |
なし |
スクロールバーを使用したチャート ナビゲーション
チャートは、verticalViewScrollbarMode
プロパティと horizontalViewScrollbarMode
プロパティを有効にすることでスクロールできます。
これらは、次のオプションに構成できます:
Persistent
- チャートがズームインされている限り、スクロールバーは常に表示されたままになり、完全にズームアウトされるとフェードアウトします。Fading
- スクロールバーは使用後に消え、マウスがその位置に近づくと再び表示されます。FadeToLine
- ズームを使用していないときは、スクロールバーが細い線に縮小されます。None
- 既定値で、スクロールバーは表示されません。
次の例は、スクロールバーを有効にする方法を示しています。
コードによるチャート ナビゲーション
[!Note] チャートのコード ナビゲーションは、
IgxDataChartComponent
コントロールにのみ使用できます。
Angular データ チャートは、チャートでズームまたはパン操作が行われるたびに更新されるいくつかのナビゲーション プロパティを提供します。各プロパティは、チャートでズームやパンニングするためにコードで設定できます。以下は、これらのプロパティの一覧です。
windowPositionHorizontal
: コンテンツ ビュー長方形の X 部分を表す数値は、チャートで表示されます。windowPositionVertical
: 数値は、チャートに表示されるコンテンツビュー四角形のの Y 部分を表します。windowRect
: 長方形を表すRect
オブジェクトは、現在ビューにあるチャート部分を表します。例えば、windowRect
の "0, 0, 1, 1" はチャート全体になります。windowScaleHorizontal
: チャートで表示されるコンテンツ ビュー長方形の幅部分を表す数値。windowScaleVertical
: チャートで表示されるコンテンツ ビュー長方形の高さ部分を表す数値。
その他のリソース
関連するチャート機能の詳細については、以下のトピックを参照してください。
API リファレンス
以下は、上記のセクションで説明した API メンバーのリストです。
defaultInteraction
dragModifier
isHorizontalZoomEnabled
isVerticalZoomEnabled
panModifier
IgxCategoryChartComponent
IgxDataChartComponent
IgxFinancialChartComponent