Chart
TsgcHTMLComponent_Chart — Delphi, C++ Builder 및 .NET에서 사용자 자신의 데이터 또는 데이터셋에서 직접 Chart.js 그래프(선형, 막대, 원형, 도넛, 레이더, 극좌표, 버블 및 산점도)를 렌더링합니다.
TsgcHTMLComponent_Chart — Delphi, C++ Builder 및 .NET에서 사용자 자신의 데이터 또는 데이터셋에서 직접 Chart.js 그래프(선형, 막대, 원형, 도넛, 레이더, 극좌표, 버블 및 산점도)를 렌더링합니다.
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 그리드에 배치합니다.