delon-chart
Создание диаграмм Angular с помощью G2Plot
Создание корпоративных диаграмм в Angular требует понимания API G2Plot и паттернов ng-alain. Этот навык предоставляет готовые к использованию паттерны компонентов для столбчатых, круговых, радарных диаграмм и временных шкал с использованием @delon/chart.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「delon-chart」。 Покажи мне, как создать столбчатую диаграмму
預期結果:
- Импортируйте G2BarComponent из @delon/chart/bar
- Определите данные как сигнал со свойствами x и y
- Установите свойства height и padding на компоненте
- Используйте вычисляемые сигналы для реактивных обновлений данных
- Пример: <g2-bar [data]="barData()" [height]="300" [padding]="[20, 40, 50, 40]" />
正在使用「delon-chart」。 Как создать круговую диаграмму с опцией donut
預期結果:
- Импортируйте G2PieComponent из @delon/chart/pie
- Установите свойство [inner] в значение от 0 до 1
- Используйте свойство [hasLegend] для отображения легенды
- Установите свойство [total] для отображения итога в центре
- Пример: <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)
品質評分
你能建構什麼
Создание визуализаций для панелей управления
Создание панелей данных с несколькими типами диаграмм для бизнес-аналитики
Добавление диаграмм в административные интерфейсы
Интеграция корпоративных диаграмм в административные панели с использованием паттернов компонентов
Визуализация прогресса задач
Отображение распределения статусов задач и метрик роста с интерактивными диаграммами
試試這些提示
Покажи мне, как создать столбчатую диаграмму с @delon/chart используя Angular signals
Как создать круговую диаграмму с легендой и опцией donut используя @delon/chart
Создай пример панели управления с компонентами chart-card, столбчатой и круговой диаграммами
Какие есть лучшие практики для оптимизации производительности диаграмм и обработки больших наборов данных
最佳實務
- Используйте вычисляемые сигналы для реактивных данных диаграмм вместо прямых мутаций
- Преобразуйте данные вне шаблонов, используя computed() для лучшей производительности
- Обрабатывайте состояния загрузки и пустых данных с помощью блоков @if для лучшего пользовательского опыта
避免
- Прямое изменение данных диаграммы без использования сигналов - используйте метод .update() вместо этого
- Размещение сложной логики фильтрации в привязках шаблона - используйте вычисляемые сигналы вместо этого
- Повторная загрузка данных при каждом цикле обнаружения изменений - кэшируйте с помощью вычисляемых сигналов