在HTML5 / javascript中绘制实时状态图

Draw a real-time state graph in HTML5/javascript

本文关键字：绘制实时状态图 javascript HTML5 更新时间：2023-09-26

背景：

我有一组形成"工作流"的依赖项。每个依赖项都是一个具有特定状态的节点（例如空闲、等待、加载、完成等）

我希望在我的网站上将这些依赖项及其当前状态表示为图表，其中节点有一个标签，节点的颜色表示节点所处的状态。依赖项不是固定的，因此必须在运行时绘制关系图。

我已经有办法将状态更新从工作流服务器推送到我的网站。

问题：

HTML5是否有任何内置的东西可以做上述事情（绘制图形及其状态更改）？是否有我应该使用的外部库？

必须在Chrome中工作（不关心其他浏览器）

最好让它

自动布局，这样它就可以阅读......

愿 JointJS 解决您的问题。

http://www.jointjs.com/

JointJS是一个现代的HTML 5 JavaScript库，用于可视化和与图表和图形的交互。它可用于创建静态图表，或者更重要的是，完全交互式图表工具和应用程序构建器。JointJS使创建各种可视化工具变得容易。

这里有一些很好的例子 http://jointjs.com/demos/fsa

您可能还想查看 D3.js

它提供了一个javascript api来与svg元素进行交互，以绘制您想要的任何内容，但它特别擅长将数据与绘制元素的各种属性相关联。

另外，文档非常好，并且有大量的例子。