Gauge
TsgcHTMLComponent_Gauge — 渲染一个半圆形 SVG 仪表盘,根据数值相对于其最小值和最大值进行绘制,带有低、中、高颜色阈值,适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_Gauge — 渲染一个半圆形 SVG 仪表盘,根据数值相对于其最小值和最大值进行绘制,带有低、中、高颜色阈值,适用于 Delphi、C++ Builder 和 .NET。
一个 KPI 组件,发出自包含的内联 <svg> 半圆。设置数值、范围和单位,然后读取 HTML 属性 — 当数值越过中、高阈值时,弧线颜色会自动切换。
设置 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) 通过单个调用返回相同的标记。