msg
Web制作
サリーサリー
  • このエントリーをはてなブックマークに追加

HTML5のcanvas機能で綺麗なグラフが作れる!「Flotr2」を試してみた

HTML5で簡単に綺麗なグラフが作れちゃう!「Flotr2」を試してみた

マクロミル

HTML5のcanvas機能を使用してグラフが作成出来るライブラリ、「Flotr2」がとても素敵だったので試してみました。グラフは円グラフ・棒グラフ・折れ線グラフなど様々な形での表現が可能です。

使用方法

使用するときのルールは以下の通りです。

  1. 「flotr2.min.js」を読み込む
  2. グラフを表示するdivのID名を決めて、ソースを書き換える(デモでは「#graph」)
  3. 上記IDにwidth、heightを設定する

あとはサンプルのソースの数値や項目名など書き換えればOK。

デモ

表現出来るグラフが紹介しきれないくらいたくさんあるので、汎用性のある折れ線グラフ、レーダーチャート、円グラフを試してみました。

折れ線グラフ

折れ線グラフ
デモページはこちら

<br />
<!DOCTYPE html><br />
<html lang=&quot;ja&quot; dir=&quot;ltr&quot;><br />
<head><br />
<meta charset=&quot;utf-8&quot;></p>
<style type=&quot;text/css&quot;>
#graph {
	width : 600px;
	height: 400px;
	margin: 20px auto;
}
.graph-title {
	font-size:16px;
	font-weight:bold;
	text-align:center;
	margin:50px 0 0;
}
</style>
<p><script type=&quot;text/javascript&quot; src=&quot;js/flotr2.min.js&quot;></script><br />
</head><br />
<body></p>
<p class=&quot;graph-title&quot;>紳さんの年間体重増減</p>
<div id=&quot;graph&quot;></div>
<p><script type=&quot;text/javascript&quot;>
(function basic(container) {
    var d1 = [
        [1, 70],
        [2, 68],
        [3, 65],
		[4, 67],
		[5, 64],
		[6, 61],
		[7, 60],
		[8, 62],
        [9, 68],
		[10, 67],
        [11, 70],
		[12, 72]
    ],
        d2 = [
        [1, 70],
        [2, 69],
        [3, 70],
		[4, 71],
		[5, 69],
		[6, 70],
		[7, 69],
		[8, 68],
        [9, 69],
		[10, 70],
        [11, 73],
		[12, 75]
    ],
    data = [{
        data: d1,
        label: &quot;2012年&quot;
    }, {
        data: d2,
        label: &quot;2000年&quot;
    }];</p>
<p>    function labelFn(label) {
        return label;
    }</p>
<p>    graph = Flotr.draw(container, data, {
        legend: {
            position: &quot;se&quot;,
            labelFormatter: labelFn,
            backgroundColor: &quot;#D2E8FF&quot;
        },
        HtmlText: false
    });
})(document.getElementById(&quot;graph&quot;));
</script><br />
</body><br />
</html><br />

レーダーチャート

レーダーチャート
デモページはこちら

<br />
<!DOCTYPE html><br />
<html lang=&quot;ja&quot; dir=&quot;ltr&quot;><br />
<head><br />
<meta charset=&quot;utf-8&quot;></p>
<style type=&quot;text/css&quot;>
#graph {
	width : 600px;
	height: 400px;
	margin: 20px auto;
}
.graph-title {
	font-size:16px;
	font-weight:bold;
	text-align:center;
	margin:50px 0 0;
}
</style>
<p><script type=&quot;text/javascript&quot; src=&quot;js/flotr2.min.js&quot;></script><br />
</head><br />
<body></p>
<p class=&quot;graph-title&quot;>LIG社員の人間的魅力</p>
<div id=&quot;graph&quot;></div>
<p><script type=&quot;text/javascript&quot;>
(function basic_radar(container) {
    var s1 = {
        label: &quot;紳さん&quot;,
        data: [
            [0, 2],
            [1, 1],
            [2, 4],
            [3, 3],
            [4, 5],
            [5, 1]
        ]
    },
        s2 = {
            label: &quot;ひろゆき&quot;,
            data: [
                [0, 5],
                [1, 2],
                [2, 1],
                [3, 5],
                [4, 4],
                [5, 1]
            ]
        },
		s3 = {
            label: &quot;ジェイ&quot;,
            data: [
                [0, 5],
                [1, 5],
                [2, 5],
                [3, 1],
                [4, 3],
                [5, 1]
            ]
        },
        graph, ticks;
    ticks = [
        [0, &quot;容姿&quot;],
        [1, &quot;男らしさ&quot;],
        [2, &quot;優しさ&quot;],
        [3, &quot;性格&quot;],
        [4, &quot;ユーモア&quot;],
        [5, &quot;財力&quot;]
    ];
    graph = Flotr.draw(container, [s1, s2, s3], {
        radar: {
            show: true
        },
        grid: {
            circular: true,
            minorHorizontalLines: true
        },
        yaxis: {
            min: 0,
            max: 5,
            minorTickFreq: 1
        },
        xaxis: {
            ticks: ticks
        }
    });
})(document.getElementById(&quot;graph&quot;));
 </script><br />
