Sparkline
TsgcHTMLComponent_Sparkline — Delphi、C++ Builder、.NET で、値のシリーズまたはバインドされたデータセットから、コンパクトなインライン SVG の折れ線、棒、またはエリアスパークラインをレンダリングします。
TsgcHTMLComponent_Sparkline — Delphi、C++ Builder、.NET で、値のシリーズまたはバインドされたデータセットから、コンパクトなインライン SVG の折れ線、棒、またはエリアスパークラインをレンダリングします。
AddValue または SetData で値を追加し（またはデータセットをバインドし）、ChartType を選択してから、HTML プロパティを読み取ります — または、ワンライナーの Build を呼び出します。
TsgcHTMLComponent_Sparkline
インライン SVG スパークライン（span 要素、チャートライブラリ不要）
Delphi, C++ Builder, .NET
シリーズについて AddValue または SetData を呼び出し（または LoadFromDataSet）、ChartType を設定してから、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最もよく使うメンバーです。
AddValue(aValue) は 1 つのポイントを追加し、SetData(array of Double) はシリーズ全体を置き換え、ClearData は空にします。
LoadFromDataSet(aDataSet, aValueField) は、データセットの順序で 1 行につき 1 つの値を読み取ります。
クラス関数 Build(aValues, aChartType, aLineColor) は、インスタンスを管理せずに、そのまま使える HTML を返します。
ChartType（slLine、slBar、slArea）は、シリーズの描画方法を選択します。
LineColor/FillColor/LineWidth はストロークと塗りつぶしを制御し、Width/Height は SVG のサイズを設定します。
ShowLastPoint/ShowMinMax は重要なポイントを強調表示し、AutoMin/AutoMax を伴う Min/Max は Y 範囲を固定します。