G6是一款由阿里資深前端開發者集體開源的圖表庫,它致力于為開發者提供高效、易用、可配置、可擴展的圖表解決方案。其中,本地JSON是一種常見的數據源格式,可用于構建各類數據可視化圖表。
{ "nodes": [ { "id": "node1", "x": 100, "y": 100, "label": "節點1" }, { "id": "node2", "x": 200, "y": 100, "label": "節點2" }, { "id": "node3", "x": 150, "y": 150, "label": "節點3" } ], "edges": [ { "source": "node1", "target": "node2" }, { "source": "node1", "target": "node3" }, { "source": "node2", "target": "node3" } ] }
在上述JSON中,nodes屬性表示節點,每個節點有一個唯一的id、x和y坐標、以及一個label屬性表示節點名稱。edges屬性表示邊,每個邊有一個source和target屬性表示其連接的兩個節點。
在G6中使用本地JSON可通過以下代碼實現:
const graph = new G6.Graph({ container: 'container', width: 800, height: 500 }); $.getJSON('/data.json', function(data) { graph.data(data); graph.render(); });
通過jQuery的getJSON方法獲取JSON數據,將數據傳入graph.data方法中,再調用graph.render方法即可將數據渲染成相應的圖表。