Chart

TsgcHTMLComponent_Chart — génère des graphiques Chart.js (courbes, barres, secteurs, anneau, radar, polaire, bulles et nuage de points) depuis tes propres données ou directement depuis un dataset, en Delphi, C++ Builder et .NET.

En un coup d'œil

TsgcHTMLComponent_Chart

Un composant de graphiques qui émet un <canvas> Chart.js accompagné de son script de configuration. Choisis le type, ajoute des libellés et des datasets, puis lis la propriété HTML.

Classe du composant

TsgcHTMLComponent_Chart

Génère

Chart.js <canvas> + balisage Bootstrap 5

Famille

Graphiques & Visualisation

Langages

Delphi, C++ Builder, .NET

Démarrage rapide

Crée-le, ajoute des données, génère-le

Définis ChartType, ajoute des libellés et un ou plusieurs datasets, puis lis HTML (ou insère-le dans une page 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

Référence

Propriétés et méthodes clés

Les membres que tu utilises le plus souvent.

Type de graphique

ChartType sélectionne courbes, barres, secteurs, anneau, radar, polaire, bulles ou nuage de points ; Stacked empile les datasets ; Title définit le titre.

Données

AddLabel ajoute un libellé d'axe ; AddDataset(label, data, color, bgColor, fill) ajoute une série ; ClearData la réinitialise ; Datasets et Labels exposent les collections.

Liaison à un dataset

LoadFromDataSet(aDataSet, aLabelField, aValueFields) remplit le graphique depuis une requête ; affecte DataSource pour un rafraîchissement en direct.

Apparence

Width, Height, ShowLegend, Responsive, PointRadius et CustomOptions (JSON brut des options Chart.js) affinent le rendu.

Sortie

HTML renvoie le <canvas> ainsi que son script de configuration Chart.js — sers-le, ou affecte-le au BodyContent d'un modèle de page.

Mise en page

Les propriétés héritées Section, ColumnWidth et RowGroup placent le graphique sur une grille TsgcHTMLPageBuilder.

Ressources

Continue d'explorer

	Tous les composants sgcHTMLParcours la matrice complète des fonctionnalités de plus de 60 composants.	Ouvrir
	Télécharger l'essai gratuitL'essai de 30 jours inclut les projets de démo 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir