html5和jQuery动态饼状图表插件

图表 图表插件 2014-11-19

控件介绍
这是一款使用html5 canvas和jQuery制作的动态饼状图表插件。该图表插件可以通过鼠标查看每一饼块的所占比例大小,使用十分方便。
浏览器兼容

支持IE10+

演示下载 1299
使用方法

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div id="container">
 
  <div class="wideBox">
    <h1>Widgets Sold in 2010</h1>
    <p>Click a colour in the chart, or an item in the table, to pull out a slice! <a href="#">Back to Tutorial</a></p>
  </div>
 
  <canvas id="chart" width="600" height="500"></canvas>
 
  <table id="chartData">
 
    <tr>
      <th>Widget</th><th>Sales ($)</th>
     </tr>
 
    <tr style="color: #0DA068">
      <td>SuperWidget</td><td>1862.12</td>
    </tr>
 
    <tr style="color: #194E9C">
      <td>MegaWidget</td><td>1316.00</td>
    </tr>
 
    <tr style="color: #ED9C13">
      <td>HyperWidget</td><td>712.49</td>
    </tr>
 
    <tr style="color: #ED5713">
      <td>WonderWidget</td><td>3236.27</td>
    </tr>
 
    <tr style="color: #057249">
      <td>MicroWidget</td><td>6122.06</td>
    </tr>
 
    <tr style="color: #5F91DC">
      <td>NanoWidget</td><td>128.11</td>
    </tr>
 
    <tr style="color: #F88E5D">
      <td>LovelyWidget</td><td>245.55</td>
    </tr>
  </table>
</div>

HTML结构非常简单,它包括:

  • 一个container作为包裹容器。
  • 一个用于绘制饼状图的HTML5 canvas。
  • 一个表格用于放置图表数据。

配置图表函数、参数和可用变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// Run the code when the DOM is ready
$( pieChart );
function pieChart() {
  // Config settings
  var chartSizePercent = 55;                        // The chart radius relative to the canvas width/height (in percent)
  var sliceBorderWidth = 1;                         // Width (in pixels) of the border around each slice
  var sliceBorderStyle = "#fff";                    // Colour of the border around each slice
  var sliceGradientColour = "#ddd";                 // Colour to use for one end of the chart gradient
  var maxPullOutDistance = 25;                      // How far, in pixels, to pull slices out when clicked
  var pullOutFrameStep = 4;                         // How many pixels to move a slice with each animation frame
  var pullOutFrameInterval = 40;                    // How long (in ms) between each animation frame
  var pullOutLabelPadding = 65;                     // Padding between pulled-out slice and its label 
  var pullOutLabelFont = "bold 16px 'Trebuchet MS', Verdana, sans-serif"// Pull-out slice label font
  var pullOutValueFont = "bold 12px 'Trebuchet MS', Verdana, sans-serif"// Pull-out slice value font
  var pullOutValuePrefix = "$";                     // Pull-out slice value prefix
  var pullOutShadowColour = "rgba( 0, 0, 0, .5 )"// Colour to use for the pull-out slice shadow
  var pullOutShadowOffsetX = 5;                     // X-offset (in pixels) of the pull-out slice shadow
  var pullOutShadowOffsetY = 5;                     // Y-offset (in pixels) of the pull-out slice shadow
  var pullOutShadowBlur = 5;                        // How much to blur the pull-out slice shadow
  var pullOutBorderWidth = 2;                       // Width (in pixels) of the pull-out slice border
  var pullOutBorderStyle = "#333";                  // Colour of the pull-out slice border
  var chartStartAngle = -.5 * Math.PI;              // Start the chart at 12 o'clock instead of 3 o'clock
  // Declare some variables for the chart
  var canvas;                       // The canvas element in the page
  var currentPullOutSlice = -1;     // The slice currently pulled out (-1 = no slice)
  var currentPullOutDistance = 0;   // How many pixels the pulled-out slice is currently pulled out in the animation
  var animationId = 0;              // Tracks the interval ID for the animation created by setInterval()
  var chartData = [];               // Chart data (labels, values, and angles)
  var chartColours = [];            // Chart colours (pulled from the HTML table)
  var totalValue = 0;               // Total of all the values in the chart
  var canvasWidth;                  // Width of the canvas, in pixels
  var canvasHeight;                 // Height of the canvas, in pixels
  var centreX;                      // X-coordinate of centre of the canvas/chart
  var centreY;                      // Y-coordinate of centre of the canvas/chart
  var chartRadius;                  // Radius of the pie chart, in pixels
  // Set things up and draw the chart
  init();

初始化图表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/**
   * Set up the chart data and colours, as well as the chart and table click handlers,
   * and draw the initial pie chart
   */
 
  function init() {
 
本文转载请注明出处:http://www.zhuiye.com/detail_44.html
评论区
  • 还没有评论,快来抢沙发吧!