Chart
TsgcHTMLComponent_Chart — renderuje wykresy Chart.js (liniowe, słupkowe, kołowe, pierścieniowe, radarowe, polarne, bąbelkowe i punktowe) z własnych danych lub bezpośrednio z zestawu danych, w Delphi, C++ Builder i .NET.
TsgcHTMLComponent_Chart — renderuje wykresy Chart.js (liniowe, słupkowe, kołowe, pierścieniowe, radarowe, polarne, bąbelkowe i punktowe) z własnych danych lub bezpośrednio z zestawu danych, w Delphi, C++ Builder i .NET.
Komponent wykresów, który generuje element <canvas> Chart.js wraz ze skryptem konfiguracyjnym. Ustaw typ, dodaj etykiety i zestawy danych, a następnie odczytaj właściwość HTML.
TsgcHTMLComponent_Chart
Chart.js <canvas> + znaczniki Bootstrap 5
Delphi, C++ Builder, .NET
Ustaw ChartType, przekaż etykiety i jeden lub więcej zestawów danych, a następnie odczytaj HTML (albo umieść go na stronie 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 scriptSkładniki, po które sięgasz najczęściej.
ChartType wybiera wykres liniowy, słupkowy, kołowy, pierścieniowy, radarowy, polarny, bąbelkowy lub punktowy; Stacked układa zestawy danych w stos; Title ustawia nagłówek.
AddLabel dodaje etykietę osi; AddDataset(label, data, color, bgColor, fill) dodaje serię; ClearData ją resetuje; Datasets i Labels udostępniają kolekcje.
LoadFromDataSet(aDataSet, aLabelField, aValueFields) wypełnia wykres z zapytania; przypisz DataSource, aby uzyskać odświeżanie na żywo.
Width, Height, ShowLegend, Responsive, PointRadius oraz CustomOptions (surowy JSON opcji Chart.js) dostrajają wygląd.
HTML zwraca element <canvas> wraz ze skryptem konfiguracyjnym Chart.js — udostępnij go lub przypisz do właściwości BodyContent szablonu strony.
Dziedziczone Section, ColumnWidth i RowGroup umieszczają wykres na siatce TsgcHTMLPageBuilder.