Astrol.Component.Charts dibuja gráficas a partir de listas de C#: usted indica qué propiedad va en cada eje y el componente se encarga del resto. Funciona en Blazor WebAssembly y Blazor Server y está basado en ApexCharts 3.50 (licencia MIT).
1. Instale el paquete
Desde el NuGet de AstrolUI (origen https://nuget.astrolui.com/v3/index.json) o referenciando el proyecto en su solución:
dotnet add package Astrol.Component.Charts <!-- or in the .csproj --><PackageReference Include="Astrol.Component.Charts" Version="10.0.13.*" />2. Añada el espacio de nombres
Los componentes y las opciones están en el espacio de nombres AstrolCharts. Añádalo a su _Imports.razor (o al principio de cada página):
@* _Imports.razor *@@using AstrolCharts3. Tema y scripts
No hace falta añadir ningún script ni hoja de estilos de las gráficas: ApexCharts (≈600 KB) y el tema de las gráficas se descargan solos la primera vez que se pinta una gráfica, y las páginas sin gráficas no los descargan. Para que los textos y los tooltips sigan el tema claro/oscuro de AstrolUI, la aplicación debe incluir la hoja de estilos de los componentes básicos (normalmente ya la tiene).
<!-- AstrolUI theme (colors, light/dark mode), shared with the other components --><link href="_content/Astrol.Component.Basic/css/astrol-basic.min.css" rel="stylesheet" /> <!-- No longer needed (they can be removed if you are upgrading) --><script type="module" src="_content/Astrol.Component.Charts/js/astrolcharts.min.js"></script><link href="_content/Astrol.Component.Charts/css/astrolcharts.min.css" rel="stylesheet" />4. Su primera gráfica
Siga con la página AstrolChart: un ejemplo mínimo, cómo se conectan sus datos, los tipos de series, las opciones y la referencia completa. Luego vea los ejemplos de gráficas básicas, circulares, otros tipos, rangos y finanzas e interacción; cada uno tiene su código completo para copiar.