パフォーマンス バーの構成 (igBulletGraph)

トピックの概要

目的

このトピックではコード例を使用して、igBulletGraph™ コントロールのパフォーマンス バーを構成する方法を説明します。説明には、バーが示す値、幅、位置、および書式設定が含まれます。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

• igBulletGraph の概要: このトピックは、主要機能、最小要件およびユーザー機能性など、igBulletGraph コントロールの概念的な情報を提供します。

• igBulletGraph の追加: このトピック グループは、igBulletGraph コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

• パフォーマンス バーの構成
  • パフォーマンス バーの外観構成の概要
  • パフォーマンス バーの外観構成の概要表
  • プロパティ設定
  • 例
• 関連コンテンツ
  • トピック
  • サンプル

パフォーマンス バーの構成

パフォーマンス バーの外観構成の概要

パフォーマンス バーはスケール範囲の先頭から開始しなければなりません。終了位置のみ構成可能です。終了位置でバーの長さを効果的に構成できます。終了位置は value プロパティで処理されます。

スケール全域のディメンションでの位置は、valueInnerExtent および valueOuterExtent プロパティにより、グラフ領域の端に対して構成できます。パフォーマンス バーの位置を構成すると幅も定義されます。

バーのルック アンド フィールは、各プロパティ (valueBrush、valueOutline および valueStrokeThickness) を使用して塗りつぶし色、境界線の色および境界線の線幅をカスタマイズできます。

パフォーマンス バーの外観構成の概要表

以下の表で、igBulletGraph コントロールのバーで構成できる要素を簡単に説明し、構成に使用するプロパティにマップします。

注: ツールチップの構成の詳細は、ツールチップの構成 (igBulletGraph) トピックのパフォーマンス バーのカスタム ツールチップの構成を参照してください。

プロパティ設定

以下の表では、任意の動作と各プロパティ設定のマップを示します。

例

以下のスクリーンショットは、以下の設定の結果 igBulletGraph の外観がどのようになるか示しています。

以下のコードはこの例を実装します。

JavaScript の場合:

 $(function () {             
    $("#bulletGraph").igBulletGraph({
        width: "300",
        height: "100",
        value:"85",
        valueBrush: '#FFA500',
        valueInnerExtent:"0.3",
        valueOuterExtent:"0.8",
        valueOutline:'A52A2A',
        valueStrokeThickness:"3"
  });

関連コンテンツ

トピック

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

• スケールの構成 (igBulletGraph): このトピックではコード例を使用して、igBulletGraph コントロールのスケールを構成する方法を説明します。説明には、コントロール内のスケールの配置、スケールの目盛およびラベルの構成が含まれます。

• 比較マーカーの構成 (igBulletGraph)

このトピックではコード例を使用して、igBulletGraph コントロールの比較目盛マーカーを構成する方法を説明します。説明には、マーカーの値、幅、および書式設定が含まれます。

• 比較範囲の構成 (igBulletGraph): このトピックではコード例を使用して、igBulletGraph コントロールの範囲を構成する方法を説明します。説明には、範囲の数、位置、長さ、幅、および書式設定が含まれます。

• 背景の構成 (igBulletGraph): このトピックではコード例を使用して、ブレット グラフの背景を構成する方法を説明します。説明には、背景のサイズ、位置、色、および境界線の設定が含まれます。

• ツールチップの構成 (igBulletGraph): このトピックではコード例を使用して、igBulletGraph コントロールのツールチップを有効にする方法および表示する遅延時間を設定する方法を説明します。

サンプル

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

• パフォーマンス バーの設定: このサンプルでは、igBulletGraph コントロールのパフォーマンス (実際値) バー、比較目盛 (ターゲット値) マーカー、およびスケールのディメンションを構成する方法を紹介します。