Peity

Peity (听起来像deity) 是一个简单的 jQuery 插件，可以将元素内容转换为一个小的<svg>饼图，圆环图，条形图和折线图。

基本用法

HTML

<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>

JavaScript (jQuery)

$(".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-* 属性

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，然后按照说明进行操作。