Google ChartをWordPressで使う

Google Chartには2種類あります。
JavaScriptを使って描画するタイプとPNG画像を描画するタイプです。
便宜的に、前者を「Visualization」、後者を「Image」と呼ぶことにします。

  • Visualization
    • Google Chart Tools
    • JavaScriptで描画する。
    • マウスを載せると該当の箇所が強調されるなどインタラクティブ。
    • データのサイズは無制限。
    • 作成が面倒。
  • Image
    • Google Chart Tools: Image Charts
    • URLを与えるとPNG画像が得られる。
    • 作成が容易。
    • データサイズはURLの長さに依存。
    • Googleは公式サポートを停止。

現在、様々なブログで紹介されているのは、ほとんどの場合、後者の「Image」の方です。
こちらは結果を画像で扱えるので使い勝手がとてもよいのですが、Googleは公式サポートをしないそうです。
ということで、前者の「Visualization」が今後の主流になるでしょう。

Visualizationのサンプル

<html>
<body>
<div id="chart_div" style="width: 400px; height: 200px;"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
  packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["year", "x", "y"],
    ["2010", 10, 30],
    ["2011", 25, 10],
    ["2012", 20, 25]
  ]);
  var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
  chart.draw(data);
}
</script>
</body>
</html>

WordPressで表示

「Image」ならば画像ファイルなのでWordPressで表示するのは簡単ですが、「Visualization」を表示するのは非常に面倒です。
別にHTMLファイルに記述して、iframeタグを使ってWordPressに表示する方法が考えられます。邪道かもしれませんがこの方法が簡単です。
iframeのサイズはグラフのサイズより20px程度大きくするとよいようです。

  1. 上に示したようにHTMLファイルにグラフを表示。
  2. このHTMLファイルをサーバにアップ。WordPressにアップしてもよい。
  3. WordPressの記事にiframeを使ってファイルを指定。

iframeは次のように使います。

<iframe src="xxxxx.htm" frameborder="0" width="500" height="300">
</iframe>

次の記事はここで紹介した手法を使っています。
You Look Too Cool » 稲葉と宮本の年別安打数グラフ

コメント

タイトルとURLをコピーしました