JavaScript

円グラフ/折れ線グラフ/棒グラフを簡単に作れるjQueryプラグイン「Peity」

個人的にかなり便利なプラグインを発見しました。円グラフ、折れ線グラフ、棒グラフを簡単に作ってくれるjQueryプラグイン「Peity」です。デフォルトでは小さくて可愛い感じのグラフなんですが、オプションで色や大きさなども設定できるので自分のサイトにも合わせやすいです。使い方やグラフのデザインともにシンプルなので使いやすいのも良いですね。

[ads_center]

使い方

いつも通りjQuery本体とダウンロードしたプラグインを読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="jquery.peity.js"></script>

使用したいグラフをセッティングします。

<script type="text/javascript">
$(function(){
    // Pie Charts(円グラフ)
    $(".pie").peity("pie")

    // Line Charts(折れ線グラフ)
    $(".line").peity("line");

    // Bar Charts(棒グラフ)
    $(".bar").peity("bar");
});
</script>

あとはグラフに使う数値をマークアップします。

<!-- Pie Charts -->
<span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>

<!-- Line Charts -->
<span class="line">5,3,9,6,5,9,7,3,5,2</span>
<span class="line">5,3,2,-1,-3,-2,2,3,5,2</span>
<span class="line">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>

<!-- Bar Charts -->
<span class="bar">5,3,9,6,5,9,7,3,5,2</span>
<span class="bar">5,3,2,-1,-3,-2,2,3,5,2</span>
<span class="bar">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>

カスタマイズしてみる

オプションではグラフのサイズやカラーを設定できます。オプションの指定は以下の通りです。

<script type="text/javascript">
$(function(){
    // Pie Charts
    $(".pie").peity("pie", {
        colours: ["#fff4dd", "#ff9900"],
        delimeter: "/",
        diameter: 16
    })

    // Line Charts
    $(".line").peity("line", {
        colour: "#c6d9fd",
        strokeColour: "#4d89f9",
        strokeWidth: 1,
        delimeter: ",",
        height: 16,
        max: null,
        min: 0,
        width: 32
    });

    // Bar Charts
    $(".bar").peity("bar", {
        colour: "#4d89f9",
        delimeter: ",",
        height: 16,
        max: null,
        min: 0,
        width: 32
    });	
});
</script>

各オプションは、見た感じ通りなので分かりやすいかと思います。あと、グラフはcanvasで描かれているので対応ブラウザはChrome、Firefox、IE9+、Opera、Safariになります。

以下からPeityをダウンロードできます。

タータンチェックの背景素材を簡単に作成することができるジェネレーター「Tartan Maker 」前のページ

ドラッグしたテキストを音声で読み上げてくれるChrome拡張機能「SpeakIt!」を使ってみた次のページ

関連記事

  1. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

  2. Reframe.js

    JavaScript

    特定の要素をレスポンシブ化してくれる「Reframe.js」

    Reframe.jsはレスポンシブに対応していない特定の要素をレスポン…

  3. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  4. Grasp Mobile Progress Circle
  5. JavaScript

    2つの異なるスクロール動作が印象的なjQueryプラグイン「multiscroll.js」

    multiscroll.jsというおもしろいjQueryプラグインがあ…

  6. Pushbar.js

    JavaScript

    スライドでコンテンツを引き出せる「Pushbar.js」

    Pushbar.jsはスライドでコンテンツやナビゲーションメニューを引…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. メキシコ オアハカ
  2. ドリップ
  3. チェリー
  4. 温泉水99

アーカイブ

PAGE TOP