Componente Chart — sgcHTML

In breve

TsgcHTMLComponent_Chart

Un componente per grafici che genera un <canvas> Chart.js insieme al suo script di configurazione. Imposta il tipo, aggiungi etichette e dataset, poi leggi la proprietà HTML.

Classe del componente

TsgcHTMLComponent_Chart

Genera

<canvas> Chart.js + markup Bootstrap 5

Famiglia

Grafici e Visualizzazione

Linguaggi

Delphi, C++ Builder, .NET

Guida rapida

Crealo, aggiungi i dati, generalo

Imposta ChartType, inserisci le etichette e uno o più dataset, poi leggi HTML (oppure inseriscilo in una pagina 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

Riferimento

Proprietà e metodi principali

I membri che userai più spesso.

Tipo di grafico

ChartType seleziona linee, barre, torta, ciambella, radar, polare, bolle o dispersione; Stacked impila i dataset; Title imposta l'intestazione.

Dati

AddLabel aggiunge un'etichetta dell'asse; AddDataset(label, data, color, bgColor, fill) aggiunge una serie; ClearData la azzera; Datasets e Labels espongono le collezioni.

Binding ai dataset

LoadFromDataSet(aDataSet, aLabelField, aValueFields) riempie il grafico da una query; assegna DataSource per l'aggiornamento in tempo reale.

Aspetto

Width, Height, ShowLegend, Responsive, PointRadius e CustomOptions (JSON grezzo delle opzioni Chart.js) regolano l'aspetto.

Output

HTML restituisce il <canvas> insieme al suo script di configurazione Chart.js — servilo, oppure assegnalo al BodyContent di un template di pagina.

Layout

Le proprietà ereditate Section, ColumnWidth e RowGroup collocano il grafico su una griglia TsgcHTMLPageBuilder.

Risorse

Continua a esplorare

	Tutti i componenti sgcHTMLEsplora la matrice completa di oltre 60 componenti.	Apri
	Scarica la versione di provaLa versione di prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri

Chart