Peity (听起来像deity) 是一个简单的 jQuery 插件，可以将元素内容转换为一个小的<svg>饼图，圆环图，条形图和折线图。
<span class="pie">3/5</span> <span class="donut">5,2,3</span> <span class="line">3,5,1,6,2</span> <span class="bar">2,5,3,6,2,1</span>
$(".pie").peity("pie");
$(".donut").peity("donut");
$(".line").peity("line");
$(".bar").peity("bar");
只需在一个 jQuery 选择器上简单调用peity("pie")。 饼图有两种略微区别的语义，一种是"/"，意思是“几分之几”，只有前两个值将会被绘制；另外一种是没有"/"的写法，那么所有值都包括在图表中，总值就是这些值的总和。
你也可以传递delimiter,fill,height,radius和width选项，传递一个radius将会设置正确的宽度和高度，该饼图永远是适配可用空间的圆。
HTML
<span class="pie">1/5</span> <span class="pie">226/360</span> <span class="pie">0.52/1.561</span> <span class="pie">1,4</span> <span class="pie">226,134</span> <span class="pie">0.52,1.041</span> <span class="pie">1,2,3,2,2</span>
JavaScript
$("span.pie").peity("pie")
圆环图和饼图是一样的，有着相同的选项，和一个额外的innerRadius选项，默认是半径的一半。
HTML
<span class="donut">1/5</span> <span class="donut">226/360</span> <span class="donut">0.52/1.561</span> <span class="donut">1,4</span> <span class="donut">226,134</span> <span class="donut">0.52,1.041</span> <span class="donut">1,2,3,2,2</span>
JavaScript
$('.donut').peity('donut')
折线图可以工作在一个以逗号分隔的数字列表上，可以带有下面的选项：delimiter,fill,height,max,min,stroke,strokeWidth和width。
HTML
<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>
JavaScript
$(".line").peity("line")
条形图和折线图的工作方式是相同的，可以带有下面的选项：delimiter,fill,height,max,min,padding和width。
HTML
<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>
JavaScript
$(".bar").peity("bar")
Data 属性可以用来自定义设置每个图表的的选项，显示的peity()函数的优先级要高于 data-* 属性。
HTML
<p class="data-attributes">
<span data-peity='{ "fill": ["red", "#eeeeee"], "innerRadius": 10, "radius": 40 }'>1/7</span>
<span data-peity='{ "fill": ["orange", "#eeeeee"], "innerRadius": 14, "radius": 36 }'>2/7</span>
<span data-peity='{ "fill": ["yellow", "#eeeeee"], "innerRadius": 16, "radius": 32 }'>3/7</span>
<span data-peity='{ "fill": ["green", "#eeeeee"], "innerRadius": 18, "radius": 28 }'>4/7</span>
<span data-peity='{ "fill": ["blue", "#eeeeee"], "innerRadius": 20, "radius": 24 }'>5/7</span>
<span data-peity='{ "fill": ["indigo", "#eeeeee"], "innerRadius": 18, "radius": 20 }'>6/7</span>
<span data-peity='{ "fill": ["violet", "#eeeeee"], "innerRadius": 15, "radius": 16 }'>7/7</span>
</p>
JavaScript
$(".data-attributes span").peity("donut")
饼图，圆环图和柱状图的颜色是可以基于图表的值动态设置的，。当传递一个数组，数组的值将会被循环使用。当传递的是一个函数时，每一个值都会触发一次函数调用，这样就允许你设置每一个条形或片段的颜色。该回调函数被调用时可用的参数有它的值，索引，所有值的数组，和 Array#forEach 的回调函数参数是一样的。
HTML
<span class="bar-colours-1">5,3,9,6,5,9,7,3,5,2</span> <span class="bar-colours-2">5,3,2,-1,-3,-2,2,3,5,2</span> <span class="bar-colours-3">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span> <span class="pie-colours-1">4,7,6,5</span> <span class="pie-colours-2">5,3,9,6,5</span>
JavaScript
$(".bar-colours-1").peity("bar", {
fill: ["red", "green", "blue"]
})
$(".bar-colours-2").peity("bar", {
fill: function(value) {
return value > 0 ? "green" : "red"
}
})
$(".bar-colours-3").peity("bar", {
fill: function(_, i, all) {
var g = parseInt((i / all.length) * 255)
return "rgb(255, " g ", 0)"
}
})
$(".pie-colours-1").peity("pie", {
fill: ["cyan", "magenta", "yellow", "black"]
})
$(".pie-colours-2").peity("pie", {
fill: function(_, i, all) {
var g = parseInt((i / all.length) * 255)
return "rgb(255, " g ", 0)"
}
})
可以通过改变 jQuery 选择元素的文本内容然后在它上面调用change()来更新图表。该图表将会以最初传给它的选项进行重绘。
HTML
<span class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span>
JavaScript
var updatingChart = $(".updating-chart").peity("line", { width: 64 })
setInterval(function() {
var random = Math.round(Math.random() * 10)
var values = updatingChart.text().split(",")
values.shift()
values.push(random)
updatingChart
.text(values.join(","))
.change()
}, 1000)
你可以通过 Peity 注册一个自定义的图表类型，需要提供一个名字，默认对象，和一个自定义的图表绘制函数，该绘制函数通过一个选项对象来调用。请查看现有的图表作为例子。
$.fn.peity.register('custom', {
option: defaults
}, function(opts) {
// Implementation.
}
)
Peity 为你的图表元素添加了一个 "change" 事件触发器，所以如果你更新了它们的数据，你可以通过触发change()来重新生成一个或多个图表。
HTML
<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>
<p id="notice">Nothing's happened yet.</p>
JavaScript
$('select').change(function() {
var text = $(this).val() '/' 5
$(this)
.siblings('span.graph')
.text(text)
.change()
$('#notice').text('Chart updated: ' text)
}).change()
$('span.graph').peity('pie')
默认值可以通过下面这样被全局覆盖：
$.fn.peity.defaults.pie = {
delimiter: null,
fill: ["#ff9900", "#fff4dd", "#ffd592"],
height: null,
radius: 8,
width: null
}
$.fn.peity.defaults.donut = {
delimiter: null,
fill: ["#ff9900", "#fff4dd", "#ffd592"],
height: null,
innerRadius: null,
radius: 8,
width: null
}
$.fn.peity.defaults.line = {
delimiter: ",",
fill: "#c6d9fd",
height: 16,
max: null,
min: 0,
stroke: "#4d89f9",
strokeWidth: 1,
width: 32
}
$.fn.peity.defaults.bar = {
delimiter: ",",
fill: ["#4d89f9"],
height: 16,
max: null,
min: 0,
padding: 0.1,
width: 32
}
更多用法请访问 benpickles.github.io/peity。
用下面的命令运行自动化的视觉回归测试：
make test
给测试加上过滤条件：
ARGS="--grep bar" make test
运行下面的命令手动查看所有测试用例：
make server
然后访问 http://localhost:8080/.
更新jquery.peity.js中的版本字符串，运行make release，然后按照说明进行操作。