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. no-image

    JavaScript

    ミニマルなイメージギャラリーを実装できる「Albery」

    Alberyはミニマルなイメージギャラリーを実装できるjQueryプラ…

  2. Glide.js

    JavaScript

    軽量・フレキシブル・高速なスライダー&カルーセル実装「Glide.js」

    Glide.jsは軽量・フレキシブル・高速なJavaScript ES…

  3. Effect Ideas for Card Stacks
  4. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

  5. no-image
  6. VerticalShift

    JavaScript

    要素を縦長に並べてマウスオーバーで全部表示させるjQueryプラグイン「VerticalShift」…

    とても面白い見せ方だったのでご紹介します。要素を縦長に並べてマウスオー…

コメント

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

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

最近の記事

  1. Anker PowerExpand 8-in-1 USB-C PD 10Gbps データ ハブ
  2. SAP-001
  3. OWL-QI10W2Q18W
  4. アースクーラー3WAY

アーカイブ

PAGE TOP