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

円グラフを生成できるAPI

くるみ

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

ということで今回は

  • できるだけ簡単に円グラフを作成したい
  • 円グラフを作れる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「HeartRails Graph」の使い方でした。

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

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

新卒1年目のひよっこWEBエンジニア。業務ではPHPを触り、プライベートではReactで宅配冷凍弁当の比較・口コミサイトの開発・運営をしています。お問い合わせはこちらよりどうぞ。