バージョン

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

トピックの概要

目的

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

前提条件

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

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

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

このトピックの内容

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

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

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

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

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

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

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

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

構成可能な要素 プロパティ デフォルト値
名前 valueName 設定されていません
表示する値 value 設定されていません
幅と位置
(スケール全域)
valueInnerExtent 0.5
valueOuterExtent 0.65
ルック アンド フィール 塗りつぶし色 valueBrush デフォルトのテーマで定義済み
境界線の線幅 valueStrokeThickness 1.0
境界線の色 valueOutline デフォルトのテーマで定義済み
ツールチップ valueToolTipTemplate valueName の初期化状態による

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

プロパティ設定

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

構成の目的: 使用するプロパティ: 設定の選択肢:
要素 詳細
名前 パフォーマンス バーの名前 (ツールチップの表示用) valueName パフォーマンス バーの名前を表す文字列
表示する値 パフォーマンス バーで示された値 value スケールのメジャーにおける任意の値
幅と位置
(スケール全域)
下端 / 右端の位置 水平方向でパフォーマンス バーが位置する下端または垂直方向で位置する右端 valueInnerExtent 方向に応じた、グラフ領域の高さと幅の相対部分として必要な値。小数で指定 (例: 0.2)
上端 / 左端の位置 水平方向でパフォーマンス バーが位置する上端または垂直方向で位置する左端 (開始点と終了点間の差が目盛の線分の長さになります。) valueOuterExtent 方向に応じた、グラフ領域の高さと幅の相対部分として必要な値。小数で指定 (例: 0.2)
ルック アンド フィール 塗りつぶし色 バーの塗りつぶし色 valueBrush 任意の色
境界線の線幅 パフォーマンス バー境界線の太さ valueStrokeThickness 任意の値 (ピクセル)
境界線の色 パフォーマンス バー境界線の色 valueOutline 任意の色
ツールチップ パフォーマンス バーのツールチップの内容 valueToolTipTemplate 任意のテンプレート (詳細は、ツールチップの構成 (igBulletGraph) を参照)

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

プロパティ
value “85”
valueBrush '#FFA500'
valueInnerExtent “0.3”
valueOuterExtent “0.8”
valueOutline '#A52A2A'
valueStrokeThickness “3”

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

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 コントロールのパフォーマンス (実際値) バー、比較目盛 (ターゲット値) マーカー、およびスケールのディメンションを構成する方法を紹介します。

オンラインで表示: GitHub