jQueryプラグインpeity.jsを使って、小さなPie Chart（円グラフ）などを作成。

peity.jsを利用することで、色、サイズを自由に設定できる単純なグラフが作成できます。なお、 peity.js内部のパスの都合で、htmlと同じ階層におく必要があるようです。また、canvasタグを利用しているため、IEの対応は9以上になります。

◎ Pie Chart（円グラフ）

1つの要素の全体に占める割合を表示します。jQuery指定要素で、peity("pie")を呼び出し、色と径のサイズを設定するだけで。小さくて単純な円グラフを作成できます。4/5文章の中に配置することも可能です。

基本的なPie Chart（円グラフ）

4/5 238/360 0.65/1.561

JavaScriptソース
	$("span.pie").peity("pie")
HTMLソース
	<p><span class="pie">4/5</span>
上のようにspanタグにclass="pie"を指定して、分数の数値を囲むだけでグラフができます。数値は226/360や0.52/1.561のようなものも可能です。色はpeity.jsのデフォルトの設定で、全体が薄いオレンジ、割合部分が濃いオレンジになっています。これを変更するには、 peity.js内部 peity.add( 'pie'の colours:を書き換えることになります。

サイズと色の変更

1/7 2/7 3/7 4/7 5/7 6/7 7/7

JavaScriptソース
$(".diameter span").peity("pie", {
  colours: function() {
    return ["#dddddd", this.getAttribute("data-colour")]
  },
  diameter: function() {
    return this.getAttribute("data-diameter")
  }
})
HTMLソース
				<span data-colour="red" data-diameter="40">1/7</span>

◎ Line Chart（折れ線グラフ）

spanタグにclass="line"と指定して、「5,3,9,6,5,9,7,3,5,2」のような数値を囲むだけで折れ線グラフを作成できます。オプションで縦横サイズ、折れ線の色、折れ線のバックの色などを設定できます。

5,3,9,6,5,9,7,3,5,2

JavaScriptソース
$(".line").peity("line")
HTMLソース
<span class="line">5,3,9,6,5,9,7,3,5,2</span>

◎ Bar Charts（棒グラフ）

spanタグにclass="bar"と指定して、「5,3,9,6,5,9,7,3,5,2」のような数値を囲むだけで棒グラフを作成できます。オプションで縦横サイズ、棒の色などを設定できます。

5,3,9,6,5,9,7,3,5,2

JavaScriptソース
$(".bar").peity("bar")
HTMLソース
<span class="bar">5,3,9,6,5,9,7,3,5,2</span>

◎ 円グラフをイベントトリガーから変更

イベントトリガーを設定してグラフの内容を変更することができます。下の例では、セレクトボックスを使って、0/5〜5/5の間で変更できます。 selected valueで初期値を設定。下側にステイタスを表示します。

JavaScriptソース
				$("select").change(function() {

  $(this)
    .siblings("span.graph")
    .text($(this).val() + "/" + 5).change()
}).change()


var chartUpdate = function(event, value, max) {

  $("#notice").text(

    "円グラフを更新： " + value + "/" + max
  )
}


$("span.graph")

  .peity("pie")

  .bind("chart:changed", chartUpdate)