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 メンバーのリストです。