数値を書くだけで、自動的にグラフを作成してくれるjQueryプラグイン「Peity」

数値を書くだけで円グラフやら線グラフ、棒グラフを作成してくれるjQueryプラグインがあったので、メモ。

あんまり使い道なさそうなんだけど…。


まずはHTMLのソースを…

<span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>


<span class="line">5,3,9,6,5,9,7,3,5,2</span>


<span class="bar">5,3,9,6,5,9,7,3,5,2</span>


<ul>
  <li>
    <span class="graph"></span>
    <select>
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4" selected>4</option>
      <option value="5">5</option>
    </select>
  </li>
  <li>
    <span class="graph"></span>
    <select>
      <option value="0">0</option>
      <option value="1" selected>1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </li>
  <li>
    <span class="graph"></span>
    <select>
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3" selected>3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </li>
</ul>

<div class="diameter">
<span data-colour="red"    data-diameter="200">35/100</span>
<span data-colour="orange" data-diameter="36">2/7</span>
<span data-colour="yellow" data-diameter="32">3/7</span>
<span data-colour="green"  data-diameter="28">4/7</span>
<span data-colour="blue"   data-diameter="24">5/7</span>
<span data-colour="indigo" data-diameter="20">6/7</span>
<span data-colour="violet" data-diameter="16">7/7</span>
</div>

こんな感じで、要素内に数値を入れるだけで、以下のようなグラフを作成してくれちゃいます。

1/5226/3600.52/1.561



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



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

• 
  
  0 1 2 3 4 5
  


• 
  
  0 1 2 3 4 5
  


• 
  
  0 1 2 3 4 5
  

35/100
2/7
3/7
4/7
5/7
6/7
7/7

peity.jsの入手はこちらから。
http://benpickles.github.com/peity/

jQueryを読み込んだ後に、peity.jsを読み込みます。
でもって、こんな感じで設定。

<script>
$(function(){	

    $("span.pie").peity("pie");

    $(".line").peity("line");

    $(".bar").peity("bar");


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

var chartUpdate = function(event, value, max) { $("#notice").text("Chart updated: " + value + "/" + max) }

$("span.graph").peity("pie").bind("chart:changed", chartUpdate);


//サイズ、カラー指定アリの円グラフ
$(".diameter span").peity("pie", {
  colours: function() {
    return ["#dddddd", this.getAttribute("data-colour")]
  },
  diameter: function() {
    return this.getAttribute("data-diameter")
  }
})

});

</script

基本的には

    $("span.pie").peity("pie");

    $(".line").peity("line");

    $(".bar").peity("bar");

の3つだけで動くことは動くのですが、peity.jsの中身を弄ってサイズやカラー変更しなければなりません。
たとえば、円グラフの場合

 peity.add(
    'pie',
    {
      colours: ['#FFF4DD', '#FF9900'],
      delimeter: '/',
      diameter: 100
    },
    function(opts).....

赤字の部分を変更です。
colours（カラー）、delimeter（区切り記号）、diameter（グラフのサイズ）という感じです。

「Line（線グラフ）」や「Bar（棒グラフ）」も、設定場所は簡単に見つけることが出来るのでいじることは出来ますが、「サイズ、カラー指定アリの円グラフ」でやったように、data-colour="red"みたいな感じでHTMLソースで変更できるようにしておいたほうが捗ります。