このコントロールを使用すると、線形ゲージまたは円形ゲージを使用して、情報を範囲の形で表示できます。
文字列タイプの変数を入力し、 [ Control Type ] プロパティの値を [ Linear Gauge ] に変更すると、GeneXus によって GaugeSDT という新しい SDT が自動的に生成されます。これは、コントロール全体に影響するプロパティと値に分かれており、各範囲も同様です。  
 
 

範囲 (各範囲に適用):

例: 

ここで、Panel オブジェクトに文字列タイプの変数を置き、 [ Control Type ] プロパティを [ Linear Gauge ] に設定します (変数名は &LineGauge)。

GeneXus のコントロールタイプを変更すると、オブジェクトのプレビューが変わります。このレイアウトに示す画像は一例です。
Refresh イベントでデータをロードします。この例では、Data Provider オブジェクト (LoadData) から提供されます。構造は以下のとおりです:

GaugeSDT
{
    MaxValue   = 100
    MinValue   = 0
    Value      = 35
    Height     = 8
    ShowMinMax = False
    ShowValue  = True
    Ranges
    {
        Range
        {
            Color  = '#00FF00'//緑
            Name   = 'Low' 
            Length = 28
        }
        Range
        {
            Color     = '#FF8000'//オレンジ
            Name     = 'Medium' 
            Length     = 52
        }
        Range
        {
            Color  = '#FF0000' //赤
            Name   = 'High' 
            Length = 20
        }
    }
}

同様に、返されたデータを再び使用して、コントロールの [ Thickness ] プロパティと [ Type ] プロパティを変更します。そうすることで、円形タイプ (変数 &CircularGauge) を使用して同じ情報を表示します。コードは以下のとおりです:

Event Refresh
//Linear Gauge
    &GaugeSDT      = LoadData()
    &LineGauge     = &GaugeSDT.ToJson()

//Circular Gauge
    &GaugeSDT.Type       = 'Circular'
    &GaugeSDT.Thickness  = 35
    &CircularGauge       = &GaugeSDT.ToJson()
Endevent

このコントロールには、Attribute クラスの [ Animated ] プロパティと [ Animated Duration ] プロパティが適用されているため、ビューのロード時に表示されるアニメーションが生成されます。 

 Angular 固有の考慮事項

Angular ジェネレーターでは、これらの新しいプロパティを Gauge コントロールに設定できます:

• --stroke-animation-duration: 各ゲージ領域に対してチャージングアニメーションの時間幅を指定します。 

このプロパティは CarmineSD テーマまたはDesign System オブジェクトから設定できます。
既定の設定値は 1 秒です。これはゲージが最初に読み込まれたときに各領域のアニメーションが 1 秒間実行されることを意味します。
この設定は両方の Gauge コントロール (Line と Circle) に適用されます。

CarmineSD テーマからの設定
Attribute クラスまたはサブクラスから [ 詳細 ] → [ カスタム ] プロパティへ進み、 [ --stroke-animation-duration ] プロパティの設定を行います。 
Design System オブジェクトからの設定
このケースでは、もし Gauge コントロールクラスで使用されるセレクター AttributeStyled_1 を使用できるのであれば、その他の CSS プロパティと同様に、 [ --stroke-animation-duration ] プロパティを次の例のように設定します:

styles CarmineSD
{
      .AttributeStyled_1
      {
          background-color: $colors.Background;
          --stroke-animation-duration: 0s;
          --stroke-linecap: round;
      }
}

 

• --stroke-linecap: ゲージ領域の始めと終わりの端の形を指定します。このプロパティは、円形ゲージにのみ適用されます。

値として以下を設定できます:

• butt (既定)
• round
• square

 

適用範囲

オブジェクト: Panel
ジェネレーター: Android、Angular、Apple