Google Chartsを利用してHPやブログにチャート（グラフ等）を描く方法
ブログなどのウェブ・ページに自分の意見や主張や考えを掲載するときにそれを裏付けるデータがあると説得力が増すかもしれない。そのデータをチャートとして描いて視覚化できれば尚更。 その場合、一般的なのはそれを専門にしている表計算アプリを使うこと。表計算ソフトウェアにはデータを各種チャートの形にして視覚化してくれる機能が大抵備わっている。LibreOfficeのCalcの場合、そのチャートをコピーしてInkscape上に貼り付けることができる。それをPNG形式の画像やSVG形式の画像として保存し、それをウェブ・ページに掲載する方法がある。 他の選択肢としては、HTML5 CanvasやJavaScriptのライブラリを使う手がある。データを視覚化してくれるJavaScriptのライブラリが最近では数え切れないくらい多くある。 今回はGoogle Chartsのライブラリを利用させていただいた。その手順についてこの投稿に書き留める。 2種類のチャートの完成図 同じデータ・セットで2種類のチャートを作ってみた。その完成図が次のとおり。 Google Chartsが有効ではありません。このページを再読み込みをすると有効になることがあります。 1つ目のチャートは日本のマクロ経済のインフレ率の時系列データを折線グラフにしたもの。 2つ目のチャートは同じ時系列データを縦の棒グラフにしたもの。棒グラフだと0に近い値が見えなくなってしまっているためか、そこにマウスのポインタを合わせても値を表示してくれるイベント処理が機能しない。 Google Chartsが有効ではありません。このページを再読み込みすると有効になることがあります。 これらのチャートを描くためのコードをHTMLから順に説明する。 HTMLのコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Chartでチャートを描いてみた</title> <!-- loader.jsを読み込む --> <script src="https://www.gstatic.co...