Chart-component — sgcHTML

In het kort

TsgcHTMLComponent_Chart

Een grafiekcomponent die een Chart.js-<canvas> plus het bijbehorende configuratiescript genereert. Stel het type in, voeg labels en datasets toe en lees vervolgens de eigenschap HTML.

Componentklasse

TsgcHTMLComponent_Chart

Rendert

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

Familie

Grafieken en visualisatie

Talen

Delphi, C++ Builder, .NET

Snelstart

Maak het aan, voeg data toe, render het

Stel ChartType in, push labels en een of meer datasets, en lees vervolgens HTML (of plaats het in een TsgcHTMLTemplate_Bootstrap-pagina).

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

Referentie

Belangrijkste eigenschappen & methoden

De members die je het vaakst gebruikt.

Grafiektype

ChartType selecteert lijn, staaf, taart, donut, radar, polair, bubbel of spreiding; Stacked stapelt datasets; Title stelt de kop in.

Data

AddLabel voegt een aslabel toe; AddDataset(label, data, color, bgColor, fill) voegt een reeks toe; ClearData stelt het opnieuw in; Datasets en Labels ontsluiten de collecties.

Datasetbinding

LoadFromDataSet(aDataSet, aLabelField, aValueFields) vult de grafiek uit een query; wijs DataSource toe voor live verversing.

Weergave

Width, Height, ShowLegend, Responsive, PointRadius en CustomOptions (ruwe Chart.js options-JSON) stemmen het uiterlijk af.

Uitvoer

HTML retourneert de <canvas> plus het bijbehorende Chart.js-configuratiescript — serveer het of wijs het toe aan de BodyContent van een paginatemplate.

Lay-out

Overgeërfde Section, ColumnWidth en RowGroup plaatsen de grafiek op een TsgcHTMLPageBuilder-raster.

Resources

Blijf ontdekken

	Alle sgcHTML-componentenBlader door de volledige functiematrix van 60+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen

Chart