どうも、まさとらん（@0310lan）です！
今回は、URLだけで多種多様なチャートやグラフを生成できる無料のWebサービスをご紹介します！
棒グラフ・折れ線グラフ・レーダーチャート・バブルチャート…など、さまざまな種類を生成できるだけでなく、細かいスタイリングやサイズ・レイアウトまでURLに追記するだけで調整可能なのが特徴です。
手っ取り早くデータの可視化をしたい人も含めて、ご興味ある方はぜひ参考にしてみてください！
【 Image-Charts 】
■「Image-Charts」の使い方
それでは、「Image-Charts」をどのように使えばいいのか詳しく見ていきましょう！
まず最初に「Image-Charts」を使うためのユーザー登録やAPIキーの設定などは一切不要です（フリープランの場合）
覚えておく必要があるのは次のURLのみです！
https://image-charts.com/chart
このURLに続けて、いくつかの「クエリパラメータ」を付与するだけで以下のように多種多様なチャートやグラフを生成できるのが大きな特徴です。
そこで、まずは簡単な「円グラフ」を作成してみましょう！
最低限必要なクエリパラメータは次の3つになります。
- cht：チャートのタイプ
- chs：チャートの大きさ（サイズ）
- chd：チャートのデータ
実際の値を設定してみましょう。
cht=p chs=400x400 chd=t:60,30,10
円グラフのタイプ「p」を設定して、400×400のサイズを指定しました。グラフを構成するデータについては「t:」に続けて0〜100までの数値をカンマで区切って設定すればOKです。
このクエリパラメータを「&」で連結すれば完成です！（最初のパラメータのみ「?」のあとに記述します）
https://image-charts.com/chart?cht=p&chs=400x400&chd=t:60,30,10
このURLにアクセスすると以下のような円グラフが表示されます！
同じ要領で「棒グラフ」も作ってみましょう。
今度は2種類のデータを次のように用意してみました。
chd=t:10,25,30,40,12|20,47,29,84,30
複数のデータを利用する場合は「|（パイプ）」で区切ると自動的に認識してくれます。そして、今回のチャートタイプは「bvs」なので、以下のようなURLを作成します！
https://image-charts.com/chart?&cht=bvs&chs=600x400chd=t:10,25,30,40,12|20,47,29,84,30
このURLにアクセスすると積み上げ式の棒グラフが表示されます！
表示されたグラフはマウスの右クリックメニューから画像ファイルとしてダウンロード可能です。
また、以下のようにHTMLのimgタグと組み合わせてWebページに表示させるのも簡単です！
<img src="https://image-charts.com/chart?cht=p&chs=400x400&chd=t:60,30,10"/>
「Image-Charts」は単純なURLを生成するだけなので、例えば人気のドキュメントサービス「Notion」にも挿入可能です。
URLをコピペしたあとに【Create embed】を選択します。
すると以下のようにグラフを手軽にノートへ挿入できるわけです！
（※グラフのサイズもドラッグ操作で調整可能です）
■便利なオプションパラメータについて
「Image-Charts」では、チャートやグラフを自由自在にカスタマイズできるように、さまざまなオプションパラメータが用意されているので主要なものをいくつかご紹介しておきます。
例えば、タイトルやデータのラベルを表示させたい場合は以下のパラメータを利用します。
- chtt：タイトルの文字列
- chts：タイトルのスタイル
- chl：ラベルの文字列
- chlps：ラベルのスタイル
実際の値を設定すると次のようになります。
chtt=Hello+Image+Charts chts=00aaff,32 chl=10%|25%|30%|40%|12% chlps=color,ffffff|font.size,24
タイトルの文字列に「＋」を挿入するとスペースを空けることができます。また、ラベルの文字列はデータの個数に合わせて「|（パイプ）」で区切るようにしましょう。
URLに付与して表示するとこんな感じになります！
ちなみに日本語も設定可能であり、ラベルのスタイリングについては上記以外にも配置・シャドウ・パディング…など豊富に用意されています。（参考リンク）
次に「凡例」を追加するパラメータを見てみましょう！
主に3つのオプションが用意されており、それぞれの役割は以下のとおりです。
- chdl：凡例の文字列
- chdlp：凡例のポジション（位置）
- chdls：凡例のスタイル
実際の値を設定するとこんな感じになります。
chdl=First|Second chdlp=r chdls=4e4e4e,12
文字列はデータの個数だけ「|（パイプ）」で区切って設定します。ポジションについては上(t)・下(b)・左(l)・右(r)それぞれの値を設定し、スタイルはカラーとフォントサイズを指定すればOKです。
URLに付与すると以下のように表示されます！
グラフのカラーもカスタマイズ可能で、これは「chco」パラメータ1つで実現できます。
例えば、2種類のデータがある棒グラフの場合だと以下のように2つのカラーをカンマ区切りで指定すればOKです。
chco=CFECF7,27c9c2
これをURLに付与するとこんな感じに変化します！
また、グラフ1つずつのカラーを指定する方法もあります。その場合は「|（パイプ）」で区切りながらカラーを指定します。
chco=FFC6A5|FFFF42|DEF3BD|00A5C6|DEBDDE
URLに付与すると以下のように表示されます！
他にも、グリッド線・マーカー・X/Y軸・GIFアニメーション…など、さまざまなパラメータが提供されています。これらを上手く組み合わせれば自分がイメージするチャート・グラフを素早く生成できるようになるでしょう。
■チャートエディタを活用しよう！
ここまでの解説で「Image-Charts」が多数のパラメータを提供していることが分かったかと思います。
ただし、すべてのパラメータを覚えておく必要はなくて、実はURLを簡単に生成するための専用エディタが公開されています。
【 Chart Editor 】
エディタの左側にはURLへ付与できるクエリパラメータの入力ボックスが用意されています。
追加したいパラメータに値を設定するだけで、すぐにプレビューで反映されるようになっています。また、チャートのタイプなどはセレクトボックスから必要なタイプを選択するだけなので便利でしょう。
【URL Parameters】タブを選択すると、自分が設定したパラメータを一覧表示できる機能も搭載されています。
【URL output】タブをクリックすれば、最終的に生成されるURLを手軽にコピペ可能です。
同じように【HTML output】タブでは、HTMLへすぐに貼り付け可能なタグが生成されているのが分かります。
これらの機能を搭載したエディタを活用すれば、プレビューでどんなチャート・グラフが生成されているかを確認しながらカスタマイズができるようになるわけです。
■JavaScriptと組み合わせてみよう！
「Image-Charts」はJavaScriptでも活用できるように「Chart.js」と連携する方法が用意されています。つまり、入力データとして「Chart.js」で作成したオブジェクトデータを再利用できるようになっているのです。
この場合に利用するURLは今までと違い、以下のようなものになります。
https://image-charts.com/chart.js/2.8.0?bkg=white&c=
末尾の「c=」に続けてChart.jsで利用していたオブジェクトデータを連結するだけでグラフが表示される仕組みになっています。
参考例として簡単なグラフを表示するプログラムを以下に掲載しておきます。
const img = document.createElement('img'); const url = 'https://image-charts.com/chart.js/2.8.0?bkg=white&c='; // Chart.jsのオブジェクトデータ const chartData = { "type": "line", "data": { "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"], "datasets": [ { "backgroundColor": "rgba(255,150,150,0.5)", "borderColor": "rgb(255,150,150)", "data": [-23, 64, 21, 53, -39, -30, 28, -10], "label": "Dataset", "fill": "origin" } ] } } // JSONに変換してURLに付与する img.src = url+JSON.stringify(chartData); document.body.appendChild(img);
上記コードを実行すると、以下のように表示されます！
プログラムの最後で、オブジェクトデータをJSONに変換してからURLへ付与する点に注意しておきましょう。また、指定可能なプロパティについてはChart.jsのマニュアルがベースになっているのでぜひ参考にしてみてください。
Chart.jsと組み合わせることで、さらに表現の幅が広がるためデータの可視化にご興味ある方はぜひ試してみてください！
なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができます。
■動画＆ゲームでプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください！
■まとめ
今回はURLだけで多彩なチャート・グラフを作成できるWebサービスをご紹介しました！
「Image-Charts」は単純なURLを生成するだけなので、ブログやWebサイトに埋め込んだりプログラムから制御したりなど、応用範囲はかなり広いと思います。
手っ取り早くグラフを表示したい人や、Webアプリに組み込みたい人なども含めてぜひみなさんもカスタマイズ性の高いチャート・グラフ作りを楽しんでみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
