...

円グラフを誰でも簡単に作れるAPI「HeartRails Graph」の使い方

円グラフを生成できるAPI

どうもおはようポテトです。

 

円グラフを生成してくれるAPIないかなー

今回はこのように考えてる方向けの記事となります。

 

円グラフを生成してくれるAPIは沢山ありますが、ちょっと小難しい作業が必要だったり手順が多かったりしますよね。

そんな時に便利なのが「HeartRails Graph」というWebAPI。

ということで今回は

「できるだけ簡単に円グラフを作成したい」

「APIの知識とかあまりないけど大丈夫かな」

という方に向けて、円グラフを簡単に作れる「HeartRails Graph」というWebAPIの使い方をまとめました⸝⸝- ̫ -⸝⸝

ブログ主

早速いってみよう!

円グラフを作るまでの手順

手順はいたってシンプルで簡単です。

手順
step1
パラメータを設定する
step2
エンコードする
(※日本語を使いたい場合)
具体的な使い方を見ていこう!

ソロモン

 

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=ffff65

colorというパラメータにカラーコードを書けば色も指定することができます。


カラーコードの前に「#」は付けないので注意してください。

日本語を表示させる場合

グラフの項目に日本を入れたい場合も多いと思いますが、その際はエンコードが必要になります

エンコードする

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を使って、ソシャゲのガチャで欲しいキャラの確率と回す回数を入力すると”当たりやすさ”を可視化してくれるチャットボット(的なもの)を作ったりもしました。

 

色んなものが作れそう⸝⸝- ̫ -⸝⸝

最後に

以上となります。

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA