Visão geral

TsgcHTMLComponent_Gauge

Um componente de KPI que emite um semicírculo <svg> inline autossuficiente. Defina o valor, o intervalo e a unidade e então leia a propriedade HTML — a cor do arco muda automaticamente conforme o valor cruza os limiares médio e alto.

Classe do componente

TsgcHTMLComponent_Gauge

Renderiza

Medidor semicircular <svg> inline

Família

Gráficos & Visualização

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, defina o valor, renderize

Defina Value, MinValue e MaxValue, escolha os limiares e então leia HTML. Para um medidor avulso use o 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, "%");

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Valor & intervalo

Value, MinValue e MaxValue (todos Double) definem até onde o arco preenche; o valor é limitado ao intervalo automaticamente.

Rótulos

Title é impresso sob o medidor e Unit_ é impresso ao lado do valor; o mínimo e o máximo são desenhados nas extremidades do arco.

Limiares

ThresholdMid e ThresholdHigh (Double) decidem qual cor o arco de valor usa conforme a leitura sobe.

Cores

ColorLowStyle, ColorMidStyle e ColorHighStyle (TsgcHTMLColor) definem as cores dos limiares; as strings ColorLow/ColorMid/ColorHigh as substituem por uma cor CSS literal. BackgroundArcColorStyle tinge a trilha.

Dimensionamento

Width (px, padrão 200), ArcStrokeWidth, ValueFontSize, UnitFontSize, LabelFontSize e SvgViewBox ajustam o SVG renderizado.

Saída & Build

HTML retorna o medidor <svg> inline. O estático Build(aTitle, aValue, aMin, aMax, aUnit, aGaugeID) retorna o mesmo markup em uma única chamada.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir

Gauge