交互式图表dhtmlxDiagram教程:创建用于业务和编程的UML活动图 2020年10月19日 上午9:25 • 软件教程 JavaScript活动图表示库中的UML图。它们的主要目的是描述分步活动并提供指导。UML中的活动图反映了系统或人员的行为。 dhtmlxDiagram试用版 JavaScript活动图表示库中的UML图。它们的主要目的是描述分步活动并提供指导。您可以在我们的dhtmlxDiagram 30天试用版中测试此图类型。 UML中的活动图反映了系统或人员的行为。因此,它们通常被定义为行为图。这意味着它们用于显示某些情况下在考虑不同场景的情况下的行为。 此图类型在业务分析中广泛传播,用于说明特定的业务用例和其中涉及的活动。但是,甚至可以在描述任何工作流程的更大范围内应用UML活动图,它显示了事件过程中所有可能发生的情况。 如何绘制活动图 UML活动图的区别在于可以说明并行活动。例如,我们上面看过的第一个活动图描述了准备房间和笔记本电脑以满足客户需求的必要性,这由指向两个不同矩形形状的平行箭头表示。 当发生错误或其他不利事件,并且箭头指向要重复的先前活动之一时,这些图还可以包括迭代。 活动图通常使用3种形状来构建: 圆形标记活动图的起点和终点。 矩形反映了活动本身-需要做什么。 使用DHTMLX构建Javascript活动图的技巧 dhtmlxDiagram库由许多图表类型组成,例如flowhcarts,组织结构图,决策树和UML活动图。所有这些JavaScript图都是高度可定制的,可以在所有主要的Web浏览器中很好地呈现,并且可以很容易地使用任何服务器端技术进行构建。我们广泛的API为您提供了很多操作,可以完全根据您的需求定制图表。 在下面,您可以通过CSS以及形状和连接器的对象属性来检查此活动图的配置: <style> html,body,.cont{ background: #FFF; } .dhx_diagram{ background: #FFF; } .dhx_free_diagram .dhx_diagram_flow_item text{ fill:#FFF; } .dhx_free_diagram .dhx_item_shape{ fill:#478D99; stroke:none; } .decision .dhx_item_shape{ fill:#F7D768; } .start .dhx_item_shape{ fill:#FE9998; } .dhx_free_diagram .dhx_diagram_line{ stroke: #7D8495; } .dhx_free_diagram .dhx_diagram_arrow{ stroke:#7D8495; fill:#7D8495; } </style> var activity = [ { "id": "start", "x": 200, "y": 0, "type": "start", text: "Start", css: "start" }, { "id": 1, "x": 200, "y": 120, "text": "Call Client and n set-up Appointment", "type": "process" }, { "id": 2, "x": 200, "y": 240, "text": "", "type": "decision", css: "decision" }, { "id": 3, "x": 20, "y": 360, "text": "Prepare n a Conference Room", "type": "process" }, { "id": 4, "x": 380, "y": 360, "text": "Prepare a Laptop", "type": "process" }, { "id": 5, "x": 200, "y": 480, "text": "Meet with n the Client", "type": "process" }, { "id": 6, "x": 200, "y": 600, "text": "Send n Follow-up Letter", "type": "process" }, { "id": 7, "x": 200, "y": 720, "text": "", "type": "decision", css: "decision" }, { "id": 8, "x": 200, "y": 840, "text": "Create Proposal", "type": "process" }, { "id": 8.1, "x": 30, "y": 840, "text": "See the n Activity Diagram n for creating n a document", "type": "document" }, { "id": 9, "x": 200, "y": 960, "text": "Send Proposal n to Client", "type": "process" }, { "id": 10, "x": 200, "y": 1080, "type": "end", text: "End", css: "start" }, { id: 11, "x": 110, "y": 270, type: "text", text: "[appointment onside]" }, { id: 12, "x": 430, "y": 270, type: "text", text: "[appointment offside]" }, { id: 13, "x": 440, "y": 750, type: "text", text: "[no statement of problem]" }, { id: 14, "x": 150, "y": 820, type: "text", text: "[statement of problem]" }, { from: "start", to: 1, type: "line", forwardArrow: "filled" }, { from: 1, to: 2, type: "line", forwardArrow: "filled" }, { from: 2, to: 3, type: "line", forwardArrow: "filled" , toSide: "top" }, { from: 2, to: 4, type: "line", forwardArrow: "filled" , toSide: "top" }, { from: 3, to: 5, type: "line", forwardArrow: "filled" }, { from: 4, to: 5, type: "line", forwardArrow: "filled" }, { from: 5, to: 6, type: "line", forwardArrow: "filled" }, { from: 6, to: 7, type: "line", forwardArrow: "filled" }, { from: 7, to: 8, type: "line", forwardArrow: "filled" }, { from: 8, to: 8.1, type: "dash" }, { from: 8, to: 9, type: "line", forwardArrow: "filled" }, { from: 9, to: 10, type: "line", forwardArrow: "filled" }, { from: 7, to: 10, type: "line", fromSide: "right", toSide: "right", forwardArrow: "filled" } 借助我们的文档,您可以掌握有关使用CSS和对象属性设置活动图样式的所有技巧。从图表元素的颜色到其排列的任何内容都可以按照您喜欢的方式自定义。此外,您可以随时添加或删除形状及其内容来更改图表。 我们的在线导出服务还允许您下载pdf或png格式的现成图表。 结论 UML中的活动图定义将这种图类型描述为逐步活动流的说明。活动基于各种条件,并且可能演变成不同的结果。因此,活动流程图涵盖了所讨论的系统或人员的行为的所有可能发生。它使它们对于分析业务用例或描述编程中的系统行为非常有用。 我们的图库为您提供了用于构建雄辩而全面的活动图的所有必要工具。只需尝试一下我们30天的评估版。 APS帮助提升企业生产效率,真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划,提高准时交货能力,提高产能和资源利用率 想要购买dhtmlxDiagram正版授权,或了解APS系统请点击【咨询在线客服】 标签: 声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢! 0 生成海 用TheBrain 12连接思想和数据源,与首席CEO探讨知识库所必需的原则 上一篇 2020年10月19日 PDF-XChange Editor使用教程:如何如何导出注册表项? 下一篇 2020年10月19日 相关推荐 Qlik资讯|您的公司准备好支持5G吗? 2020年8月1日 Excel .NET组件Spire.XLS教程:在C#/VB.NET中替换 Excel 中的图片 2021年10月7日 部署MES系统的实际作用和意义是什么?这篇文章总结得很全面 2022年8月3日 QlikWorld Online 2020会议|披荆斩棘的大佬们来了! 2020年5月12日 重要更新!JAVA代码保护工具DashO Pro v10.3.0 资源加密不再使用beta功能 2020年1月23日 生产管理MES系统的核心价值是什么? 2022年10月25日 发表回复 请登录后评论... 登录后才能评论 提交