delon-chart
Crear Gráficos Angular con G2Plot
Crear gráficos empresariales en Angular requiere comprender las APIs de G2Plot y los patrones de ng-alain. Esta habilidad proporciona patrones de componentes listos para usar para gráficos de barras, circulares, de radar y de línea de tiempo usando @delon/chart.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "delon-chart". Muéstrame cómo crear un gráfico de barras
النتيجة المتوقعة:
- Importar G2BarComponent desde @delon/chart/bar
- Definir datos como una señal con propiedades x e y
- Establecer las propiedades height y padding en el componente
- Usar señales computadas para actualizaciones de datos reactivas
- Ejemplo: <g2-bar [data]="barData()" [height]="300" [padding]="[20, 40, 50, 40]" />
استخدام "delon-chart". Cómo creo un gráfico circular con opción de dona
النتيجة المتوقعة:
- Importar G2PieComponent desde @delon/chart/pie
- Establecer la propiedad [inner] a un valor entre 0 y 1
- Usar la propiedad [hasLegend] para mostrar la leyenda
- Establecer la propiedad [total] para mostrar el total en el centro
- Ejemplo: <g2-pie [data]="data()" [inner]="0.6" [hasLegend]="true" [total]="totalTasks()" />
التدقيق الأمني
آمنPure documentation skill containing only markdown content and TypeScript code examples. No executable code, scripts, network calls, or file system access. All 61 static findings are false positives caused by the scanner misinterpreting documentation patterns as security threats.
عوامل الخطر
🌐 الوصول إلى الشبكة (3)
📁 الوصول إلى نظام الملفات (1)
⚙️ الأوامر الخارجية (47)
درجة الجودة
ماذا يمكنك بناءه
Construir visualizaciones de tableros
Crear tableros de datos con múltiples tipos de gráficos para inteligencia empresarial
Agregar gráficos a interfaces de administración
Integrar gráficos empresariales en tableros de administración usando patrones de componentes
Visualizar progreso de tareas
Mostrar desgloses de estado de tareas y métricas de crecimiento con gráficos interactivos
جرّب هذه الموجهات
Muéstrame cómo crear un gráfico de barras con @delon/chart usando Angular signals
Cómo creo un gráfico circular con leyenda y opción de dona usando @delon/chart
Crea un ejemplo de tablero con componentes chart-card, gráfico de barras y gráfico circular
Cuáles son las mejores prácticas para optimizar el rendimiento de gráficos y manejar grandes conjuntos de datos
أفضل الممارسات
- Usar señales computadas para datos de gráficos reactivos en lugar de mutaciones directas
- Transformar datos fuera de las plantillas usando computed() para mejor rendimiento
- Manejar estados de carga y vacíos con bloques @if para una mejor experiencia de usuario
تجنب
- Mutar datos de gráficos directamente sin usar señales - usar el método .update() en su lugar
- Colocar lógica de filtrado compleja en enlaces de plantilla - usar señales computadas en su lugar
- Volver a obtener datos en cada ciclo de detección de cambios - memorizar con señales computadas