Chart

TsgcHTMLComponent_Chart — rendert Chart.js-Diagramme (Linie, Balken, Kreis, Donut, Radar, Polar, Bubble und Scatter) aus deinen eigenen Daten oder direkt aus einem Dataset, in Delphi, C++ Builder und .NET.

Auf einen Blick

TsgcHTMLComponent_Chart

Eine Diagrammkomponente, die ein Chart.js-<canvas> samt Konfigurationsskript ausgibt. Lege den Typ fest, füge Labels und Datasets hinzu und lies dann die HTML-Eigenschaft aus.

Komponentenklasse

TsgcHTMLComponent_Chart

Rendert

Chart.js-<canvas> + Bootstrap-5-Markup

Familie

Diagramme & Visualisierung

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Erstellen, Daten hinzufügen, rendern

Lege ChartType fest, übergib Labels und ein oder mehrere Datasets und lies dann HTML aus (oder platziere es in einer TsgcHTMLTemplate_Bootstrap-Seite).

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

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die du am häufigsten brauchst.

Diagrammtyp

ChartType wählt Linie, Balken, Kreis, Donut, Radar, Polar, Bubble oder Scatter; Stacked stapelt Datasets; Title setzt die Überschrift.

Daten

AddLabel fügt ein Achsen-Label hinzu; AddDataset(label, data, color, bgColor, fill) fügt eine Datenreihe hinzu; ClearData setzt sie zurück; Datasets und Labels geben die Collections frei.

Dataset-Bindung

LoadFromDataSet(aDataSet, aLabelField, aValueFields) füllt das Diagramm aus einer Abfrage; weise DataSource für eine Echtzeit-Aktualisierung zu.

Darstellung

Width, Height, ShowLegend, Responsive, PointRadius und CustomOptions (rohes Chart.js-Options-JSON) feinjustieren das Aussehen.

Ausgabe

HTML liefert das <canvas> samt zugehörigem Chart.js-Konfigurationsskript — liefere es aus oder weise es dem BodyContent einer Seitenvorlage zu.

Layout

Die geerbten Section, ColumnWidth und RowGroup platzieren das Diagramm in einem TsgcHTMLPageBuilder-Raster.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchstöbere die vollständige Funktionsmatrix mit über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen