かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

かっこいいネットワーク図?を描くための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

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