Sparkline 组件 — sgcHTML | eSeGeCe

Sparkline

TsgcHTMLComponent_Sparkline — 从数值序列或绑定数据集渲染紧凑的内联 SVG 折线、柱形或面积迷你图,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_Sparkline

使用 AddValueSetData 推送数值(或绑定数据集),选择 ChartType,然后读取 HTML 属性 — 或调用 Build 单行方法。

组件类

TsgcHTMLComponent_Sparkline

渲染为

内联 SVG 迷你图(span 元素,无需图表库)

语言

Delphi, C++ Builder, .NET

输入数值、选择图表类型、渲染它

为数据系列调用 AddValueSetData(或使用 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。

图表类型

ChartTypeslLineslBarslArea)决定数据系列的绘制方式。

样式

LineColor/FillColor/LineWidth 控制描边和填充;Width/Height 设置 SVG 的尺寸。

标记与刻度

ShowLastPoint/ShowMinMax 突出显示关键点;Min/MaxAutoMin/AutoMax 配合可固定 Y 轴范围。

继续探索

在线帮助此组件的完整 API 参考和使用指南。
所有 sgcHTML 组件浏览 80 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。

准备好开始了吗?

下载免费试用版,开始在 Delphi、C++ Builder 和 .NET 中构建 Web 界面。