把书籍、视频转写和播客等长内容中的方法论提取为能力卡,再编译成可调用的单 Skill 或紧凑 Skill 包。
进群
交流
进群交流
扫码进群交流

提示词 · 提示词
绘制对称渐变堆叠面积图
简介
我希望绘制一个左右对称的渐变堆叠面积图,X轴为年份,Y轴为文献数量,不同的堆叠代表不同的迭代次数,左侧是迭代前的分布情况,右侧是迭代后的分布情况,数据如下,请在以html格式输出
免费
- 核心主题:绘制对称渐变堆叠面积图
- 用户意图:可视化文献数量随年份和迭代次数的分布变化,对比迭代前后的差异
- 内容特点:技术性可视化需求,强调对称性和渐变效果
生成的提示词
你是一位专业的数据可视化工程师,精通D3.js和HTML/CSS图表实现。你的任务是创建一个左右对称的渐变堆叠面积图,要求:
1. 图表结构:
- X轴:年份(时间序列)
- Y轴:文献数量(数值)
- 左右对称布局:左侧显示迭代前分布,右侧显示迭代后分布
2. 视觉要求:
- 使用堆叠面积图形式
- 不同迭代次数用不同颜色区分
- 采用平滑的渐变色过渡
- 确保左右两侧的视觉对称性
3. 交互功能:
- 悬停显示具体数值
- 图例可交互切换
4. 输出格式:
- 完整的HTML文件
- 包含内联CSS和JavaScript
- 响应式设计适配不同屏幕
5. 数据格式示例:
```json
{
"years": [2010, 2011, 2012, ...],
"pre_iteration": [
{"iteration": 1, "values": [...]},
{"iteration": 2, "values": [...]},
...
],
"post_iteration": [
{"iteration": 1, "values": [...]},
{"iteration": 2, "values": [...]},
...
]
}
请确保:
- 颜色方案具有足够的区分度
- 坐标轴标签清晰可读
- 图表标题和说明文字完整
- 代码结构整洁且有适当注释
使用建议
- 适用场景:学术研究数据展示、文献计量分析报告
- 优化方向:
- 可考虑添加动画过渡效果展示迭代变化过程
- 增加导出图表为图片的功能
- 对于大量数据,建议添加缩放功能
是否需要我基于特定数据示例生成更具体的实现代码?
原文与分段复制
第 1 段
### 绘制对称渐变堆叠面积图 - **核心主题**:绘制对称渐变堆叠面积图 - **用户意图**:可视化文献数量随年份和迭代次数的分布变化,对比迭代前后的差异 - **内容特点**:技术性可视化需求,强调对称性和渐变效果
第 2 段
### ?? 生成的提示词 ``` 你是一位专业的数据可视化工程师,精通D3.js和HTML/CSS图表实现。你的任务是创建一个左右对称的渐变堆叠面积图,要求:
第 3 段
1. 图表结构: - X轴:年份(时间序列) - Y轴:文献数量(数值) - 左右对称布局:左侧显示迭代前分布,右侧显示迭代后分布
第 4 段
2. 视觉要求: - 使用堆叠面积图形式 - 不同迭代次数用不同颜色区分 - 采用平滑的渐变色过渡 - 确保左右两侧的视觉对称性
第 5 段
3. 交互功能: - 悬停显示具体数值 - 图例可交互切换
第 6 段
4. 输出格式: - 完整的HTML文件 - 包含内联CSS和JavaScript - 响应式设计适配不同屏幕
第 7 段
5. 数据格式示例:
```json
{
"years": [2010, 2011, 2012, ...],
"pre_iteration": [
{"iteration": 1, "values": [...]},
{"iteration": 2, "values": [...]},
...
],
"post_iteration": [
{"iteration": 1, "values": [...]},
{"iteration": 2, "values": [...]},
...
]
}
```第 8 段
请确保: - 颜色方案具有足够的区分度 - 坐标轴标签清晰可读 - 图表标题和说明文字完整 - 代码结构整洁且有适当注释 ```
第 9 段
### ?? 使用建议 - **适用场景**:学术研究数据展示、文献计量分析报告 - **优化方向**: 1. 可考虑添加动画过渡效果展示迭代变化过程 2. 增加导出图表为图片的功能 3. 对于大量数据,建议添加缩放功能
第 10 段
是否需要我基于特定数据示例生成更具体的实现代码?
相关资源
通义深度信息检索 Agent 模型、ReAct 推理和评测源码;非标准 Skill 安装包。
通过 Agent 插件连接 ChatCut 项目,导入素材、编辑时间线、制作动效、生成素材、转写字幕并导出视频。