LIQUID DESIGN Tech Blog

Google Chart API レーダーチャート作成方法

Google Chart API を利用して、レーダーチャートを作成する方法を紹介します。
chart.png
公式サイト:https://developers.google.com/chart/

Google Chart API は、簡単にグラフ画像を描画できるAPIです。
棒グラフや円グラフなど様々なチャートを、imgタグを書くだけで描画できます。
今回は、レーダーチャートを作成する方法を紹介します。
レーダーチャートは、下記のようなコードになります。
ポイントは、chdの最初の値を最後にも書くことで、これにより線がつながります。

サンプルコード

<img decoding="async" src="http://chart.apis.google.com/chart?cht=r &amp;chxt=y,x &amp;chls=4|4 &amp;chco=00AEEF &amp;chxp=0,0,20,40,60,80,100 &amp;chd=t:77,60,50,80,85,65,77 &amp;chxl=1:|A|B|C|D|E|F &amp;chm=s,00AEEF,0,-1,12,0|s,FFFFFF,0,-1,8,0 &amp;chts=000000,20 &amp;chtt=Sample &amp;chs=300x300" alt="Sample" />

実際にAPIで作成したサンプル

Sample

ギャラリー:Chart Gallery
ライセンス:Google gives you a personal, worldwide, royalty-free.

この記事を書いた人
LIQUID DESIGN のサービスに関するデザインや技術情報を発信します。
SNSでフォローする