En bref

TsgcHTMLComponent_Gauge

Un composant d'indicateur qui émet un demi-cercle <svg> en ligne autonome. Définissez la valeur, la plage et l'unité, puis lisez la propriété HTML — la couleur de l'arc change automatiquement lorsque la valeur franchit les seuils moyen et haut.

Classe du composant

TsgcHTMLComponent_Gauge

Produit

Jauge semi-circulaire en <svg> en ligne

Famille

Graphiques & Visualisation

Langages

Delphi, C++ Builder, .NET

QuickStart

Créez-la, définissez la valeur, affichez-la

Définissez Value, MinValue et MaxValue, choisissez les seuils, puis lisez HTML. Pour une jauge ponctuelle, utilisez l'assistant statique 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, "%");

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Valeur & plage

Value, MinValue et MaxValue (tous Double) définissent le remplissage de l'arc ; la valeur est limitée automatiquement à la plage.

Libellés

Title s'affiche sous la jauge et Unit_ s'affiche à côté de la valeur ; les min et max sont dessinés aux extrémités de l'arc.

Seuils

ThresholdMid et ThresholdHigh (Double) déterminent la couleur utilisée par l'arc de valeur à mesure que la lecture augmente.

Couleurs

ColorLowStyle, ColorMidStyle et ColorHighStyle (TsgcHTMLColor) définissent les couleurs des seuils ; les chaînes ColorLow/ColorMid/ColorHigh les remplacent par une couleur CSS littérale. BackgroundArcColorStyle teinte la piste.

Dimensionnement

Width (px, 200 par défaut), ArcStrokeWidth, ValueFontSize, UnitFontSize, LabelFontSize et SvgViewBox ajustent le SVG rendu.

Sortie & Build

HTML renvoie la jauge <svg> en ligne. La méthode statique Build(aTitle, aValue, aMin, aMax, aUnit, aGaugeID) renvoie le même balisage en un seul appel.

Ressources

Continuez l'exploration

	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 60 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir

Gauge