Gauge
TsgcHTMLComponent_Gauge — render een halfronde SVG-meter die een waarde uitzet tegen zijn min en max met kleurdrempels voor laag, midden en hoog, in Delphi, C++ Builder en .NET.
TsgcHTMLComponent_Gauge — render een halfronde SVG-meter die een waarde uitzet tegen zijn min en max met kleurdrempels voor laag, midden en hoog, in Delphi, C++ Builder en .NET.
Een KPI-component dat een op zichzelf staande inline <svg>-halve cirkel uitstuurt. Stel de waarde, het bereik en de eenheid in en lees dan de HTML-eigenschap — de boogkleur schakelt automatisch om wanneer de waarde de midden- en hoog-drempels passeert.
TsgcHTMLComponent_Gauge
Inline <svg> halfronde meter
Delphi, C++ Builder, .NET
Stel Value, MinValue en MaxValue in, kies de drempels en lees dan HTML. Gebruik voor een eenmalige meter de statische Build-helper.
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, "%");De members die je het vaakst gebruikt.
Value, MinValue en MaxValue (allemaal Double) bepalen waartoe de boog vult; de waarde wordt automatisch tot het bereik beperkt.
Title wordt onder de meter afgedrukt en Unit_ naast de waarde; de min en max worden aan de uiteinden van de boog getekend.
ThresholdMid en ThresholdHigh (Double) bepalen welke kleur de waardeboog gebruikt naarmate de meting stijgt.
ColorLowStyle, ColorMidStyle en ColorHighStyle (TsgcHTMLColor) stellen de drempelkleuren in; de strings ColorLow/ColorMid/ColorHigh overschrijven met een letterlijke CSS-kleur. BackgroundArcColorStyle kleurt de track.
Width (px, standaard 200), ArcStrokeWidth, ValueFontSize, UnitFontSize, LabelFontSize en SvgViewBox stemmen de gerenderde SVG af.
HTML retourneert de inline <svg>-meter. De statische Build(aTitle, aValue, aMin, aMax, aUnit, aGaugeID) retourneert dezelfde markup in één aanroep.