Google Chart のグラフが表示されない件
今回は、GoogleChartを使用したグラフが突如表示されなくなった為、
その原因調査と対策について記載していこうと思います。
結論
GoogleChartsのロードと、ロード後のコールバック関数の呼び方が違っていた。
原因箇所
他のサイトなどを参考に2018年頃に作成したものです。
■ロード部分
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', { packages : ['corechart']}); </script>
■ロード後のコールバック部分
<script type="text/javascript"> google.setOnLoadCallback(XXXXXX(1)); </script>
対策内容
公式のページ見ると以下の内容が記載されており、今回問題となったソースとの差異が見受けられました。
なので、この内容に合わせて修正を行う。
修正内容
■ロード部分
[修正前]
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', { packages : ['corechart']}); </script>
↓
[修正後]
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages: ['corechart']}); </script>
※「current」は、リリース版。「upcoming」は、次期リリース版らしいです。
■ロード後のコールバック部分
[修正前]
<script type="text/javascript"> google.setOnLoadCallback(XXXXXX(1)); </script>
↓
[修正後]
<script type="text/javascript"> google.charts.setOnLoadCallback(XXXXXX); </script>
※コールバック関数の引数を記載するのも駄目みたいなので取っ払いました。
実施
グラフが表示されるようなりました！
※都合上ここには貼ることはできませんが。。。
最後に
海外勢の、「リリースノートに書いてたZE!!!」があったからこそたどり着けました。
マジ感謝っす！
さて、日本語のサイトが少なかったので少しでもお役に立てればと思います。
