綺麗で操作性も良いグラフをすんなり出せるGoogle Chartsですが、Railsから使おうとしたところTurbolinksまわりで少し面倒なことになってしまいました。
Google Chartsを使うための2手順
機能が多いこともあってか、Google Chartsのロードは2段階となっています。
-
<script>要素でhttps://www.gstatic.com/charts/loader.jsを読み込んでおく -
google.charts.load()を呼んで、必要な種類のグラフライブラリをロードする
ここで1つ厄介なことに、現バージョンではgoogle.charts.load()はページロードごとに一度しか呼べません。Turbolinksの環境下では、Turbolinksでの遷移が続く範囲内で一度、ということになってしまいます。
ローダーの読み込み方はどうする？
まず1つ目のhttps://www.gstatic.com/charts/loader.jsですが、読み込み方は2通り考えられます。
-
<script data-turbolinks-track="true">の形で<head>から読み込んでしまう - 必要に応じて
<script>要素を動的に生成して読み込む
多くのページ、あるいはよくアクセスするページでGoogle Chartsを使う場合には、前者のように全体で読み込んでおいたほうがいいでしょう。後述の理由で専用のローダーが必要となるので、後者のように必要に応じて読み込むのもありですが、すでに読み込まれているときはバイパスが必要です。
二度呼び禁止！
そして、次は一度しか呼べないgoogle.charts.load()ですが、こちらについてはアプリケーション内で使うチャートの種類をすべて集めて、ラッパー関数を作ってロードさせた方がいいでしょう。
app/assets/application/chart_loader.js
(function(){
var loaded = false;
window.loadGoogleChart = function(){
if(loaded) return;
loaded = true;
google.charts.load('current', {packages: ['corechart', 'bar'], language: 'ja'});
};
})();
これでwindow.loadGoogleChart()を呼べば、以前にロードされていない時だけロードされるようになります。なお、上で全体に対してloader.jsを読み込んでいる場面であれば、常にgoogle.charts.setOnLoadCallback()を使えるのですが、loader.jsも動的ロードにする場合にはこの関数が存在しない可能性があるので、そこも1工夫が必要となります。