Back to Details

plotly-dashboard-skill

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Plotly Dashboard Skill

Plotly Dashboard Skill

Create interactive dashboards with a single source of truth for UI and figure styling.

打造UI和图表样式单一可信源的交互式仪表盘。

Instructions

操作步骤

Capture audience, questions, and data constraints.
Pick a layout pattern and component library.
Define a theme and Plotly figure template.
Build the layout skeleton before callbacks.
Implement callbacks with clear inputs/outputs.
Optimize slow callbacks with caching or pre-aggregation.

明确目标受众、业务问题和数据约束条件。
选择布局模式和组件库。
定义主题和Plotly图表模板。
先构建布局框架，再实现回调函数。
实现具备清晰输入/输出的回调函数。
通过缓存或预聚合优化性能缓慢的回调函数。

Quick Reference

快速参考

Task	Action
UI style guide	See `STYLE_GUIDE.md`
Figure template	See `FIGURE_STYLE.md`
Palettes	See `PALETTES.md`
App architecture	See `DASH_ARCHITECTURE.md`
Performance	See `PERFORMANCE.md`

任务	操作
UI样式指南	查看 `STYLE_GUIDE.md`
图表模板	查看 `FIGURE_STYLE.md`
调色板	查看 `PALETTES.md`
应用架构	查看 `DASH_ARCHITECTURE.md`
性能优化	查看 `PERFORMANCE.md`

Input Requirements

输入要求

Audience and key decisions
Data sources and update cadence
Required filters and views
Deployment constraints

目标受众与关键决策需求
数据源与更新频率
所需筛选器和视图
部署约束条件

Output

输出内容

Dash app scaffold (layout + callbacks)
Consistent theming and figure templates
README with usage notes

Dash应用脚手架（布局+回调函数）
统一的主题和图表模板
包含使用说明的README文档

Quality Gates

质量验收标准

Layout communicates hierarchy and intent
Callbacks are small and focused
p95 interaction latency acceptable
Styling is consistent across charts

布局能清晰传达层级结构和设计意图
回调函数精简且职责单一
p95交互延迟符合要求
所有图表样式保持统一

Examples

示例

Example 1: Layout-first workflow

示例1：先布局的工作流程

text

Header + filters + KPI row + primary trends + breakdown table

text

Header + filters + KPI row + primary trends + breakdown table

Troubleshooting

故障排查

Issue: Slow callbacks Solution: Cache expensive steps or pre-aggregate data.

问题：回调函数运行缓慢 解决方案：缓存计算密集型步骤或预先聚合数据。