@delon/chart - Enterprise Chart Components
Créer des graphiques Angular avec G2Plot
La création de graphiques dans Angular nécessite la compréhension de plusieurs bibliothèques de graphiques et de leurs API. Cette compétence fournit des modèles de composants prêts à l'emploi pour les graphiques en barres, en secteurs, radar et temporels utilisant @delon/chart avec G2Plot.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "@delon/chart - Enterprise Chart Components". Show me how to create a bar chart
Resultado esperado:
- Import G2BarComponent from @delon/chart/bar
- Define data as a signal with x and y properties
- Set height and padding props on the component
- Use computed signals for reactive data updates
- Example: <g2-bar [data]="barData()" [height]="300" [padding]="[20, 40, 50, 40]" />
Auditoria de Segurança
SeguroPure documentation skill containing only markdown content and TypeScript code examples. No executable code, scripts, network calls, or file system access.
Pontuação de qualidade
O Que Você Pode Construir
Créer des visualisations de tableaux de bord
Créer des tableaux de bord de données avec plusieurs types de graphiques pour les applications de business intelligence
Ajouter des graphiques aux interfaces d'administration
Intégrer des graphiques d'entreprise dans les tableaux de bord d'administration utilisant les modèles de composants ng-alain
Visualiser la progression des tâches
Afficher les répartition de l'état des tâches et les métriques de croissance avec des graphiques interactifs
Tente Estes Prompts
Montre-moi comment créer un graphique en barres avec @delon/chart en utilisant les signaux Angular
Comment créer un graphique en secteurs avec légende et option anneau en utilisant @delon/chart
Crée un exemple de tableau de bord avec les composants chart-card, graphique en barres et graphique en secteurs
Quelles sont les meilleures pratiques pour optimiser les performances des graphiques et gérer de grands ensembles de données
Melhores Práticas
- Utiliser les signaux computed pour les données de graphiques réactives au lieu de mutations directes
- Transformer les données hors des templates en utilisant computed() pour de meilleures performances
- Gérer les états de chargement et vide avec des blocs @if pour une meilleure UX
Evitar
- Muter les données de graphiques directement sans utiliser les signaux - utiliser la méthode .update() à la place
- Placer une logique de filtrage complexe dans les liaisons de templates - utiliser les signaux computed
- Récupérer les données à chaque cycle de détection de changement - mémoïser avec les signaux computed