6角形のステータス図を作りたい

Question

■実現したいこと
六角形のステータス図を作りたいです。
イメージ的には、６種類のステータス値に応じて六角形内部の色が塗られた部分の大きさを変化させたいです。
（格闘技で例えると、「打撃・経験・スタミナ・...」に応じて生成されるあの図形です。）

■実装イメージ
（１）フォームで6種類のステータスを入力し、DBに登録する。
（２）ステータス図表示画面遷移時に、DBからステータス値(0〜100)を取り出す
→（1:020 2:2140 3:4160 4:6180 5:80~100のように能力値を5段階のレベルに変換)
（３）変換した値を元に、六角形のステータス図を生成する。

■質問事項
①（３）に該当するようなことを実装するにはどうしたら良いでしょうか？

②探した限りでは、既存のライブラリや参考サイトなどを見つけることができなかったのですが、もしもそのようなものがあるなら紹介いただきたいです。（六角形でなくても、近いことをしているものがあれば参考にしたいと考えています。）

かなり難易度が高めなのは承知の上ですが、どうしても実装したいです。
よろしくお願いします。

Comments

[kei344]

「【CSSお絵かき】」とはなんでしょう。

[DaiAoki]

>kei344さん 調べている中でCSSでリラックマを描画しているサイトがあったため、今回自分がやろうとしていることももしかしたらCSSで実装できるのかもしれないと思い、【CSSお絵かき】としました。見当違いかつ不適切な表現でしたので、タイトルを修正しました。

Answer 1

CSSでも不可能ではないかもしれませんが、JavaScript でライブラリを使用するほうが早いと思います。

【レーダーチャート JavaScript - Google 検索】
https://www.google.co.jp/search?num=100&safe=off&q=%E3%83%AC%E3%83%BC%E3%83%80%E3%83%BC%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88+JavaScript

【【jQuery】Chart.jsを使って簡単にカッコイイレーダーチャートを実装するの巻】
http://www.takuro.info/archives/5045

【Chart.js レーダーチャートサンプル - bl.ocks.org】
https://bl.ocks.org/tbpgr/3385c257a603d39710bb

Comments

[DaiAoki]

ご回答ありがとうございます。
便利なライブラリですね・・・！お恥ずかしいながら、"レーダーチャート"という言葉が出てきませんでした。
ご紹介していただいたサイト、全て目を通してみます。

[DaiAoki]

無事に実装することができました。
こんなに早くできると思っていなかったので、とても助かりました。ありがとうございました。

Answer 2

HTML5 Canvas で Polygon(多角形)描画

radius が半径です。この数値をパラメータによって変えてください。

Comments

[DaiAoki]

ご回答ありがとうございます。
HTML5のCanvasでもできそうですね・・・なるほど。
こちらは、ライブラリを使うより難易度が高そうですが、この機会にCanvasもかじってみようと思います。

[DaiAoki]

無事に実装することができました。
新たな知見を広めることができました。ありがとうございました。