Sparkline Bileşeni — sgcHTML | eSeGeCe

Sparkline

TsgcHTMLComponent_Sparkline — Delphi, C++ Builder ve .NET'te bir değer serisinden ya da bağlı bir veri kümesinden, kompakt satır içi SVG çizgi, çubuk ya da alan mini grafiği işleyin.

Bir bakışta

TsgcHTMLComponent_Sparkline

AddValue ya da SetData ile değerler ekleyin (ya da bir veri kümesi bağlayın), bir ChartType seçin, ardından HTML özelliğini okuyun — ya da Build tek satırlık yardımcısını çağırın.

Bileşen sınıfı

TsgcHTMLComponent_Sparkline

İşler

Satır içi SVG mini grafiği (span, grafik kitaplığı gerekmez)

Aile

Grafikler & Görselleştirme

Diller

Delphi, C++ Builder, .NET

QuickStart

Değerleri besleyin, bir grafik türü seçin, işleyin

Seri için AddValue ya da SetData'yı çağırın (ya da LoadFromDataSet'i kullanın), ChartType'ı ayarlayın, ardından HTML'i okuyun.

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

Başvuru

Temel özellikler & yöntemler

En sık başvurduğunuz üyeler.

Veri ekleme

AddValue(aValue) bir nokta ekler; SetData(array of Double) tüm seriyi değiştirir; ClearData onu boşaltır.

Veri kümesi bağlama

LoadFromDataSet(aDataSet, aValueField), veri kümesi sırasına göre satır başına bir değer okur.

Tek satırlık

Sınıf işlevi Build(aValues, aChartType, aLineColor), bir örnek yönetmeden hazır HTML döndürür.

Grafik türü

ChartType (slLine, slBar, slArea), serinin nasıl çizileceğini seçer.

Stil

LineColor/FillColor/LineWidth, çizgiyi ve dolguyu denetler; Width/Height, SVG'yi boyutlandırır.

İşaretçiler & ölçek

ShowLastPoint/ShowMinMax, önemli noktaları vurgular; AutoMin/AutoMax ile Min/Max, Y aralığını sabitler.

Kaynaklar

Keşfetmeye devam edin

	Çevrimiçi yardımBu bileşen için tam API referansı ve kullanım kılavuzu.	Aç
	Tüm sgcHTML Bileşenleri80'den fazla bileşenin tam özellik matrisine göz atın.	Aç
	Ücretsiz Deneme Sürümünü İndirin30 günlük deneme, 60.HTML demo projeleriyle birlikte gelir.	Aç
	FiyatlandırmaTam kaynak kodlu Single, Team ve Site lisansları.	Aç