Gauge
TsgcHTMLComponent_Gauge — Delphi、C++ Builder、.NET で、値を最小値と最大値に対してプロットし、低、中、高の色のしきい値を備えた半円形の SVG ゲージをレンダリングします。
TsgcHTMLComponent_Gauge — Delphi、C++ Builder、.NET で、値を最小値と最大値に対してプロットし、低、中、高の色のしきい値を備えた半円形の SVG ゲージをレンダリングします。
自己完結型のインライン <svg> の半円を出力する KPI コンポーネントです。値、範囲、単位を設定してから、HTML プロパティを読み取ります — 値が中および高のしきい値を超えると、円弧の色が自動的に切り替わります。
TsgcHTMLComponent_Gauge
インライン <svg> の半円形ゲージ
Delphi, C++ Builder, .NET
Value、MinValue、MaxValue を設定し、しきい値を選択してから、HTML を読み取ります。単発のゲージには、静的な Build ヘルパーを使用します。
uses
sgcHTML_Enums, sgcHTML_Component_Gauge;
var
oGauge: TsgcHTMLComponent_Gauge;
begin
oGauge := TsgcHTMLComponent_Gauge.Create(nil);
try
oGauge.Title := 'CPU Load';
oGauge.Value := 72;
oGauge.MinValue := 0;
oGauge.MaxValue := 100;
oGauge.Unit_ := '%';
oGauge.ThresholdMid := 50;
oGauge.ThresholdHigh := 80;
oGauge.ColorLowStyle := hcSuccess;
oGauge.ColorMidStyle := hcWarning;
oGauge.ColorHighStyle := hcDanger;
WebModule.Response := oGauge.HTML; // inline <svg> semicircle
finally
oGauge.Free;
end;
end;
// Or one line with the static Build helper:
Result := TsgcHTMLComponent_Gauge.Build('CPU Load', 72, 0, 100, '%');// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Gauge.hpp
TsgcHTMLComponent_Gauge *oGauge = new TsgcHTMLComponent_Gauge(NULL);
try
{
oGauge->Title = "CPU Load";
oGauge->Value = 72;
oGauge->MinValue = 0;
oGauge->MaxValue = 100;
oGauge->Unit_ = "%";
oGauge->ThresholdMid = 50;
oGauge->ThresholdHigh = 80;
oGauge->ColorLowStyle = hcSuccess;
oGauge->ColorMidStyle = hcWarning;
oGauge->ColorHighStyle = hcDanger;
String html = oGauge->HTML; // inline <svg> semicircle
}
__finally
{
delete oGauge;
}
// Or one line with the static Build helper:
String html = TsgcHTMLComponent_Gauge::Build("CPU Load", 72, 0, 100, "%");using esegece.sgcWebSockets;
var gauge = new TsgcHTMLComponent_Gauge();
gauge.Title = "CPU Load";
gauge.Value = 72;
gauge.MinValue = 0;
gauge.MaxValue = 100;
gauge.Unit_ = "%";
gauge.ThresholdMid = 50;
gauge.ThresholdHigh = 80;
gauge.ColorLowStyle = TsgcHTMLColor.hcSuccess;
gauge.ColorMidStyle = TsgcHTMLColor.hcWarning;
gauge.ColorHighStyle = TsgcHTMLColor.hcDanger;
string html = gauge.HTML; // inline <svg> semicircle
// Or one line with the static Build helper:
string html = TsgcHTMLComponent_Gauge.Build("CPU Load", 72, 0, 100, "%");最もよく使うメンバーです。
Value、MinValue、MaxValue（すべて Double）は、円弧がどこまで埋まるかを定義します。値は自動的に範囲内に収められます。
Title はゲージの下に印字され、Unit_ は値の横に印字されます。最小値と最大値は円弧の両端に描画されます。
ThresholdMid と ThresholdHigh（Double）は、読み取り値が上昇するにつれて値の円弧がどの色を使うかを決定します。
ColorLowStyle、ColorMidStyle、ColorHighStyle（TsgcHTMLColor）はしきい値の色を設定します。ColorLow/ColorMid/ColorHigh 文字列は、リテラルな CSS の色で上書きします。BackgroundArcColorStyle はトラックに色を付けます。
Width（px、既定値 200）、ArcStrokeWidth、ValueFontSize、UnitFontSize、LabelFontSize、SvgViewBox は、レンダリングされる SVG を調整します。
HTML はインライン <svg> のゲージを返します。静的な Build(aTitle, aValue, aMin, aMax, aUnit, aGaugeID) は、同じマークアップを 1 回の呼び出しで返します。