HTML5 では、canvas 機能を利用して、図形やグラフを描くことができます。html5.jpでライブラリが公開されているので、使ってみました。

当ブログのカテゴリーを円グラフにしてみました。ソースコードは下記のとおり。

<?php
/*
   Plugin Name: circle
   Plugin URI: http://php-web.net/
   Description: circle
   Author: Fumito MIZUNO
   Version: 1
   Author URI: http://php-web.net/
 */
add_shortcode( 'circle', 'circle_func' );
function circle_func( $atts, $content = null ) {
	extract( shortcode_atts( array(
					'num' => '10'
					), $atts ));
	if ( $num ) {
	    $terms = get_terms('category', array(
            'number' => $num,
            'orderby' => 'count',
            'order' => 'DESC'
        ));
        // jsの詳細は http://html5.jp/library/graph_circle.html
        $js = '<script type="text/javascript" src="'. WP_PLUGIN_URL . '/circle/circle.js"></script>';
        $js .= "n";
        $js .= '<script type="text/javascript">
window.onload = function() {
	var cg = new html5jp.graph.circle("sample");
	if( ! cg ) { return; }
	var items = [';
            $outdata = '';
        foreach ( $terms as $termdata ) {
            if ($outdata != '') {
                $outdata .= ',';
                $outdata .= "n";
            }
            $outdata .= '["';
            $outdata .= esc_html($termdata->name);
            $outdata .= '", ';
            $outdata .= esc_html($termdata->count);
            $outdata .= ']';
        }
        $js .= $outdata;
        $js .= "n";
        $js .= '	];
var params = {
    captionNum: false,
    otherCaption: "その他"
  };
  	cg.draw(items, params);
};
</script>
<div><canvas width="400" height="300" id="sample"></canvas></div>';
        return $js;
	}
}
?>

ショートコードを利用しています。記事本文の任意の場所で、[circle] と書いてください。circle.js は、html5.jpから入手してください。

楽天で検索
【楽天ブックスならいつでも送料無料】HTML5＆CSS3ステップアップブック [ エ・ビスコム・テック・ラボ ]
2808円
ステップバイステップ形式でマスターできる エ・ビスコム・テック・ラボ ソシム発行年月：2012年05月 ページ数：287p サイズ：単行本 ISBN：97848
楽天ブックス
Supported by 楽天ウェブサービス