在HTML5 / javascript中繪制實時狀態圖

Question

背景：

我有一組形成“工作流”的依賴項。 每個依賴項都是具有特定狀態的節點（例如，空閑，等待，加載，完成等）

我希望在我的網站上以圖表的形式表示這些依賴關系及其當前狀態，該節點上有一個標簽，節點的顏色表示該節點所在的狀態。依賴關系不是固定的，因此該圖必須在運行時繪制。

我已經有了將狀態更新從工作流服務器推送到網站的方法。

題：

HTML5是否有任何內置功能可以執行上述操作（繪制圖形及其狀態更改）？ 我應該使用一個外部庫嗎？

必須在Chrome中運行（不關心其他瀏覽器）

也可以將其自動布局，以便於閱讀...

Answer 1

願JointJS解決您的問題。

http://www.jointjs.com/

JointJS是一個現代HTML 5 JavaScript庫，用於可視化以及與圖和圖的交互。 它既可以用來創建靜態圖，也可以用來創建完全交互式的繪圖工具和應用程序構建器。 JointJS使創建各種可視化工具變得容易。

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

Answer 2

您可能還需要查看D3.js

它提供了一個JavaScript api與svg元素進行交互，以繪制所需的任何內容，但是它特別擅長將數據與繪制元素的各種屬性相關聯。

另外，文檔非常好，並且有無數的示例。