どうもおはようポテトです。
円グラフを生成してくれるAPIないかなー
円グラフを生成してくれるAPIは沢山ありますが、ちょっと小難しい作業が必要だったり手順が多かったりしますよね。
そんな時に便利なのが「HeartRails Graph」というWebAPI。
ということで今回は
「できるだけ簡単に円グラフを作成したい」
「APIの知識とかあまりないけど大丈夫かな」
という方に向けて、円グラフを簡単に作れる「HeartRails Graph」というWebAPIの使い方をまとめました⸝⸝- ̫ -⸝⸝
ブログ主
お品書き
円グラフを作るまでの手順
手順はいたってシンプルで簡単です。
くるみ
API「HeartRails Graph」の使い方
基本的な使い方
http://graph.heartrails.com/api/?"ここをいじる"これが基本的な型となります。
円グラフを生成するには、「ここをいじる」という箇所にパラメータとして値などを設定してあげればOK。
web上で表示したい場合はimgタグのsrc属性に入れてあげればヨシですね。
各パラメータを設定する
設定する値は基本的に以下の二つ。
| text(n) | n番目の項目のテキスト |
| value(n) | n番目の項目の割合 |
text0,text1,text2…といった風に項目の数だけテキストと割合それぞれを指定してあげてください。
valueの値は相対的な割合を指定すればいいので「2と1」でも「100と50」でも同じです。
それぞれのパラメーターは「&」で繋げてあげてくださいね。
ブログ主
http://graph.heartrails.com/api/?text0=Hello&text1=Hey&value0=2&value1=1このようなURLを指定してあげると…
このようなグラフが生成されます。
便利ですね⸝⸝- ̫ -⸝⸝
グラフの色を変えたい場合
http://graph.heartrails.com/api/?text0=Hello&text1=Hey&value0=2&value1=1&color0=ff6565&color1=ffff65colorというパラメータにカラーコードを書けば色も指定することができます。
カラーコードの前に「#」は付けないので注意してください。
日本語を表示させる場合
グラフの項目に日本を入れたい場合も多いと思いますが、その際はエンコードが必要になります
エンコードする
TECH-UNLIMITEDというサイトでその文字列をエンコードしてあげます
くるみ
上のように入れたい文字を入力して「変換する」をクリックすると、エンコードされた文字が右に出力されるのでそれをコピーしておきます。
パラメータに設定
そのコピーした文字列をtextの値に指定してあげてください。
http://graph.heartrails.com/api/?text0=%E5%B7%A8%E4%B9%B3%E6%B4%BE&text1=%E8%B2%A7%E4%B9%B3%E6%B4%BE&value0=2&value1=1
すると…
無事、日本語が表示されていますね！
その他の設定
フォントやグラフのタイトル、その他のグラフの細かい装飾なども設定することができます。
その辺りは公式サイトに詳しく記述されているのでそちらをご参照ください。
参考 How to useHeartRails Graph | キュートな円グラフ簡単作成サービス生成されない場合
このようにグラフではなく「Invalid Request!」と表示された場合は、パラメータの指定が間違っている可能性が高いので見直してみてください。
文字列に「””」を付けていたり各パラメータの数字を忘れていたり…などなど。
実際に使ってみた
ブログ主の場合はこのAPIを使って、ソシャゲのガチャで欲しいキャラの確率と回す回数を入力すると”当たりやすさ”を可視化してくれるチャットボット(的なもの)を作ったりもしました。
少しいじって「ガチャで欲しいキャラの確率と回す回数を返信すると”引きやすさ”を可視化してくれる」チャットボットを作ったんだけど、需要が無いことに気がつきました。 pic.twitter.com/BtQ0ZAIX3T
— おはようポテト @サイト管理人 (@ohayoupoteto22) July 24, 2020
色んなものが作れそう⸝⸝- ̫ -⸝⸝
最後に
以上となります。
参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
