Qiitaアドベントカレンダー「JavaScript2」12日目の記事です。最近、データのビジュアライズに興味津々之介なイイダリョウです。これまでJSのチャートライブラリは「Chart.js(Canvasベース)」と「C3.js(SVGベース)」をGetしてStartedしました。今回は「Google Charts」をQuickにStartしてみます。C3.jsと同様SVGベースのようですが、何と言ってもGoogleドライブのスプレッドシートをダイレクトに読み取れるのが大きな特徴です。それではいってみよう!
【目次】
※参考:JSの基本はこちら
【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基本5+応用1記事) - クモのようにコツコツと
スプレッドシートのグラフは簡単に埋め込みできる
ちなみにGoogleドライブのスプレッドシートは実はデフォルトで「ウェブ埋め込み」機能があります。こんな感じです。
グラフはカーソルのhoverに反応したりしていい感じですね!Googleドライブ をやっていないユーザーにもグラフを見せられることがメリットです。(ちなみに下の方でグラフの元になった表自体も埋め込んでいますが、こちらは使い勝手がイマイチです。。)
手順を簡単に説明します。まずグラフにしたい表を選択した状態でツールバーの「グラフ」のアイコンをクリック
グラフが作られたら右上の「設定」のアイコンを開き「グラフを公開」をクリック
「ウェブに公開」画面の「埋め込み」タブにiframe
のコードがあるのでコピーして自分のサイトやブログにペーストするとグラフを埋め込めることができます。
一応、表の方の手順も。「ファイル」の「ウェブに公開」を開く
「ウェブに公開」画面の「埋め込み」タブで公開したいシートを選択するとiframe
コードをコピーできます。あとは同じです。
スプレッドシートから取得できるiframe
コードを貼るだけでSNSと同じ感覚でグラフを公開できます。プラグラミング知識は不要。お手軽です!
え?それならこれだけでもうええやん、なんでGoogle Charts必要なんって?はい、確かに私もそう思いました。
Google Chartsを使うメリットは別にあります。それはスプレッドシートよりグラフを細かくカスタマイズできることです!
Google ChartsをQuickにStart
以前の記事で「Chart.js」や「C3.js」は割と簡易にGettingしてStartedできました。構造も割と似ていましたね。
※参考:Chart.jsをGettingしてStartedする - クモのようにコツコツと
※参考:SVGの方のチャートライブラリ「C3.js」をGettingしてStartedする - クモのようにコツコツと
Google Chartsもたぶん似た構造と予想されるので臆することなく初めて見ます。今回もまずは公式チュートリアルから。
※参考:Quick Start | Charts | Google Developers
むむむ…やはり英語。果てしなく英語。とはいえ、ひとまずソースコードはわかるのでCodePenに貼ってみる。ドン!
おお、グラフが表示されたぞ!なんてQuickなStart!!(感激)
こちらのグラフもカーソルを乗せると詳細が表示されたりしていい感じです。
コードを見ていきます。まずはHTMLファイルのhead
タグにライブラリの利用に必要なloader.js
ファイルを読み込みます。CDNがありますね。
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
今回はCodePenなのでいつものようにJSの「Setting」(歯車アイコン)に貼りました。
HTMLファイル本文エリアには下記のようなdiv
タグを一つだけ配置。id名がchart_div
ですね。
<!--Div that will hold the pie chart--> <div id="chart_div"></div>
あとはJSファイルのコードのみ(CSSは無し)!こちらのコードです。
// Load the Visualization API and the corechart package. google.charts.load('current', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Set chart options var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300}; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); }
…はい、ちょっと長いので上から順番に読み解いていきましょう〜。
Google ChartsのJSを読み解く
先ほどのコードを分解して少しずつ見ていきます。
Google Chartsパッケージの読み込み
まず最初の行から。
// Load the Visualization API and the corechart package. google.charts.load('current', {'packages':['corechart']});
- コメント:ビジュアライゼーションAPIとコアチャートパッケージを読み込みます。
google.charts
プロパティの.load()
メソッドを実行.load()
メソッドの第1引数'current'
、第2引数は連想配列'packages'
キーの値がさらに配列'corechart'
まずここで基本的なGoogle Chartsのパッケージを読み込んでいるようですね。.load()
はGoogle Chartsファイル内で定義されたメソッド。
APIが読み込まれたらdrawChartメソッドを実行
次の行にいきましょう。
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
- コメント;Google ビジュアライゼーションAPIが読み込まれたときに実行するコールバックを設定します。
google.charts
プロパティの.setOnLoadCallback()
メソッドを実行.setOnLoadCallback()
メソッドの引数はdrawChart
「コールバック」はざっくりいうと「関数の引数に渡される関数」です。
※参考:https://wa3.i-3-i.info/word12295.html
ここではsetOnLoadCallback()
というAPIが読み込まれたときに実行されるメソッドの引数にdrawChart
という名前のメソッド(関数)を読み込む。
つまり、APIが読み込まれたらdrawChart
メソッドが実行されるということです。
drawChartメソッドの概要
ではdrawChart
メソッドとはなんぞや?次の行でできます。
// Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { (処理内容) }
- コメント:データテーブルを作成して設定するコールバック、円グラフをインスタンス化し、データを渡し、それを描く。
drawChart()
メソッドを定義(中に処理内容が書かれている)
処理内容は大きく3ブロックに分かれています。
// Create the data table. (処理内容) // Set chart options (処理内容) // Instantiate and draw our chart, passing in some options. (処理内容)
- コメント1:データテーブルを作成します。
- コメント2:チャートオプションを設定する
- コメント3:チャートをインスタンス化して描画し、いくつかのオプションを渡します。
drawChartメソッド1:データテーブルを作成
それでは1ブロックずつ見ていきましょう。まず一つ目「データテーブルを作成」
// Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]);
- コメント1:データテーブルを作成します。
- 変数
data
でgoogle.visualization
プロパティのDataTable()
メソッドを複製(インスタンス作成) data
のaddColumn()
メソッドを実行。第1引数'string'
、第2引数'Topping'
data
のaddColumn()
メソッドを実行。第1引数'number'
、第2引数'Slices'
data
のaddRows()
メソッドを実行。中には多次元配列(配列の値が配列)がはいっています。- 多次元配列1の値1は
'Mushrooms'
、値2は3
- 多次元配列2の値1は
'Onions'
、値2は1
- 多次元配列3の値1は
'Olives'
、値2は1
- 多次元配列4の値1は
'Zucchini'
、値2は1
- 多次元配列5の値1は
'Pepperoni'
、値2は2
addColumn()
メソッドは列(カラム)の追加、addRows()
メソッドは行(ロウ)の追加ですね。
ここにデータの値が配列形式で入っています。ここは外部JSONファイルに置き換えることもできそう。
drawChartメソッド2:チャートオプションを設定
次はブロック2「チャートオプションを設定」
// Set chart options var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300};
- コメント2:チャートオプションを設定する
- 変数
options
に連想配列を入れる - キー1は
title
、値はHow Much Pizza I Ate Last Night
(昨夜のピザの作り方) - キー2は
width
、値は400
- キー3は
height
、値は300
「オプション」で設定しているのはグラフのタイトルとサイズですね。
drawChartメソッド3:チャートのインスタント化、描画、オプション渡し
最後、ブロック3「チャートのインスタント化、描画、オプション渡し」です。
// Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options);
- コメント3:チャートをインスタンス化して描画し、いくつかのオプションを渡します。
- 変数
chart
にgoogle.visualization
プロパティのPieChart()
メソッドを複製(インスタンス化) PieChart()
メソッドの引数でHTMLのid#chart_div
の要素を紐付けchart
のdraw()
メソッドを実行draw()
メソッドメソッドの第1引数はdata
options、第2引数はoptions
メソッドを読み込み。
PieChart
が「円グラフ」という意味なので、ここでグラフのタイプをことができそうですね!
※参考:Chart Gallery | Charts | Google Developers
以上がGoogle ChartsのAPIを読み込んで、データをチャートに描画する、という流れです。ブロックごとに細かくみていくとイメージがわきますね!
最後に
chart.js、c3.jsと比較すると、もちろんそれぞれが独自に定義したメソッド名のちがいはあるんですが、そこまで大きなちがいはないように感じました。データが配列になっているのも共通ですね。
ひきつづき、並行して触れていきたいと思います。とくにGoogle ChartsはGoogleドライブ のスプレッドシートの値を読み込みは興味津々すぎるので是非体験していきたい。あと外部JSONファイルの読み込みもしてみたいです。それではまた!