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>
<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程度大きくするとよいようです。
- 上に示したようにHTMLファイルにグラフを表示。
- このHTMLファイルをサーバにアップ。WordPressにアップしてもよい。
- WordPressの記事にiframeを使ってファイルを指定。
iframeは次のように使います。
次の記事はここで紹介した手法を使っています。
You Look Too Cool » 稲葉と宮本の年別安打数グラフ
[ 2012年5月9日 | カテゴリー: WordPress | タグ: Google , グラフ ]
« 稲葉と宮本の年別安打数グラフ | デッサンが狂っているコストコのスロープ »
コメントを残す