Google Chartsを使ってデータの可視化
1.概要 企業などでは、これまでの事業活動の中で大量に蓄積されたデータがあります。また、日々、増え続けています。 筆者も以前は、会社でイントラネットでグラフライブラリ等を利用して社内で共有する進捗状況や予算方針などの 経営諸数値をグラフ化して掲載していました。現在は、BIツールやAIなどを導入したため、手作りのものは利用する ことがなくなりました。個人的な研究や調査結果などでの利用範囲となりました。Web上で掲載する機会も少ない のですが、見える化の一環として便利なものですので良く利用されるグラフをテンプレート(サンプル)として作成して見ました。 2.良く利用するグラフのテンプレート 無料で使えるJavaScriptのグラフライブラリとしては、Chart.js、Chartist.js、Google Chartsなどが良く利用されていますが、 今回は、Google Chartsを利用して見ることにしました。ただ少し心配な点は、Googleのサービスなので、いつサービスが 廃止されるかわからない点があります。練習用ということで、良く利用される代表的なグラフから10種類を選択して、 データ数値やタイトル、要素名などを変更すれば簡単に利用できると思います。 下記のデモをクリックするとサンプルを確認できます。どんなグラフライブラリでも同じですが、デザインやレイアウトに拘り 過ぎるとコードがごちゃごちゃして分かりにくくなりますので、注意が必要です。 DEMO Google Chartsグラフテンプレート 3.ソースコード ソースコードは、下記の通りです。ほとんど、公式サイトのギャラリーにあるサンプルをベースにカスタマイズしたものです。 Googleグラフ公式サイト URL: https://developers.google.com/chart 作成したテンプレートのグラフは、次の10種類です。 ・縦棒グラフ ・３Ｄ円グラフ ・積み上げ縦棒グラフ ・複数折れ線グラフ ・ドーナツグラフ(パイチャート) ・折れ線グラフ ・横棒グラフ ・積み上げ(100%)横棒グラフ ・縦棒グラフ(比較) ・面(100%)積み上げグラフ テキストのフォント( textStyle )、タイトルのフォント( titleTextSty
