Sparkline-component — sgcHTML | eSeGeCe

Sparkline

TsgcHTMLComponent_Sparkline — render een compacte inline SVG-lijn-, staaf- of vlaksparkline op basis van een waardenreeks of een gebonden dataset, in Delphi, C++ Builder en .NET.

In één oogopslag

TsgcHTMLComponent_Sparkline

Voeg waarden toe met AddValue of SetData (of bind een dataset), kies een ChartType, en lees dan de HTML-eigenschap — of roep de Build-oneliner aan.

Componentklasse

TsgcHTMLComponent_Sparkline

Rendert

Inline SVG-sparkline (span, geen grafiekbibliotheek)

Familie

Grafieken en visualisatie

Talen

Delphi, C++ Builder, .NET

QuickStart

Voer waarden in, kies een grafiektype, render het

Roep AddValue of SetData aan voor de reeks (of LoadFromDataSet), stel ChartType in, en lees dan 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

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Data toevoegen

AddValue(aValue) voegt één punt toe; SetData(array of Double) vervangt de hele reeks; ClearData maakt hem leeg.

Datasetbinding

LoadFromDataSet(aDataSet, aValueField) leest één waarde per rij, in datasetvolgorde.

Oneliner

De klassefunctie Build(aValues, aChartType, aLineColor) retourneert kant-en-klare HTML zonder een instantie te beheren.

Grafiektype

ChartType (slLine, slBar, slArea) bepaalt hoe de reeks wordt getekend.

Styling

LineColor/FillColor/LineWidth bepalen de lijn en vulling; Width/Height bepalen de grootte van de SVG.

Markeringen en schaal

ShowLastPoint/ShowMinMax lichten belangrijke punten uit; Min/Max met AutoMin/AutoMax zetten het Y-bereik vast.

Bronnen

Blijf ontdekken

	Online helpVolledige API-referentie en gebruikshandleiding voor dit onderdeel.	Open
	Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen