Chart

TsgcHTMLComponent_Chart — genera gráficos Chart.js (de líneas, barras, circulares, de anillo, radar, polares, de burbujas y de dispersión) a partir de tus propios datos o directamente desde un dataset, en Delphi, C++ Builder y .NET.

De un vistazo

TsgcHTMLComponent_Chart

Un componente de gráficos que genera un <canvas> de Chart.js junto con su script de configuración. Define el tipo, añade etiquetas y datasets, y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_Chart

Genera

<canvas> de Chart.js + marcado Bootstrap 5

Familia

Gráficos y Visualización

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Créalo, añade datos, renderízalo

Define ChartType, añade etiquetas y uno o varios datasets, y luego lee HTML (o insértalo en una página 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

Referencia

Propiedades y métodos clave

Los miembros que más utilizarás.

Tipo de gráfico

ChartType selecciona líneas, barras, circular, anillo, radar, polar, burbujas o dispersión; Stacked apila los datasets; Title define el encabezado.

Datos

AddLabel añade una etiqueta de eje; AddDataset(label, data, color, bgColor, fill) añade una serie; ClearData la reinicia; Datasets y Labels exponen las colecciones.

Vinculación a dataset

LoadFromDataSet(aDataSet, aLabelField, aValueFields) rellena el gráfico desde una consulta; asigna DataSource para una actualización en vivo.

Apariencia

Width, Height, ShowLegend, Responsive, PointRadius y CustomOptions (el JSON de opciones nativo de Chart.js) ajustan el aspecto.

Salida

HTML devuelve el <canvas> junto con su script de configuración de Chart.js — sírvelo o asígnalo al BodyContent de una plantilla de página.

Disposición

Las propiedades heredadas Section, ColumnWidth y RowGroup colocan el gráfico en una cuadrícula TsgcHTMLPageBuilder.

Recursos

Sigue explorando

	Todos los componentes de sgcHTMLExplora la matriz de características completa de más de 60 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con todo el código fuente.	Abrir