Chart
TsgcHTMLComponent_Chart — 从您自己的数据或直接从数据集渲染 Chart.js 图形（折线图、柱状图、饼图、环形图、雷达图、极坐标图、气泡图和散点图），适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_Chart — 从您自己的数据或直接从数据集渲染 Chart.js 图形（折线图、柱状图、饼图、环形图、雷达图、极坐标图、气泡图和散点图），适用于 Delphi、C++ Builder 和 .NET。
一个图表组件，发出 Chart.js <canvas> 及其配置脚本。设置类型，添加标签和数据集，然后读取 HTML 属性。
TsgcHTMLComponent_Chart
Chart.js <canvas> + Bootstrap 5 标记
Delphi, C++ Builder, .NET
设置 ChartType，推入标签和一个或多个数据集，然后读取 HTML（或将其放入 TsgcHTMLTemplate_Bootstrap 页面）。
uses
sgcHTML_Enums, sgcHTML_Component_Chart;
var
oChart: TsgcHTMLComponent_Chart;
begin
oChart := TsgcHTMLComponent_Chart.Create(nil);
try
oChart.ChartType := ctBar;
oChart.Title := 'Quarterly Revenue';
oChart.Height := '320';
oChart.AddLabel('Q1');
oChart.AddLabel('Q2');
oChart.AddLabel('Q3');
oChart.AddDataset('Revenue', [1200, 1900, 1500],
'#7C3AED', 'rgba(124,58,237,.25)', True);
WebModule.Response := oChart.HTML; // <canvas> + Chart.js script
finally
oChart.Free;
end;
end;
// Or bind it straight to a dataset:
oChart.LoadFromDataSet(qryQuarters, 'Quarter', 'Revenue');// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Chart.hpp
TsgcHTMLComponent_Chart *oChart = new TsgcHTMLComponent_Chart(NULL);
try
{
oChart->ChartType = ctBar;
oChart->Title = "Quarterly Revenue";
oChart->Height = "320";
oChart->AddLabel("Q1");
oChart->AddLabel("Q2");
oChart->AddLabel("Q3");
oChart->AddDataset("Revenue", OPENARRAY(double, (1200, 1900, 1500)),
"#7C3AED", "rgba(124,58,237,.25)", true);
String html = oChart->HTML; // <canvas> + Chart.js script
}
__finally
{
delete oChart;
}using esegece.sgcWebSockets;
var chart = new TsgcHTMLComponent_Chart();
chart.ChartType = TsgcHTMLChartType.ctBar;
chart.Title = "Quarterly Revenue";
chart.Height = "320";
chart.AddLabel("Q1");
chart.AddLabel("Q2");
chart.AddLabel("Q3");
chart.AddDataset("Revenue", new double[] { 1200, 1900, 1500 },
"#7C3AED", "rgba(124,58,237,.25)", true);
string html = chart.HTML; // <canvas> + Chart.js script您最常使用的成员。
ChartType 选择折线图、柱状图、饼图、环形图、雷达图、极坐标图、气泡图或散点图；Stacked 堆叠数据集；Title 设置标题。
AddLabel 添加坐标轴标签；AddDataset(label, data, color, bgColor, fill) 添加一个系列；ClearData 重置它；Datasets 和 Labels 公开这些集合。
LoadFromDataSet(aDataSet, aLabelField, aValueFields) 从查询填充图表；赋值 DataSource 可实现实时刷新。
Width、Height、ShowLegend、Responsive、PointRadius 和 CustomOptions（原始 Chart.js 选项 JSON）调整外观。
HTML 返回 <canvas> 及其 Chart.js 配置脚本 — 直接提供服务，或将其赋给页面模板的 BodyContent。
继承的 Section、ColumnWidth 和 RowGroup 将图表放置在 TsgcHTMLPageBuilder 网格上。