Chart

TsgcHTMLComponent_Chart — renderize gráficos Chart.js (linha, barra, pizza, rosca, radar, polar, bolha e dispersão) a partir dos seus próprios dados ou diretamente de um dataset, em Delphi, C++ Builder e .NET.

Visão geral

TsgcHTMLComponent_Chart

Um componente de gráficos que emite um <canvas> Chart.js mais seu script de configuração. Defina o tipo, adicione labels e datasets e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_Chart

Renderiza

<canvas> Chart.js + markup Bootstrap 5

Família

Gráficos & Visualização

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, adicione dados, renderize

Defina ChartType, adicione labels e um ou mais datasets e então leia HTML (ou insira-o em uma 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

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Tipo de gráfico

ChartType seleciona linha, barra, pizza, rosca, radar, polar, bolha ou dispersão; Stacked empilha datasets; Title define o título.

Dados

AddLabel adiciona um label de eixo; AddDataset(label, data, color, bgColor, fill) adiciona uma série; ClearData a reseta; Datasets e Labels expõem as coleções.

Vinculação a dataset

LoadFromDataSet(aDataSet, aLabelField, aValueFields) preenche o gráfico a partir de uma consulta; atribua DataSource para atualização ao vivo.

Aparência

Width, Height, ShowLegend, Responsive, PointRadius e CustomOptions (JSON de opções brutas do Chart.js) ajustam a aparência.

Saída

HTML retorna o <canvas> mais seu script de configuração do Chart.js — sirva-o ou atribua-o ao BodyContent de um template de página.

Layout

Os herdados Section, ColumnWidth e RowGroup posicionam o gráfico em uma grade TsgcHTMLPageBuilder.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir