Sparkline Component — sgcHTML | eSeGeCe

Sparkline

TsgcHTMLComponent_Sparkline — erzeugen Sie eine kompakte Inline-SVG-Sparkline (Linie, Balken oder Fläche) aus einer Werteserie oder einem gebundenen Dataset, in Delphi, C++ Builder und .NET.

Auf einen Blick

TsgcHTMLComponent_Sparkline

Übergeben Sie Werte mit AddValue oder SetData (oder binden Sie ein Dataset), wählen Sie einen ChartType, und lesen Sie dann die HTML-Eigenschaft — oder rufen Sie den Build-Einzeiler auf.

Komponentenklasse

TsgcHTMLComponent_Sparkline

Rendert

Inline-SVG-Sparkline (Span, keine Chart-Bibliothek)

Familie

Diagramme & Visualisierung

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Werte einspeisen, Diagrammtyp wählen, rendern

Rufen Sie AddValue oder SetData für die Serie auf (oder LoadFromDataSet), setzen Sie ChartType, und lesen Sie dann HTML.

uses
  sgcHTML_Component_Sparkline;

var
  oSpark: TsgcHTMLComponent_Sparkline;
  sHTML: string;
begin
  oSpark := TsgcHTMLComponent_Sparkline.Create(nil);
  try
    oSpark.ChartType := slArea;
    oSpark.Width := 160;
    oSpark.Height := 32;
    oSpark.ShowLastPoint := True;
    oSpark.SetData([14, 18, 12, 22, 30, 26, 34]);

    WebModule.Response := oSpark.HTML;   // inline SVG, no chart library
  finally
    oSpark.Free;
  end;
end;

// Or bind it straight to a dataset:
oSpark.LoadFromDataSet(qryRevenue, 'Amount');

// One-liner for inline use inside a bigger page:
sHTML := TsgcHTMLComponent_Sparkline.Build([5, 9, 4, 12, 7], slBar);

// includes: sgcHTML_Component_Sparkline.hpp

TsgcHTMLComponent_Sparkline *oSpark = new TsgcHTMLComponent_Sparkline(NULL);
try
{
  oSpark->ChartType = slArea;
  oSpark->Width = 160;
  oSpark->Height = 32;
  oSpark->ShowLastPoint = true;

  double vValues[] = {14, 18, 12, 22, 30, 26, 34};
  for (int i = 0; i < 7; i++)
    oSpark->AddValue(vValues[i]);

  String html = oSpark->HTML;   // inline SVG, no chart library
}
__finally
{
  delete oSpark;
}

using esegece.sgcWebSockets;

var spark = new TsgcHTMLComponent_Sparkline();
spark.ChartType = TsgcHTMLSparklineType.slArea;
spark.Width = 160;
spark.Height = 32;
spark.ShowLastPoint = true;

foreach (var v in new double[] { 14, 18, 12, 22, 30, 26, 34 })
    spark.AddValue(v);

string html = spark.HTML;   // inline SVG, no chart library

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Daten hinzufügen

AddValue(aValue) hängt einen Punkt an; SetData(array of Double) ersetzt die gesamte Serie; ClearData leert sie.

Dataset-Bindung

LoadFromDataSet(aDataSet, aValueField) liest einen Wert pro Zeile, in Dataset-Reihenfolge.

Einzeiler

Die Klassenfunktion Build(aValues, aChartType, aLineColor) gibt fertiges HTML zurück, ohne eine Instanz zu verwalten.

Diagrammtyp

ChartType (slLine, slBar, slArea) legt fest, wie die Serie gezeichnet wird.

Gestaltung

LineColor/FillColor/LineWidth steuern Linie und Füllung; Width/Height bestimmen die Größe des SVG.

Markierungen & Skala

ShowLastPoint/ShowMinMax heben Schlüsselpunkte hervor; Min/Max mit AutoMin/AutoMax legen den Y-Bereich fest.

Ressourcen

Weiter entdecken

	Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente.	Öffnen
	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen