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 を設定し、ラベルと 1 つ以上のデータセットを追加したら、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 のグリッド上にチャートを配置します。