Peity Mini Chart 顯示在文中的小圖表

在寫文章或者在網站的結構上，如過有增加一下圖表或者圖片都可以大大增加瀏覽者對文章或網站的興趣，而如果在網站上有需要統計某些會變動的數值而且又不需要太過詳細的描述統計圖表的話， Peity Mini Chart 就非常適合你。Peity 是一個利用 jQuery 框架轉換一些元素到 HTML5 的 Canvas 元素對象中，可以轉換為圓餅圖、曲線圖和長條圖。因為是用到了 HTML5 的 Canvas 元素，所以並不支援 IE9 以下的版本瀏覽。

使用說明：
第一步 先載入程式需要用到的 JavaScript 檔
//使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
//載入 Peity Mini Chart 的主程式碼
<script src="jquery.peity.min.js"></script>

第二步 在 HTML 部分寫入小圖表要顯示的區塊
<div>圓餅圖<br />
    <span class="pie">1/5</span>
    <span class="pie">226/360</span>
    <span class="pie">0.52/1.561</span>
</div>
<div>曲線圖<br />
    <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>
</div>
<div>長條圖<br />
    <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>
</div>

第三步 加入 JavaScript 的程式碼
$(function(){
     $("span.pie").peity("pie");
     $("span.line").peity("line");
     $("span.bar").peity("bar");
});

附上程式可修改參數

//圓餅圖參數設定
$.fn.peity.defaults.pie = {
  colours: ["#fff4dd", "#ff9900"], //前景色,背景色
  delimeter: "/", // 分隔符號
  diameter: 16    // 圓的大小
}
//曲線圖參數設定
$.fn.peity.defaults.line = {
  colour: : "#c6d9fd",// 填滿的色彩
  strokeColour: "#4d89f9",// 線的色彩
  strokeWidth: 1,// 筆劃寬度
  delimeter: ",",// 分隔符號
  height: 16,   // 高度
  max: null,    // 最大值
  min: 0,       // 最小值
  width: 32     // 寬度
} 
//長條圖參數設定
$.fn.peity.defaults.bar = {
  colour: "#4d89f9",// 長條顏色
  delimeter: ",",   // 分殼符號
  height: 16,       // 高度
  max: null,        // 最大值
  min: 0,           // 最小值
  width: 32         // 寬度
}

作者網站：http://benpickles.github.com/peity/
檔案大小：97.4 KB (包含範例)
檔案下載：http://benpickles.github.com/peity/
檔案備份：下載