| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | easy pie chart |
| A | 2 | ============== |
| 3 | ||
| 4 | Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. | |
| 5 | These charts are highly customizable, very easy to implement and **scale to the resolution of the display of the client to provide sharp charts even on retina displays**. | |
| 6 | ||
| 7 |  | |
| 8 | ||
| 9 | Get started | |
| 10 | ----------- | |
| 11 | ||
| 12 | To use the easy pie chart plugin you need to load the current version of jQuery (testet with 1.7.2) and the source (css+js) of the plugin. | |
| 13 | Just add the following lines to the `head` of your website: | |
| 14 | ||
| 15 | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
| 16 | <script type="text/javascript" src="/path/to/jquery.easy-pie-chart.js"></script> | |
| 17 | ||
| 18 | <link rel="stylesheet"type="text/css" href="/path/to/jquery.easy-pie-chart.css"> | |
| 19 | ||
| 20 | The second step is to add a element to your site to represent chart and add the `data-percent` attribute with the percent number the pie chart should have: | |
| 21 | ||
| 22 | <div class="chart" data-percent="73">73%</div> | |
| 23 | ||
| 24 | Finally you have to initialize the plugin with your desired configuration: | |
| 25 | ||
| 26 | <script type="text/javascript"> | |
| 27 | $(function() { | |
| 28 | $('.chart').easyPieChart({ | |
| 29 | //your configuration goes here | |
| 30 | }); | |
| 31 | }); | |
| 32 | </script> | |
| 33 | ||
| 34 | Configuration parameter | |
| 35 | ----------------------- | |
| 36 | ||
| 37 | You can pass a set of these options to the initialize function to set a custom behaviour and look for the plugin. | |
| 38 | ||
| 39 | <table> | |
| 40 | <tr> | |
| 41 | <th>Property (Type)</th> | |
| 42 | <th>Default</th> | |
| 43 | <th>Description</th> | |
| 44 | </tr> | |
| 45 | <tr> | |
| 46 | <td><strong>barColor</strong></td> | |
| 47 | <td>#ef1e25</td> | |
| 48 | <td>The color of the curcular bar. You can pass either a css valid color string like rgb, rgba hex or string colors. But you can also pass a function that accepts the current percentage as a value to return a dynamically generated color.</td> | |
| 49 | </tr> | |
| 50 | <tr> | |
| 51 | <td><strong>trackColor</strong></td> | |
| 52 | <td>#f2f2f2</td> | |
| 53 | <td>The color of the track for the bar, false to disable rendering.</td> | |
| 54 | </tr> | |
| 55 | <tr> | |
| 56 | <td><strong>scaleColor</strong></td> | |
| 57 | <td>#dfe0e0</td> | |
| 58 | <td>The color of the scale lines, false to disable rendering.</td> | |
| 59 | </tr> | |
| 60 | <tr> | |
| 61 | <td><strong>lineCap</strong></td> | |
| 62 | <td>round</td> | |
| 63 | <td>Defines how the ending of the bar line looks like. Possible values are: <code>butt</code>, <code>round</code> and <code>square</code>.</td> | |
| 64 | </tr> | |
| 65 | <tr> | |
| 66 | <td><strong>lineWidth</strong></td> | |
| 67 | <td>3</td> | |
| 68 | <td>Width of the bar line in px.</td> | |
| 69 | </tr> | |
| 70 | <tr> | |
| 71 | <td><strong>size</strong></td> | |
| 72 | <td>110</td> | |
| 73 | <td>Size of the pie chart in px. It will always be a square.</td> | |
| 74 | </tr> | |
| 75 | <tr> | |
| 76 | <td><strong>animate</strong></td> | |
| 77 | <td>false</td> | |
| 78 | <td>Time in milliseconds for a eased animation of the bar growing, or false to deactivate.</td> | |
| 79 | </tr> | |
| 80 | <tr> | |
| 81 | <td><strong>onStart</strong></td> | |
| 82 | <td>$.noop</td> | |
| 83 | <td>Callback function that is called at the start of any animation (only if animate is not false).</td> | |
| 84 | </tr> | |
| 85 | <tr> | |
| 86 | <td><strong>onStop</strong></td> | |
| 87 | <td>$.noop</td> | |
| 88 | <td>Callback function that is called at the end of any animation (only if animate is not false).</td> | |
| 89 | </tr> | |
| 90 | </table> | |
| 91 | ||
| 92 | ||
| 93 | Public plugin methods | |
| 94 | --------------------- | |
| 95 | ||
| 96 | If you want to update the current percentage of the a pie chart, you can call the `update` method. The instance of the plugin is saved in the jQuery-data. | |
| 97 | ||
| 98 | <script type="text/javascript"> | |
| 99 | $(function() { | |
| 100 | //create instance | |
| 101 | $('.chart').easyPieChart({ | |
| 102 | animate: 2000 | |
| 103 | }); | |
| 104 | //update instance after 5 sec | |
| 105 | setTimeout(function() { | |
| 106 | $('.chart').data('easyPieChart').update(40); | |
| 107 | }, 5000); | |
| 108 | }); | |
| 109 | </script> | |
| 110 | ||
| 111 | Credits | |
| 112 | ------- | |
| 113 | ||
| 114 | Thanks to [Rafal Bromirski](http://www.paranoida.com/) for making [this dribble shot](http://drbl.in/ezuc) which inspired me and [Philip Thrasher](http://philipthrasher.com/) for his [CoffeeScript jQuery boilerplate](https://github.com/pthrasher/coffee-plate) | |
