Gauge
TsgcHTMLComponent_Gauge — renderuje półkolisty wskaźnik SVG, który nanosi wartość względem jej minimum i maksimum z progami kolorów niskim, średnim i wysokim, w Delphi, C++ Builder i .NET.
TsgcHTMLComponent_Gauge — renderuje półkolisty wskaźnik SVG, który nanosi wartość względem jej minimum i maksimum z progami kolorów niskim, średnim i wysokim, w Delphi, C++ Builder i .NET.
Komponent KPI, który generuje samodzielny wbudowany półokrąg <svg>. Ustaw wartość, zakres i jednostkę, a następnie odczytaj właściwość HTML — kolor łuku zmienia się automatycznie, gdy wartość przekracza próg średni i wysoki.
TsgcHTMLComponent_Gauge
Półkolisty wskaźnik w wbudowanym <svg>
Delphi, C++ Builder, .NET
Ustaw Value, MinValue i MaxValue, wybierz progi, a następnie odczytaj HTML. Dla jednorazowego wskaźnika użyj statycznej metody pomocniczej 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, "%");Składniki, po które sięgasz najczęściej.
Value, MinValue i MaxValue (wszystkie Double) określają, do jakiego poziomu wypełnia się łuk; wartość jest automatycznie ograniczana do zakresu.
Title wypisuje się pod wskaźnikiem, a Unit_ obok wartości; minimum i maksimum rysowane są na końcach łuku.
ThresholdMid i ThresholdHigh (Double) decydują, jakiego koloru używa łuk wartości w miarę wzrostu odczytu.
ColorLowStyle, ColorMidStyle i ColorHighStyle (TsgcHTMLColor) ustawiają kolory progów; ciągi ColorLow/ColorMid/ColorHigh nadpisują je dosłownym kolorem CSS. BackgroundArcColorStyle koloruje ścieżkę.
Width (px, domyślnie 200), ArcStrokeWidth, ValueFontSize, UnitFontSize, LabelFontSize i SvgViewBox dostrajają wyrenderowany SVG.
HTML zwraca wbudowany wskaźnik <svg>. Statyczna metoda Build(aTitle, aValue, aMin, aMax, aUnit, aGaugeID) zwraca te same znaczniki w pojedynczym wywołaniu.