Chart
TsgcHTMLComponent_Chart — Delphi, C++ Builder ve .NET'te kendi verilerinizden ya da doğrudan bir veri kümesinden Chart.js grafikleri (çizgi, çubuk, pasta, halka, radar, polar, baloncuk ve dağılım) işleyin.
TsgcHTMLComponent_Chart — Delphi, C++ Builder ve .NET'te kendi verilerinizden ya da doğrudan bir veri kümesinden Chart.js grafikleri (çizgi, çubuk, pasta, halka, radar, polar, baloncuk ve dağılım) işleyin.
Bir Chart.js <canvas> ile yapılandırma betiğini üreten bir grafik bileşeni. Türü ayarlayın, etiketler ve veri kümeleri ekleyin, ardından HTML özelliğini okuyun.
TsgcHTMLComponent_Chart
Chart.js <canvas> + Bootstrap 5 işaretlemesi
Delphi, C++ Builder, .NET
ChartType'ı ayarlayın, etiketleri ve bir veya daha fazla veri kümesini ekleyin, ardından HTML'i okuyun (ya da bir TsgcHTMLTemplate_Bootstrap sayfasına bırakın).
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 scriptEn sık başvurduğunuz üyeler.
ChartType çizgi, çubuk, pasta, halka, radar, polar, baloncuk ya da dağılımı seçer; Stacked veri kümelerini yığar; Title başlığı ayarlar.
AddLabel bir eksen etiketi ekler; AddDataset(label, data, color, bgColor, fill) bir seri ekler; ClearData sıfırlar; Datasets ve Labels koleksiyonları açığa çıkarır.
LoadFromDataSet(aDataSet, aLabelField, aValueFields) grafiği bir sorgudan doldurur; canlı yenileme için DataSource atayın.
Width, Height, ShowLegend, Responsive, PointRadius ve CustomOptions (ham Chart.js seçenekleri JSON'u) görünümü ayarlar.
HTML, <canvas> ile Chart.js yapılandırma betiğini döndürür — sunun ya da bir sayfa şablonunun BodyContent'ine atayın.
Devralınan Section, ColumnWidth ve RowGroup, grafiği bir TsgcHTMLPageBuilder ızgarasına yerleştirir.