Quantcast
Channel: かずきのBlog@hatena
Viewing all articles
Browse latest Browse all 1387

かっこいいネットワーク図?を描くためのvis.js

$
0
0

グラフとかっていうんですかね? vis.jsというライブラリを使うと簡単に描けるっぽいです。

vis.js - A dynamic, browser based visualization library.

使い方

ASP.NETアプリケーションにサイトからDL出来るvis.min.jsとvis.min.cssを追加します。

<linkhref="~/Content/vis.min.css"rel="stylesheet" /><scriptsrc="~/Scripts/vis.min.js"></script>

こんな感じで_Layout.cshtmlのheadの中に追加しておきます。

あとは、vis.DataSetというのでデータとデータの関連を用意して、vis.Networkを作るだけです。


@{
    ViewBag.Title = "Index";
}

<h2>Index</h2><divid="networkmap"style="width: 100%; height: 500px;"></div><scripttype="text/javascript">var nodes = new vis.DataSet([{ id: 1, label: "Name 1"},{ id: 2, label: "Name 2"},{ id: 3, label: "Name 3"},{ id: 4, label: "Name 4"},{ id: 5, label: "Name 5"},{ id: 6, label: "Name 6"}]);var edges = new vis.DataSet([{ from: 1, to: 2},{ from: 1, to: 3},{ from: 1, to: 4},{ from: 4, to: 2},{ from: 5, to: 3},{ from: 6, to: 4}]);var data = { nodes: nodes, edges: edges };var options = {};var network = new vis.Network(document.getElementById("networkmap"), data, options);</script>

これだけで、以下のような図が描かれます。

f:id:okazuki:20151113214458p:plain

こういうネットワーク図以外にもいろいろな図に対応してるみたいなのでちょと見てみるといいかもしれません。


Viewing all articles
Browse latest Browse all 1387

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>