Charts pt BR

Ecossistema de gráficos

🌐 Esta página em: English · Português

O eQuantic.UI oferece componentes de gráfico reativos e de alta performance, embrulhando as bibliotecas de visualização JavaScript mais populares.

📊 Bibliotecas de gráfico disponíveis

Fornecemos wrappers para as duas bibliotecas de gráfico mais dominantes do ecossistema web:

1. Chart.js (eQuantic.UI.Charts.ChartJs)

• Tipo: baseada em Canvas HTML5.
• Melhor para: gráficos simples, limpos e leves.
• Suporte: Bar, Line, Pie, Doughnut, Radar, etc.

2. ApexCharts (eQuantic.UI.Charts.ApexCharts)

• Tipo: baseada em SVG.
• Melhor para: visualizações altamente interativas, modernas e complexas.
• Suporte: Area, Bar, Line, Heatmap, Candlestick, etc.

🚀 Instalação e registro

dotnet add package eQuantic.UI.Charts.ChartJs
dotnet add package eQuantic.UI.Charts.ApexCharts

No seu Program.cs:

builder.Services.AddUI(options =>
{
    options.UseChartJs()
           .UseApexCharts()
           .ScanAssembly(typeof(Program).Assembly);
});

// ...

// Nota: o MapUI() cuida automaticamente dos registros de endpoint necessários.
app.MapUI();

📈 Exemplo de uso

ApexCharts

new ApexChart<MyData>
{
    Options = new ApexOptions
    {
        Chart = new ChartConfig { Type = "bar" }
    },
    Series = new List<ApexSeries<MyData>>
    {
        new ApexSeries<MyData> { Name = "Vendas", Data = dataList }
    }
}

Chart.js

new ChartJs<MyData>
{
    Type = "bar",
    Data = new ChartData<MyData> { ... },
    Options = new ChartJsOptions { ... }
}

🏗️ Arquitetura

O sistema de gráficos foi desenhado para atualizações reativas em C#:

• Fortemente tipado: configuração e dados usam classes C# que espelham a API JS.
• Gestão de assets: as bibliotecas de gráfico declaram as dependências de CDN pelo sistema de assets.
• Zero configuração: os componentes injetam sozinhos os scripts/estilos necessários, sem nenhuma tag <script> na mão.
• Padrão de middleware: UseChartJs() / UseApexCharts() servem os scripts de inicialização e os endpoints de CDN.

🎨 Personalização

Todos os componentes de gráfico aceitam classes extras via ClassName e vivem em contêineres responsivos.