Sparkline Component — sgcHTML | eSeGeCe

Sparkline

TsgcHTMLComponent_Sparkline — renderizza uno sparkline SVG inline compatto a linea, barre o area da una serie di valori o da un dataset associato, in Delphi, C++ Builder e .NET.

In sintesi

TsgcHTMLComponent_Sparkline

Inserisci i valori con AddValue o SetData (oppure collega un dataset), scegli un ChartType, quindi leggi la proprietà HTML — oppure chiama la funzione monolinea Build.

Classe del componente

TsgcHTMLComponent_Sparkline

Renderizza

Inline SVG sparkline (span, no chart library)

Famiglia

Grafici e Visualizzazione

Linguaggi

Delphi, C++ Builder, .NET

QuickStart

Inserisci i valori, scegli un tipo di grafico, renderizzalo

Chiama AddValue o SetData per la serie (oppure LoadFromDataSet), imposta ChartType, quindi leggi 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

Riferimento

Proprietà e metodi principali

I membri che utilizzerai più spesso.

Aggiungere dati

AddValue(aValue) aggiunge un punto; SetData(array of Double) sostituisce l’intera serie; ClearData la svuota.

Binding ai dataset

LoadFromDataSet(aDataSet, aValueField) legge un valore per riga, nell’ordine del dataset.

Funzione monolinea

La funzione di classe Build(aValues, aChartType, aLineColor) restituisce l’HTML pronto senza dover gestire un’istanza.

Tipo di grafico

ChartType (slLine, slBar, slArea) determina come viene disegnata la serie.

Stile

LineColor/FillColor/LineWidth controllano il tratto e il riempimento; Width/Height dimensionano l’SVG.

Marcatori e scala

ShowLastPoint/ShowMinMax evidenziano i punti chiave; Min/Max con AutoMin/AutoMax fissano l’intervallo Y.

Risorse

Continua a esplorare

	Guida in lineaRiferimento API completo e guida all’uso per questo componente.	Apri
	Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 80 componenti.	Apri
	Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri