Composant Sparkline — sgcHTML | eSeGeCe

Sparkline

TsgcHTMLComponent_Sparkline — affichez une sparkline SVG compacte en ligne, barre ou aire, intégrée en ligne, à partir d'une série de valeurs ou d'un jeu de données lié, en Delphi, C++ Builder et .NET.

En bref

TsgcHTMLComponent_Sparkline

Ajoutez des valeurs avec AddValue ou SetData (ou liez un jeu de données), choisissez un ChartType, puis lisez la propriété HTML — ou appelez le raccourci Build.

Classe du composant

TsgcHTMLComponent_Sparkline

Produit

Une sparkline SVG en ligne (span, sans bibliothèque de graphiques)

Famille

Graphiques & Visualisation

Langages

Delphi, C++ Builder, .NET

QuickStart

Fournissez des valeurs, choisissez un type de graphique, affichez-le

Appelez AddValue ou SetData pour la série (ou LoadFromDataSet), définissez ChartType, puis lisez 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

Référence

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

Les membres que vous utilisez le plus souvent.

Ajout de données

AddValue(aValue) ajoute un point ; SetData(array of Double) remplace toute la série ; ClearData la vide.

Liaison de jeu de données

LoadFromDataSet(aDataSet, aValueField) lit une valeur par ligne, dans l'ordre du jeu de données.

Raccourci

La fonction de classe Build(aValues, aChartType, aLineColor) renvoie un HTML prêt à l'emploi sans gérer d'instance.

Type de graphique

ChartType (slLine, slBar, slArea) choisit la façon dont la série est dessinée.

Style

LineColor/FillColor/LineWidth contrôlent le trait et le remplissage ; Width/Height dimensionnent le SVG.

Repères & échelle

ShowLastPoint/ShowMinMax mettent en évidence les points clés ; Min/Max avec AutoMin/AutoMax fixent la plage Y.

Ressources

Continuez l'exploration

	Aide en ligneRéférence API complète et guide d’utilisation pour ce composant.	Ouvrir
	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 80 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