Componente Sparkline — sgcHTML | eSeGeCe

Sparkline

TsgcHTMLComponent_Sparkline — renderize um sparkline SVG compacto de linha, barra ou área a partir de uma série de valores ou de um dataset vinculado, em Delphi, C++ Builder e .NET.

Visão geral

TsgcHTMLComponent_Sparkline

Adicione valores com AddValue ou SetData (ou vincule um dataset), escolha um ChartType e então leia a propriedade HTML — ou chame o atalho Build.

Classe do componente

TsgcHTMLComponent_Sparkline

Renderiza

Sparkline SVG inline (span, sem biblioteca de gráficos)

Família

Gráficos & Visualização

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Alimente valores, escolha um tipo de gráfico, renderize

Chame AddValue ou SetData para a série (ou LoadFromDataSet), defina ChartType e então leia 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

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Adicionando dados

AddValue(aValue) adiciona um ponto; SetData(array of Double) substitui toda a série; ClearData a esvazia.

Vinculação a dataset

LoadFromDataSet(aDataSet, aValueField) lê um valor por linha, na ordem do dataset.

Atalho

A função de classe Build(aValues, aChartType, aLineColor) retorna o HTML pronto sem gerenciar uma instância.

Tipo de gráfico

ChartType (slLine, slBar, slArea) escolhe como a série é desenhada.

Estilo

LineColor/FillColor/LineWidth controlam o traço e o preenchimento; Width/Height dimensionam o SVG.

Marcadores & escala

ShowLastPoint/ShowMinMax destacam pontos-chave; Min/Max com AutoMin/AutoMax fixam o intervalo do eixo Y.

Recursos

Continue explorando

	Ajuda onlineReferência completa da API e guia de uso para este componente.	Abrir
	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 80 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir