焦點(diǎn)新聞圖代碼,焦點(diǎn)資訊是哪個軟件的

2024-05-15 22:20:56

Hello~各位ITer！

這里是每周陪你技術(shù)內(nèi)卷的小谷！

本期內(nèi)容要介紹的是GO.js的高級使用——動態(tài)顯示效果。

官網(wǎng)地址：https://gojs.net/latest/

官網(wǎng)包含了200多個例子，api及介紹，學(xué)習(xí)入門等。

焦點(diǎn)新聞圖代碼,焦點(diǎn)資訊是哪個軟件的

Go.js屬于功能豐富的JS庫，在Web瀏覽器和平臺上可實現(xiàn)自定義交互圖和可視化效果，Go.js用自定義模板和布局組件簡化了節(jié)點(diǎn)、鏈接和分組等復(fù)雜的js圖表。

它給用戶交互提供了許多先進(jìn)的功能：

例如：

拖拽、復(fù)制、粘貼、文本編輯、工具提示、上下文菜單、自動布局、模板、數(shù)據(jù)綁定和模型、事務(wù)狀態(tài)和撤銷管理、調(diào)色板、概述、事件處理程序、命令和自定義操作的擴(kuò)展工具系統(tǒng)等等。

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

用功能強(qiáng)大的Go.js可以構(gòu)建自定義建模環(huán)境和特定的可視化語言，使用共享代碼和模板提供一個系統(tǒng)編輯器和只讀狀態(tài)監(jiān)控，在不同的圖表中顯示相同數(shù)據(jù)的可視化替代，實現(xiàn)子圖或其它圖表的詳細(xì)視圖擴(kuò)展。

Go.js是一個能夠讓我們很容易的實現(xiàn)基于html5瀏覽器繪制具有交互性的圖形圖表的JavaScript框架。它采用了面向?qū)ο蟮木幊棠Ｊ剑詧D形對象表示繪圖模板，以用普通js對象存儲數(shù)據(jù)作為數(shù)據(jù)模型，然后賦值給圖形對象的屬性作為數(shù)據(jù)綁定的模式。

Go.js同樣提供了大量工具類來代表我們的交互行為。我們需要做的就是創(chuàng)建圖形對象、構(gòu)建數(shù)據(jù)模型、設(shè)置屬性、綁定數(shù)據(jù)模型、使用工具類添加行為即可創(chuàng)建出具有豐富交互性能的各種圖表。

——GO.js概念來源

https://blog.csdn.net/zy0412326/article/details/128890317

1.回顧

下文將以Vue2項目為例，進(jìn)行動態(tài)顯示效果的快速入門學(xué)習(xí)。

我們以實現(xiàn)圖中效果為例——靜態(tài)展示鏈路日志：

（1） js或者csdn引入

<script src=”/static/go.js”></script>

（2）指定容器

<div :id=”id” class=”myDiagram” style=”width:100%;height:100%”/>

const go = window.go

const $ = go.GraphObject.make

這里go是所有GoJS類型所在的“命名空間” 。所有使用GoJS類的代碼，例如 Diagram 或 Node 或 Panel 或 Shape 或 TextBlock 都將以“ go.”為前綴。

（3）引入icon

（4）創(chuàng)建圖表

this.myDiagram = $(go.Diagram, self.id, {})

（5）設(shè)置節(jié)點(diǎn),自定義tooltip

const tooltiptemplate =

this.myDiagram.nodeTemplate=$(go.Node,'Horizontal',{toolTip:tooltiptemplate, background: '#fff' })

（6）設(shè)置連接線,linklabel等

this.myDiagram.linkTemplate =

（7）鼠標(biāo)移入移出線條樣式

（8）設(shè)置數(shù)據(jù)

this.myDiagram.model = new go.TreeModel(data)

（9）渲染

this.myDiagram.layoutDiagram(true)

動態(tài)展示節(jié)點(diǎn)信息，查找節(jié)點(diǎn)進(jìn)行高亮，根據(jù)節(jié)點(diǎn)的廣度深度進(jìn)行橫縱展示，示意如下：

1.動態(tài)顯示節(jié)點(diǎn)

每個要動態(tài)顯示的元素綁定一個visible屬性：

2.高亮效果

A異常高亮效果

給滿足條件的node節(jié)點(diǎn)添加透明度即可：

B高亮當(dāng)前應(yīng)用及分支

先獲取當(dāng)前選中節(jié)點(diǎn)的所有父節(jié)點(diǎn)，給這些節(jié)點(diǎn)設(shè)置透明度為1，其他的設(shè)置為0.5：

3.根據(jù)節(jié)點(diǎn)的廣度深度進(jìn)行橫縱展示

Java 集合接口 java.util.Collection 中包含一個稱為 iterator() 的方法。通過調(diào)用 iterator()，可以從給定的 Collection 中獲取迭代器。Java 集合框架中實現(xiàn)了 Collection 接口的數(shù)據(jù)結(jié)構(gòu)，比如列表、集合(Set)、隊列、雙端隊列等等，它們都實現(xiàn)了iterator() 方法。

橫縱展示只需要設(shè)置angle，0度或者90度即可：

以上就是Go.js的高級使用之動態(tài)顯示效果，更多內(nèi)容歡迎關(guān)注之后的文章。

福利：關(guān)注恭粽號[IT硅谷]，回復(fù)【JS特效】，免費(fèi)下載116個JS特效動畫效果！包括：

可自定義js彈出層動畫特效

css3鼠標(biāo)懸停按鈕線條動畫效果代碼

jquery鼠標(biāo)懸停橫向時間軸代碼

Canvas跳動彩球時間動畫特效

jquery寬屏焦點(diǎn)圖片動畫輪播代碼

jQuery+css3制作飄動的云動畫特效

html5文字粒子動畫效果代碼

CSS3鼠標(biāo)懸停圖片文字動畫效果代碼

CSS3折頁扇子翻轉(zhuǎn)動畫效果代碼