</body><br />
</html><br />

円グラフ

パーセンテージは数値を入れると勝手に算出してくれます。

レーダーチャート
デモページはこちら

<br />
<!DOCTYPE html><br />
<html lang=&quot;ja&quot; dir=&quot;ltr&quot;><br />
<head><br />
<meta charset=&quot;utf-8&quot;></p>
<style type=&quot;text/css&quot;>
#graph {
	width : 600px;
	height: 400px;
	margin: 20px auto;
}
.graph-title {
	font-size:16px;
	font-weight:bold;
	text-align:center;
	margin:50px 0 0;
}
</style>
<p><script type=&quot;text/javascript&quot; src=&quot;js/flotr2.min.js&quot;></script><br />
</head><br />
<body></p>
<p class=&quot;graph-title&quot;>紳さんの給料の使い道</p>
<div id=&quot;graph&quot;></div>
<p><script type=&quot;text/javascript&quot;>
(function basic_pie(container) {
    var d1 = [
        [0, 51000]
        ],
        d2 = [
            [0, 28000]
        ],
        d3 = [
            [0, 30000]
        ],
        d4 = [
            [0, 15000]
        ],
		d5 = [
            [0, 15000]
        ],
		d6 = [
            [0, 10000]
        ],
		d7 = [
            [0, 5000]
        ],
        graph;
    graph = Flotr.draw(container, [{
        data: d1,
        label: &quot;家賃&quot;
    }, {
        data: d2,
        label: &quot;車のローンの返済&quot;
    }, {
        data: d3,
        label: &quot;食費&quot;,
        pie: {
            explode: 50
        }
    }, {
		data: d4,
        label: &quot;交際費&quot;
    }, {
		data: d5,
        label: &quot;コスプレ費用&quot;
    }, {
		data: d6,
        label: &quot;携帯代&quot;
    }, {
        data: d7,
        label: &quot;光熱費&quot;
    }], {
        HtmlText: false,
        grid: {
            verticalLines: false,
            horizontalLines: false
        },
        xaxis: {
            showLabels: false
        },
        yaxis: {
            showLabels: false
        },
        pie: {
            show: true,
            explode: 6
        },
        mouse: {
            track: true
        },
        legend: {
            position: &quot;se&quot;,
            backgroundColor: &quot;#D2E8FF&quot;
        }
    });
})(document.getElementById(&quot;graph&quot;));
 </script><br />
</body><br />
</html><br />

簡単!そしてデザインが綺麗!オプションも様々なものが用意されているので、詳しくは下記リンクを参照して下さい。

ダウンロード・ライセンス等

ダウンロードは「flotr2」の公式サイトから。
紹介しきれなかった他の形のグラフもたくさん見る事が出来ます。

ライセンスはMIT Licenseです。

  • このエントリーをはてなブックマークに追加

この記事を書いた人他のメンバーを見る

LIGの2代目広報担当ひろゆきからのお知らせを受け取る方法

ジェイ

まいどおおきに。俺の名前は大田ひろゆき。LIGの広報担当や。FacebookとかTwitterとかメルマガで、皆にメッセージを届けさせてもらうで。ほんまに。 あと俺の発信する情報はLIGからの公式メッセージやと思ってもらってかまへんから。ってか公式のメッセージやわな。下にある「いいね!」を押すか、twitterをフォローして俺の情報を逃さんようにしてな。 メールマガジンの登録もめっちゃ簡単やから、おすすめやで~

twitter

LIGの事つぶやいてんの見つけたら速攻でフォローするで!

mail magazine

メルマガ登録はこちら

人類史上、例を見いひんくらいのしょうもないやつ配信するわ。

RSS

RSSを登録する

記事は毎日2本更新する予定や!RSSの登録をすると便利やで。

facebook