様々なグラフを用いて情報を可視化することが増えてきている昨今。
レーダーチャートに手を出してみたら案外さっくりできたので書いておきます。
Google Charts のドキュメントをチェック
このドキュメントの中にChartについて記載されている箇所があるので、そこを確認していきます。
上に張り付けた画像の左下にある「Rich Gallery」をクリックして画面遷移します。
画面遷移したら左メニューの中に「VegaChart」なるものがあるので、こちらをクリックします。
レーダーチャートに辿り着きました！
実際に触れてみる
例示されている図の下に「Code it yourself on JSFiddle」というリンクがあります。
これをクリックすると、サンプルのソースを自分で弄れるようになります！便利！
どこを弄ればどこが変化するのか、お手軽にTryできるわけです。
私も弄ってみました↓
どこを弄ればどこが変わるのか、自分の変更点を以下に挙げてみます。
グラフのデータを変更してみる
サンプルで表示されている数値を変更してみました。
lasagnaという変数が配列形式でデータを持っていますね。
この配列の
1番目が項目名
2番目が各項目値
3番目がタイトル名
という形式になっています。
項目値のフォーマットを変更してみる
前の章で既に変更済みのものを見せてしまいましたが（ ＾ω＾）・・・はい
フォーマットを設定してる個所はここです！
“.1%” を “1” に変えてます。”.” を入れることで、小数点を含む表示形式になってて
“%” を入れることで、パーセント表示になってますね。
最大値を変更する
サンプルだと最大値が50%になっています。これを変更しましょう。
変更点はこちら↓
domain 部分に指定されている配列を変更します。1項目目が最小値（０より小さい値の時だけチャートが変形します）、2項目目が最大値といった具合。なので、レーダーチャートの場合中心が０となるのが一般だと思うので、2項目目を変更すればOK。
カスタマイズして遊ぼう
上記で示した要素を弄るだけである程度、自分好みに変更が効くと思います。ガンガン弄ってみて
「ここを変えたらどうなる？」と宝探しのように楽しむのも良いですね。
チャートの線の色を変えたり、塗りつぶしに変更してみたりとカスタマイズの幅はかなりありそうです。
面白そうなカスタムがあればまた記事にしたいと思います。
