読者です 読者をやめる 読者になる 読者になる

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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

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

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

使い方

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

<link href="~/Content/vis.min.css" rel="stylesheet" />
<script src="~/Scripts/vis.min.js"></script>

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

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


@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div id="networkmap" style="width: 100%; height: 500px;"></div>

<script type="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

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