レーダーチャートを作れる非依存のシンプルなスクリプト・「maturity-radar」

maturity-radar

maturity-radarはレーダーチャートを作成できるスクリプトです。非依存型で単体で動作します。

RPG等でもおなじみのレーダーチャートを手軽に作成する事が出来ます。諸事情により必要に迫られて方法を考えていたところ、こちらが見つかったので備忘録。2年前から更新はされていないようですが・・

使用例

空要素を作ります

<div id="foo"></div>

スクリプトを読み込みます

<script src="https://rawcdn.githack.com/kolektiv/maturity-radar/master/dist/radar.js"></script>

あとはセッティングするだけ

<script>
      radar.show('#foo', {
        size: 300,
        curve: false,
        metrics: [
          {
            name: "HP",
            range: [
              "50",
              "100",
              "150",
              "200"
            ],
            target: 2,
            actual: 1
          },
　　　　　　・
　　　　　　・
　　　　　　・
          {
            name: "運",
            range: [
              "1",
              "2",
              "3",
              "4"
            ],
            target: 2,
            actual: 1
          }
        ]
      });
    </script>

簡単ですね。もう少し触って使いこなせるようにします。ライセンスはMIT。

maturity-radar