技能 delon-chart
📊

delon-chart

安全 🌐 网络访问📁 文件系统访问⚙️ 外部命令

使用 G2Plot 建立 Angular 圖表

在 Angular 中建立企業級圖表需要理解 G2Plot API 和 ng-alain 模式。本技能提供使用 @delon/chart 的即用型元件模式,支援長條圖、圓餅圖、雷達圖和時間軸圖表。

支持: Claude Codex Code(CC)
⚠️ 68 差
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“delon-chart”。 Show me how to create a bar chart

预期结果:

  • 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]" />

正在使用“delon-chart”。 How do I create a pie chart with donut option

预期结果:

  • Import G2PieComponent from @delon/chart/pie
  • Set [inner] prop to value between 0 and 1
  • Use [hasLegend] prop to display legend
  • Set [total] prop for center total display
  • Example: <g2-pie [data]="data()" [inner]="0.6" [hasLegend]="true" [total]="totalTasks()" />

质量评分

38
架构
100
可维护性
85
内容
21
社区
100
安全
83
规范符合性

你能构建什么

建立儀表板視覺化

為商業智慧建立包含多種圖表類型的資料儀表板

在管理介面中新增圖表

使用元件模式將企業級圖表整合至管理儀表板

視覺化任務進度

使用互動式圖表顯示任務狀態分佈和成長指標

试试这些提示

基本長條圖 
Show me how to create a bar chart with @delon/chart using Angular signals
帶圖例的圓餅圖 
How do I create a pie chart with legend and donut option using @delon/chart
包含多個圖表的儀表板 
Create a dashboard example with chart-card, bar chart, and pie chart components
效能優化 
What are the best practices for optimizing chart performance and handling large datasets

最佳实践

  • 使用 computed signals 處理響應式圖表資料,而非直接變更
  • 在樣板外使用 computed() 轉換資料以獲得更好的效能
  • 使用 @if 區塊處理載入和空白狀態,提供更好的使用者體驗

避免

  • 直接變更圖表資料而不使用 signals - 應使用 .update() 方法
  • 在樣板綁定中放置複雜的篩選邏輯 - 應使用 computed signals
  • 在每次變更偵測週期重新獲取資料 - 應使用 computed signals 進行記憶化

常见问题

支援哪些 Angular 版本?
@delon/chart 支援 Angular 17+ 版本,具備獨立元件和響應式資料綁定的 signals。
有哪些圖表類型可用?
函式庫包含長條圖、迷你長條圖、圓餅圖、雷達圖、時間軸、圖表卡和趨勢元件。
如何安裝此套件?
執行 npm install @delon/chart@20.1.0 並在獨立 Angular 元件中直接匯入元件。
資料會傳送到外部伺服器嗎?
否。這是客戶端圖表函式庫。資料保留在您的 Angular 應用程式中。
為什麼我的圖表沒有更新?
確保您使用 signals 處理資料。直接變更陣列不會觸發變更偵測。
與 ng-zorro 圖表相比如何?
@delon/chart 建立在 @ant-design/charts (G2Plot) 之上,為 ng-alain 專案提供 Angular 專屬的包裝器。

开发者详情

作者

7Spade

许可证

MIT

仓库

https://github.com/7Spade/ng-dragon/tree/main/.github/skills/delon-chart

引用

main

文件结构

📄 SKILL.md