Komponent Sparkline — sgcHTML | eSeGeCe

Sparkline

TsgcHTMLComponent_Sparkline — renderuje kompaktowy wbudowany wykres iskrowy SVG liniowy, słupkowy lub obszarowy z serii wartości lub powiązanego zestawu danych, w Delphi, C++ Builder i .NET.

W skrócie

TsgcHTMLComponent_Sparkline

Dodawaj wartości za pomocą AddValue lub SetData (lub powiąż zestaw danych), wybierz ChartType, a następnie odczytaj właściwość HTML — albo użyj jednolinijkowej metody pomocniczej Build.

Klasa komponentu

TsgcHTMLComponent_Sparkline

Renderuje

Wbudowany wykres iskrowy SVG (span, bez biblioteki wykresów)

Rodzina

Wykresy i wizualizacja

Języki

Delphi, C++ Builder, .NET

Szybki start

Podaj wartości, wybierz typ wykresu, wyrenderuj

Wywołaj AddValue lub SetData dla serii (lub LoadFromDataSet), ustaw ChartType, a następnie odczytaj 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

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Dodawanie danych

AddValue(aValue) dodaje jeden punkt; SetData(array of Double) zastępuje całą serię; ClearData ją czyści.

Powiązanie z zestawem danych

LoadFromDataSet(aDataSet, aValueField) odczytuje jedną wartość na wiersz, w kolejności zestawu danych.

Budowa w jednej linii

Funkcja klasowa Build(aValues, aChartType, aLineColor) zwraca gotowy HTML bez konieczności zarządzania instancją.

Typ wykresu

ChartType (slLine, slBar, slArea) wybiera sposób rysowania serii.

Stylizacja

LineColor/FillColor/LineWidth kontrolują obrys i wypełnienie; Width/Height ustalają rozmiar SVG.

Znaczniki i skala

ShowLastPoint/ShowMinMax wyróżniają kluczowe punkty; Min/Max wraz z AutoMin/AutoMax ustalają zakres osi Y.

Zasoby

Poznawaj dalej

	Pomoc onlinePełna dokumentacja API i przewodnik użytkowania tego komponentu.	Otwórz
	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 80+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz