[發明專利]一種基于gojs技術的交互式圖表的實現方法

在審

• 申請號: 201711004080.8
• 申請日: 2017-10-24
• 公開（公告）號: CN107608676A
• 公開（公告）日: 2018-01-19
• 發明（設計）人: 岳永勝;楊林;李波
• 申請（專利權）人: 四川長虹電器股份有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38
• 代理公司: 成都虹橋專利事務所(普通合伙)51124
• 代理人: 吳中偉

技術領域

本發明涉及數據處理領域，具體涉及一種基于gojs技術的交互式圖表的實現方法。

背景技術

圖表泛指在屏幕中顯示的，可直觀展示統計信息屬性(時間性、數量性等)，對知識挖掘和信息直觀生動感受起關鍵作用的圖形結構，是一種很好的將對象屬性數據直觀、形象地"可視化"的手段。

合理的數據圖表，會更直觀的反映數據間的關系，比用數據和文字描述更清晰、更易懂。將工作表中的數據轉換成圖表呈現，可以關注我們更好地了解數據見的比例關系及變化趨勢，對研究對象做出合理的推斷和預測。然而現有技術中的數據圖表一般都是只能進行屬性數據的展示，不能實現與用戶間的互動。

發明內容

本發明所要解決的技術問題是：提出一種基于gojs技術的交互式圖表的實現方法，方便實現用戶與數據圖表之間的交互，展現更加直觀。

本發明解決上述技術問題采用的技術方案是：

一種基于GoJs技術的交互式圖表的實現方法，包括:

利用GoJs通過自定義的模板和布局組件構建簡化節點、鏈接和分組后的JS圖表，為用戶提供交互功能，所述交互功能包括：拖拽、復制、粘貼、文本編輯、工具提示、上下文菜單、自動布局、模板、數據綁定和模型、事務狀態和撤銷管理、調色板、概述、事件處理程序、命令和自定義操作的擴展工具系統。

作為進一步優化，所述GoJs以圖形對象表示繪圖單元，JSON對象作為數據模型，圖形對象通過屬性綁定的方式從數據模型獲取相關的屬性值。

作為進一步優化，所述利用GoJs通過自定義的模板和布局組件構建簡化節點、鏈接和分組后的JS圖表具體包括：

創建圖形對象，構建數據模型，設置圖形對象屬性，綁定數據模型，添加交互行為。

作為進一步優化，在創建圖形對象時，通過$調用gojs自身的屬性和方法，完成節點和連線的繪制。

作為進一步優化，所述綁定數據模型是指將圖形對象的屬性與對應數據模型的屬性進行綁定。

作為進一步優化，所述添加交互行為是指為節點添加鼠標事件，實現鼠標事件與節點屬性的綁定。

本發明的有益效果是：便于用戶在網絡瀏覽器和平臺上實現自定義交互式圖表，通過可自定義的模板和布局構建，用戶可以為圖表節點添加任何需要的屬性，從而增加了圖表的交互性。

具體實施方式

本發明旨在提出一種基于gojs技術的交互式圖表的實現方法，方便實現用戶與數據圖表之間的交互，展現更加直觀。

本發明利用GoJs通過自定義的模板和布局組件構建簡化節點、鏈接和分組后的JS圖表，為用戶提供交互功能，所述交互功能包括：拖拽、復制、粘貼、文本編輯、工具提示、上下文菜單、自動布局、模板、數據綁定和模型、事務狀態和撤銷管理、調色板、概述、事件處理程序、命令和自定義操作的擴展工具系統。

GoJS屬于功能豐富的JS庫，在Web瀏覽器和平臺上可實現自定義交互圖和復雜的可視化效果，GoJS用自定義模板和布局組件簡化了節點、鏈接和分組等復雜的JS圖表。

無需切換服務器和插件，GoJS就能實現用戶互動并在瀏覽器中完全運行，呈現HTML5 Canvas元素或SVG，也不用服務器端請求。GoJS不依賴于任何JS庫或框架，可與任何HTML或JS框架配合工作，甚至可以不用框架。

用功能強大的GoJS可以構建自定義建模環境和特定的可視化語言，使用共享代碼和模板提供一個系統編輯器和只讀狀態監控，在不同的圖表中顯示相同數據的可視化替代，實現子圖或其它圖表的詳細視圖擴展。

在具體實現上，利用GoJs通過自定義的模板和布局組件構建簡化節點、鏈接和分組后的JS圖表具體包括：創建圖形對象，構建數據模型，設置圖形對象屬性，綁定數據模型，添加交互行為。

其中，創建圖形對象時，可以把$理解成一個畫筆，而myDiagram理解成畫布，畫圖時，通過$調用gojs自身的屬性和方法，完成節點和連線的繪制，attrs為圖形對象屬性。而為了把鏈接加入圖中，基礎的模型是不夠用的。因此，需要加入GoJS中的兩個其它的模型，他們是GraphLinksModel和TreeModel。接著，我們需要設置圖形對象的屬性，然后將圖形對象的屬性與對應數據模型的屬性進行綁定，最后為節點添加鼠標事件，實現鼠標事件與節點屬性的綁定。