Standing on the Shoulder of Linus

Home / 2010 / 11月 / 24 / html5円グラフ

html5円グラフ

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 楽天ウェブサービス

関連

Posted in myplugin | Tagged html5, Javascript
← Concrete5とWordPress OSC 島根 →

アーカイブ

人気の投稿とページ

  • キンドル本を印刷する(PDFに変換する)方法
  • 名古屋駅から国際センターまでの道のり(徒歩)
  • AGPL ライセンス(GPLとは似ているが違いもある)
  • 6年使ったイーモバイル(Y!mobile)を解約手続。店頭でSIM返却
  • JP-Secure SiteGuard WP Pluginは不正ログイン防止に役立つか

プロフィール

水野史土:月70万PVホームページ制作会社のレスキューワーク株式会社で、PHPソフトウェアのサポートを行っている。concrete5コミュニティリーダー、Novius OSコアコード貢献者でもある。 詳しくは管理者詳細参照。
大好評WordPress書籍「WordPressユーザーのためのPHP入門 はじめから、ていねいに。」サポートページ

Copyright © 2015 Standing on the Shoulder of Linus.