Gauge

TsgcHTMLComponent_Gauge — 渲染一个半圆形 SVG 仪表盘,根据数值相对于其最小值和最大值进行绘制,带有低、中、高颜色阈值,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_Gauge

一个 KPI 组件,发出自包含的内联 <svg> 半圆。设置数值、范围和单位,然后读取 HTML 属性 — 当数值越过中、高阈值时,弧线颜色会自动切换。

组件类

TsgcHTMLComponent_Gauge

渲染为

内联 <svg> 半圆形仪表盘

语言

Delphi, C++ Builder, .NET

创建它、设置数值、渲染它

设置 ValueMinValueMaxValue,选择阈值,然后读取 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, "%");

关键属性与方法

您最常使用的成员。

数值与范围

ValueMinValueMaxValue(均为 Double)定义弧线填充到的位置;数值会自动被钳制在范围内。

标签

Title 打印在仪表盘下方,Unit_ 打印在数值旁边;最小值和最大值绘制在弧线两端。

阈值

ThresholdMidThresholdHighDouble)决定数值弧线随读数攀升时使用哪种颜色。

颜色

ColorLowStyleColorMidStyleColorHighStyleTsgcHTMLColor)设置阈值颜色;ColorLow/ColorMid/ColorHigh 字符串用字面 CSS 颜色覆盖。BackgroundArcColorStyle 为轨道着色。

尺寸

Width(px,默认 200)、ArcStrokeWidthValueFontSizeUnitFontSizeLabelFontSizeSvgViewBox 调整渲染后的 SVG。

输出与 Build

HTML 返回内联 <svg> 仪表盘。静态 Build(aTitle, aValue, aMin, aMax, aUnit, aGaugeID) 通过单个调用返回相同的标记。

继续探索

所有 sgcHTML 组件浏览 60 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。

准备好开始了吗?

下载免费试用版,为您的 Delphi、C++ Builder 或 .NET Web 应用添加仪表盘。