Web绘图
Download as PPT, PDF0 likes796 views
本文件讨论了web图表需求及其解决方案，主要包括流程图和点-线图的设计需求与相应的实现方法。提到的关键工具包括rgraph和raphaeljs，描述了其绘图功能和布局算法，指出现有算法在处理大量子节点时的局限性。最终，文件列举了项目应用实例，如数据配送状态图和依赖图。
Web绘图
- 1. Web 绘图 阳衡锋
- 2. 议程 •Noah 中的图表需求 •解决方案 •Q&A
- 3. 需求一 ：流程图 •点 + 箭头 •放大 / 缩小 / 画布移动 •点可移动 , 箭头随之移 动 •状态 + 操作
- 4. 需求二 ：点 - 线图 •绘图布局算法 •增加点 + 线 •Hover 时高亮关联点 •点位置可拖动
- 5. 解决办法 ： rgraph •简易 OO 封装绘图常见需求 •项目地址： •演示： http://hafeyang.github.com/rgragh/ •Github 首页： https://github.com/hafeyang/rgragh
- 6. rgraph 功能 •绘图常见功能：画布，放大 / 缩小 / 画布移动 •提供点 + 线布局算法 •Hover 时高亮关联点 •点位置可拖动 •增加节点 / 关联线功能
- 7. 浏览器绘图基本 •IE VML ，最开始是 office 文件导出 web 格 式，渐渐发展成 IE 绘图 API •!IE SVG 跨平台绘图标准 •HTML5: canvas 绘图新秀
- 8. 使用 Raphaeljs •屏蔽浏览器绘图差异，主流浏览器兼容 •链式调用，使用简单，扩展性比较好。 •文档比较详尽。 •官网： http://raphaeljs.com/
- 9. 点 - 线图布局算法 ： •第一步 ：找到”顶层”节点，没有子节点的点 ，水平分布 •水平间距为经验值： 2.5 倍节点宽度
- 10. 点 - 线图布局算法 ： •第二步 ：子节点布局位置，理想排布：
- 11. 点 - 线图布局算法 ： •实际理想排布：障碍物 •最多允许 24 子节点，超出该数量随机位置
- 12. 抖动 ，防止垂直方面连线重叠
- 13. 位置是否可用 ，见缝插针
- 14. 缺陷 ： •菜鸟级算法：只能解决子节点较少的绘图 •画出来的图不算美观。
- 15. 项目应用 ： 数据配送状 态图 建库流程图 ( 布局保存功 能)
- 16. 项目应用 ： CT 依赖图 机器下线 流程图
- 17. 谢谢 ！