バージョン

igRadialGauge の概要

トピックの概要

目的

このセクションでは、igRadialGauge™ コントロールおよびその主要機能の概要を説明します。

igRadialGauge について

概要

igRadialGauge™ コントロールは、ゲージを表示するデータ ビジュアライゼーション ツールです。スケール、目盛、ラベル、針、範囲などの複数の視覚要素が含まれます。minimumValue および maximumValue 値を設定してスケールを作成し、針の値は value プロパティで設定します。また、ゲージはスケールの視覚的な合図を示す範囲もサポートします。詳しくは、範囲の構成 のトピックを参照してください。

ゲージには、スケールの後ろ側に描かれた背景図形があり、図形はゲージの背景として動作します。背景は、真円などの円形にすることができます。または、スケールをスイープできるように背景を固定することができ、ゲージのスケールの一部の背景にバッキングを提供することもできます。詳細は、背景の構成 (igRadialGauge)のトピックを参照してください。

ゲージの針は、あらかじめ定義されたいくつかの図形の中から選択できます。針は、ゲージの中心に置かれるピボット図形を持つことができます。ピボット図形は、事前定義された図形の 1 つを使用することもできます。オーバーレイまたはアンダーレイを含むピボット図形には、異なるピボット ブラシを設定し図形に適用することができます。詳細は、「針の構成 (igRadialGauge)」 のトピックをご覧ください。

このゲージは、1 つのスケール、1 つの針、1 組の目盛、および 1 組のラベルをサポートします。実際に、igRadialGauge コントロールに対する変更によって、アニメーションの機能が強化されています。アニメーションは、transitionDuration プロパティの設定で高度なカスタマイズが可能です。針の図形パラメータを微調整して、多数の形状の針を作ることができます。

プレビュー

以下のスクリーンショットは、igRadialGauge コントロールに 3 つの範囲を追加した場合のプレビューです。

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

  • igRadialGauge の追加: このトピックではコード例を使用して、igRadialGauge™ コントロールをページに追加する方法を説明します。

  • 背景の構成 (igRadialGauge): このトピックでは、igRadialGauge™ コントロールのバッキング機能の概念的な概要を提供します。バッキング領域のプロパティについて説明し、実装例を提供します。

  • ラベルの構成 (igRadialGauge): このトピックでは、igRadialGauge™ コントロールを使用したラベルの概念的な概要を提供します。ラベルのプロパティについて説明し、ラベルの構成方法の例も示します。

  • 針の構成 (igRadialGauge): このトピックでは、igRadialGauge™ コントロールを使用した針の概念的な概要を提供します。針のプロパティについて説明し、針の構成方法の例も示します。

  • 範囲の構成 (igRadialGauge): このトピックでは、igRadialGauge™ コントロールの範囲の概念的な概要を提供します。範囲のプロパティについて説明し、範囲をラジアル ゲージに追加する方法の例も示します。

  • スケールの構成 (igRadialGauge): このトピックでは、igRadialGauge™ コントロールのスケールの概念的な概要を提供します。スケールのプロパティについて説明し、スケールの実装方法の例も示します。

  • 目盛の構成 (igRadialGauge): このトピックでは、igRadialGauge™ コントロールを使用した目盛の概念的な概要を提供します。目盛のプロパティについて説明し、目盛の実装方法の例を示します。

サンプル

このトピックについては、以下のサンプルも参照してください。

  • API の使用: ボタンおよび API ビューアーが igRadialGauge の針のメソッドを紹介します。ボタンをクリックすると、ランタイムで針の値を変更するか、針の現在値を取得できます。

  • ゲージのアニメーション: このサンプルは、transitionDuration プロパティを設定してラジアル ゲージを簡単にアニメーション化する方法を紹介します。

  • ゲージ針: ポインターとして表示される針は、スケールで単一の値を示します。以下のオプション ペインでラジアル ゲージコントロールの針を操作できます。

  • ラベル設定: このサンプルは、ラジアル ゲージ コントロールのラベル設定の方法を紹介します。スライダーを使用して、labelInterval および labelExtent プロパティのラベルへの影響を確認できます。

  • 針のドラッグ: このサンプルは、Mouse イベントを使用してラジアル ゲージ コントロールの針をドラッグする方法を紹介します。

  • 範囲: 範囲は、スケールで値の指定した領域を強調表示する視覚的な要素です。オプション ペインを使用してラジアルゲージコントロールの Range プロパティを設定できます。

  • スケールの設定: スケールは、ラジアル ゲージで値の範囲を定義します。オプション ペインを使用してラジアルゲージコントロールの Scale プロパティを設定できます。

  • 目盛: ゲージの目盛をユーザーが指定した間隔で表示できます。オプション ペインを使用してラジアル ゲージ コントロールの Tick Mark プロパティを設定できます。

オンラインで表示: GitHub