Sparkline
TsgcHTMLComponent_Sparkline — 从数值序列或绑定数据集渲染紧凑的内联 SVG 折线、柱形或面积迷你图,适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_Sparkline — 从数值序列或绑定数据集渲染紧凑的内联 SVG 折线、柱形或面积迷你图,适用于 Delphi、C++ Builder 和 .NET。
使用 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) 追加一个数据点;SetData(array of Double) 替换整个数据系列;ClearData 将其清空。
LoadFromDataSet(aDataSet, aValueField) 按数据集顺序为每一行读取一个值。
类函数 Build(aValues, aChartType, aLineColor) 无需管理实例即可返回可用的 HTML。
ChartType(slLine、slBar、slArea)决定数据系列的绘制方式。
LineColor/FillColor/LineWidth 控制描边和填充;Width/Height 设置 SVG 的尺寸。
ShowLastPoint/ShowMinMax 突出显示关键点;Min/Max 与 AutoMin/AutoMax 配合可固定 Y 轴范围。