Componente Gauge — sgcHTML

De un vistazo

TsgcHTMLComponent_Gauge

Un componente de KPI que genera un semicírculo <svg> en línea y autónomo. Define el valor, el rango y la unidad, y luego lee la propiedad HTML — el color del arco cambia automáticamente a medida que el valor cruza los umbrales medio y alto.

Clase del componente

TsgcHTMLComponent_Gauge

Genera

Medidor semicircular <svg> en línea

Familia

Gráficos y Visualización

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Créalo, define el valor, renderízalo

Define Value, MinValue y MaxValue, elige los umbrales y luego lee HTML. Para un medidor puntual usa el helper estático 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, "%");

Referencia

Propiedades y métodos clave

Los miembros que más utilizarás.

Valor y rango

Value, MinValue y MaxValue (todos Double) definen hasta dónde se rellena el arco; el valor se ajusta automáticamente al rango.

Etiquetas

Title se imprime bajo el medidor y Unit_ se imprime junto al valor; el mínimo y el máximo se dibujan en los extremos del arco.

Umbrales

ThresholdMid y ThresholdHigh (Double) deciden qué color usa el arco del valor a medida que sube la lectura.

Colores

ColorLowStyle, ColorMidStyle y ColorHighStyle (TsgcHTMLColor) definen los colores de los umbrales; las cadenas ColorLow/ColorMid/ColorHigh los sustituyen por un color CSS literal. BackgroundArcColorStyle tiñe la pista.

Tamaño

Width (px, por defecto 200), ArcStrokeWidth, ValueFontSize, UnitFontSize, LabelFontSize y SvgViewBox ajustan el SVG generado.

Salida y Build

HTML devuelve el medidor <svg> en línea. El método estático Build(aTitle, aValue, aMin, aMax, aUnit, aGaugeID) devuelve el mismo marcado en una sola llamada.

Recursos

Sigue explorando

	Todos los componentes de sgcHTMLExplora la matriz de características completa de más de 60 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con todo el código fuente.	Abrir

Gauge