joint

JointJS - JavaScript 圖表庫，為卓越的 UI 提供支持

JointJS 是一個經過測試和驗證的JavaScript / Typescript圖表庫，可幫助任何規模的開發人員和公司更快、更自信地建立視覺化和無程式碼/低程式碼應用程式。它是一種靈活的工具，可以創建各種 UI（互動式圖表應用程式、繪圖工具、資料視覺化、監控系統的 UI 等等）。它可以成為您下一個應用程式的基礎層，並幫助您在幾天而不是幾個月或幾年內將您的想法推向市場。

更多資訊、範例和文件可以在 jointjs.com 上找到。

？開始使用教程。

若要提出問題、分享回饋或與其他社群成員進行討論，請造訪我們的 GitHub 討論。

CodePen 上提供了更多範例。

查看我們的心智圖文件。

特徵

• 基本圖表元素（矩形、圓形、橢圓形、文字、圖像、路徑）
• 眾所周知的圖表的即用型圖表元素（ERD、組織結構圖、FSA、UML、PN、DEVS，...）
• 基於 SVG 或以程式設計方式呈現的自訂圖表元素
• 將圖表元素與連結或連結與連結連接起來
• 可自訂的連結、箭頭和標籤
• 可設定的連結形狀（錨點、連接點、頂點、路由器、連接器）
• 自訂元素屬性和數據
• 從 JSON 格式匯入/匯出
• 可自訂的元素連接埠（外觀和位置，分佈在形狀周圍或手動定位）
• 豐富的圖形 API（遍歷、dfs、bfs、尋找鄰居、前驅、點上的元素…）
• 粒度交互
• 層次圖（容器、嵌入元素、子父關係）
• 元素和連結工具（按鈕、狀態圖示、更改連結形狀的工具......）
• 螢光筆（為您的元素提供視覺強調）
• 自動佈局（自動排列元素和連結）
• 高度事件驅動（對圖中發生的任何事件做出反應）
• 放大/縮小
• 觸摸支援
• MVC架構
• 基於SVG
• ……還有更多

支援的瀏覽器

• 最新的 Google Chrome（包括行動版）
• 最新火狐瀏覽器
• 最新的 Safari（包括行動裝置）
• 最新的微軟邊緣
• 最新歌劇

開發環境

如果您想在本機使用JointJS ，請使用以下指南開始。

依賴關係

確保您的系統上安裝了以下相依性：

• Node.js
• grunt-cli
• git
• 紗

確保您使用的 Yarn 版本 >= 2.0.0，以便您可以存取 Yarn 工作區範圍功能。如果您使用 Volta，它會自動從package.json讀取此限制。

設定

克隆這個 git 儲存庫：

git clone https://github.com/clientIO/joint.git

導航到joint目錄：

 cd joint

安裝所有相依性：

yarn install

從原始碼產生分發文件：

yarn run dist

現在您可以瀏覽我們的範例應用程序，它結合了多個 JointJS 套件的功能：

 cd examples

請參閱每個應用程式的README.md檔案以取得其他說明。

您也可以瀏覽我們的 JointJS Core 套件的示範應用程式：

 cd packages/joint-core/demo

大多數演示只需在瀏覽器中開啟index.html檔案即可運行。有些示範有附加說明，您可以在各自的README.md檔案中找到這些說明。

測試

運行所有測試：

yarn run test

僅運行伺服器端測試：

yarn run test-server

僅執行客戶端測試：

yarn run test-client

僅執行 TypeScript 測試：

yarn run test-ts

皮棉

要檢查src和types目錄中的 linting 錯誤：

yarn run lint

若要自動修復錯誤，請為src和types目錄執行 eslint：

yarn run lint-fix

代碼覆蓋率報告

若要以 HTML 格式輸出程式碼覆蓋率報告：

yarn run test-coverage

若要以 lcov 格式輸出程式碼覆蓋率報告：

yarn run test-coverage-lcov

所有單元測試的輸出將會保存在packages/joint-core/coverage目錄中。

貢獻者

執照

JointJS庫根據 Mozilla 公共授權 2.0 授權。

版權所有 © 2013-2024 用戶端IO