delon-chart
Criar Gráficos Angular com G2Plot
Criar gráficos empresariais em Angular requer compreensão das APIs do G2Plot e padrões do ng-alain. Esta skill fornece padrões de componentes prontos para uso para gráficos de barras, pizza, radar e linha do tempo usando @delon/chart.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「delon-chart」を使用しています。 Mostre-me como criar um gráfico de barras
期待される結果:
- Importe G2BarComponent de @delon/chart/bar
- Defina dados como um signal com propriedades x e y
- Configure as props de altura e espaçamento no componente
- Use computed signals para atualizações de dados reativas
- Exemplo: <g2-bar [data]="barData()" [height]="300" [padding]="[20, 40, 50, 40]" />
「delon-chart」を使用しています。 Como criar um gráfico de pizza com opção de rosca
期待される結果:
- Importe G2PieComponent de @delon/chart/pie
- Configure a prop [inner] com um valor entre 0 e 1
- Use a prop [hasLegend] para exibir a legenda
- Configure a prop [total] para exibição do total no centro
- Exemplo: <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 visualizações de painel
Criar painéis de dados com múltiplos tipos de gráficos para inteligência de negócios
Adicionar gráficos a interfaces administrativas
Integrar gráficos empresariais em painéis administrativos usando padrões de componentes
Visualizar progresso de tarefas
Exibir detalhamentos de status de tarefas e métricas de crescimento com gráficos interativos
これらのプロンプトを試す
Mostre-me como criar um gráfico de barras com @delon/chart usando signals do Angular
Como criar um gráfico de pizza com legenda e opção de rosca usando @delon/chart
Crie um exemplo de painel com componentes chart-card, gráfico de barras e gráfico de pizza
Quais são as melhores práticas para otimizar o desempenho de gráficos e lidar com grandes conjuntos de dados
ベストプラクティス
- Use computed signals para dados de gráfico reativos em vez de mutações diretas
- Transforme dados fora dos templates usando computed() para melhor desempenho
- Trate estados de carregamento e vazios com blocos @if para melhor experiência do usuário
回避
- Mutar dados de gráfico diretamente sem usar signals - use o método .update() em vez disso
- Colocar lógica de filtragem complexa em bindings de template - use computed signals em vez disso
- Buscar dados novamente a cada ciclo de detecção de mudanças - memoize com computed signals