2016年11月7日 星期一

網頁畫圖表 Peity

Ref :  http://benpickles.github.io/peity/

Download version 3.2.1

Uncompressed 8.7Kb
jquery.peity.js


Pie Charts

Call peity("pie") on a jQuery selection. There are two subtly different pie chart semantics, a "/" delimiter is assumed to mean "three out of five" and only the first two values will be drawn, otherwise all of the values are included in the chart and the total is the sum of all values.
You can also pass delimiterfillheightradius and width options. Passing a radius will set the correct width and height, the pie will always be a circle that fits the available space.
      

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

Donut Charts

Donut charts are the same as pie charts and take the same options with an added innerRadius option which defaults to half the radius.
      

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

Line Charts

Line charts work on a comma-separated list of digits. Line charts can take the following options: delimiterfillheightmaxminstrokestrokeWidth and 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")

Bar Charts

Bar charts work in the same way as line charts and take the following options: delimiterfillheightmaxminpadding and 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-* attributes

Data attributes can be used to pass custom settings per-chart - options explicitly passed to the peity() function take precedence over data-* attributes.
      

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

Setting Colours Dynamically

Pie, donut and bar chart colours can be defined dynamically based on the values of the chart. When passing an array its values are cycled, when passing a function it is called once for each value allowing you to define each bar or segment's colour. The callback is invoked with the value, its index, and the full array of values - the same arguments as the callback for 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)"
  }
})

Updating Charts

Charts can be updated by changing the the jQuery selection's text content and calling change() on it. The chart will be redrawn with the same options that were originally passed to it.

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)

Custom Charts

You can add a custom chart type by registering it with Peity with a name, defaults object, and custom chart drawing function which is called with an options object. See the existing charts for examples.
$.fn.peity.register('custom', {
    option: defaults
  }, function(opts) {
    // Implementation.
  }
)

Events

Peity adds a "change" event trigger to your graph elements, so if you update their data your can regenerate one or more charts by triggering change() on them.
  •  
  •  
  •  
Chart updated: 3/5

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

Default Settings

Defaults can be overridden globally like so:
$.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
}

沒有留言:

張貼留言