今日の人気記事

  1. テーブルにページャーを「PaginateMyTable」
  2. テーブルやリストから文字列を検索「QuickSearch」
  3. Bootstrapを使ったカレンダーを実装「Zabuto Calendar」
  4. レトロなフリップ時計やカウントダウンタイマーを実装「flipCountDown」
  5. ブラウザーをフルスクリーン(全画面)表示に「Fullscreen」

多角形のグラフをWeb上に実装「Polygonal Graphic」

スポンサーリンク

多角形のグラフをWeb上に実装するプラグイン「Polygonal Graphic」を紹介します。

jQueryプラグイン「Polygonal Graphic」

このプラグインを使えば、複数項目の多角形グラフをWeb上に実装することができます。

数値と項目名を入力するだけで簡単に実装、また複数のグラフを重ねて表示することもできるので、おすすめ!

スポンサーリンク

それでは、デモページの多角形グラフをご覧ください。

「Polygonal Graphic」のデモ

ソース( 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>
スポンサーリンク

関連記事(一部広告含む)