Sparkline

TsgcHTMLComponent_Sparkline — renderiza un sparkline SVG compacto en línea, de tipo línea, barra o área, a partir de una serie de valores o un dataset vinculado, en Delphi, C++ Builder y .NET.

De un vistazo

TsgcHTMLComponent_Sparkline

Añade valores con AddValue o SetData (o vincula un dataset), elige un ChartType, y luego lee la propiedad HTML — o llama al método abreviado Build.

Clase del componente

TsgcHTMLComponent_Sparkline

Renderiza

Sparkline SVG en línea (span, sin librería de gráficos)

Familia

Gráficos y Visualización

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Añade valores, elige un tipo de gráfico, renderízalo

Llama a AddValue o SetData para la serie (o LoadFromDataSet), define ChartType, y luego lee 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

Referencia

Propiedades y métodos clave

Los miembros que usarás con más frecuencia.

Añadir datos

AddValue(aValue) añade un punto; SetData(array of Double) reemplaza toda la serie; ClearData la vacía.

Vinculación a dataset

LoadFromDataSet(aDataSet, aValueField) lee un valor por fila, en el orden del dataset.

Método abreviado

La función de clase Build(aValues, aChartType, aLineColor) devuelve HTML listo sin gestionar una instancia.

Tipo de gráfico

ChartType (slLine, slBar, slArea) elige cómo se dibuja la serie.

Estilo

LineColor/FillColor/LineWidth controlan el trazo y el relleno; Width/Height dimensionan el SVG.

Marcadores y escala

ShowLastPoint/ShowMinMax resaltan puntos clave; Min/Max junto con AutoMin/AutoMax fijan el rango del eje Y.

Recursos

Sigue explorando

	Ayuda en líneaReferencia completa de la API y guía de uso para este componente.	Abrir
	Todos los componentes de sgcHTMLExplora la matriz completa de más de 80 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir