多角形のグラフをWeb上に実装「Polygonal Graphic」
当ページのリンクには広告が含まれています。
スポンサーリンク
多角形のグラフをWeb上に実装するプラグイン「Polygonal Graphic」を紹介します。
jQueryプラグイン「Polygonal Graphic」
このプラグインを使えば、複数項目の多角形グラフをWeb上に実装することができます。
数値と項目名を入力するだけで簡単に実装、また複数のグラフを重ねて表示することもできるので、おすすめ！
スポンサーリンク
それでは、デモページの多角形グラフをご覧ください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Polygonal Graph Widget のデモでーす。">
<title>Polygonal Graph Widget - jQuery Plugin Demo</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="polygonalGraphWidget.js"></script>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/polygonal-graphic/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>Polygonal Graph Widget のデモでーす</h1>
<canvas id="demo" width="600" height="400"></canvas>
<script>
var labels = new Array('HP', 'MP', '攻撃', '防御', '早さ', '賢さ');
var data1 = new Array(80, 93, 80, 70, 85, 90);
var data2= new Array(100, 40, 80, 60, 44, 60);
var data = new Array(data1, data2);
var myVar = $("#demo").polygonalGraphWidget({
labels: labels,
data: data
});
</script>
</body>
</html>
スポンサーリンク