以下是 jquery html5图表动画圆形饼图特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery html5图表动画圆形饼图 </title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{background:#fff;color:#333;font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;font-size:0.9em;}
#container{width:900px;margin:50px auto;}
#chart, #chartData{border:1px solid #333;background:#ebedf2 url("images/gradient.png") repeat-x 0 0;}
#chart{display:block;margin:0 0 50px 0;float:left;cursor:pointer;}
#chartData{width:200px;margin:0 40px 0 0;float:right;border-collapse:collapse;box-shadow:0 0 1em rgba(0, 0, 0, 0.5);-moz-box-shadow:0 0 1em rgba(0, 0, 0, 0.5);-webkit-box-shadow:0 0 1em rgba(0, 0, 0, 0.5);background-position:0 -100px;}
#chartData th, #chartData td{padding:0.5em;border:1px dotted #666;text-align:left;}
#chartData th{border-bottom:2px solid #333;text-transform:uppercase;}
#chartData td{cursor:pointer;}
#chartData td.highlight{background:#e8e8e8;}
#chartData tr:hover td{background:#f0f0f0;}
</style>
<script src="js/jquery.min.js"></script>
<!--[if IE]>
<script src="js/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="js/pieChart.js"></script>
<div id="container">
<canvas id="chart" width="600" height="500"></canvas>
<p align="center">来源：<a href="#" target="_blank"></a></p>
<table id="chartData">
<tr>
<th>站长脚本素材</th><th>下载量</th>
</tr>
<tr style="color:#0DA068">
<td>jquery图片特效</td><td>1862.12</td>
</tr>
<tr style="color:#194E9C">
<td>jquery导航菜单</td><td>1316.00</td>
</tr>
<tr style="color:#ED9C13">
<td>jquery选项卡特效</td><td>712.49</td>
</tr>
<tr style="color:#ED5713">
<td>jquery文字特效</td><td>3236.27</td>
</tr>
<tr style="color:#057249">
<td>jquery表单特效</td><td>6122.06</td>
</tr>
<tr style="color:#5F91DC">
<td>html5特效</td><td>128.11</td>
</tr>
<tr style="color:#F88E5D">
<td>html5 图表</td><td>245.55</td>
</tr>
</table>
</div>
</body>
</html>
JS代码(excanvas.js):
// Copyright 2006 Google Inc.//// Licensed under the Apache License,Version 2.0 (the "License");
// you may not use this file except in compliance with the License.// You may obtain a copy of the License at//// http://www.apache.org/licenses/LICENSE-2.0//// Unless required by applicable law or agreed to in writing,software// distributed under the License is distributed on an "AS IS" BASIS,// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied.// See the License for the specific language governing permissions and// limitations under the License.// Known Issues://// * Patterns only support repeat.// * Radial gradient are not implemented. The VML version of these look very// different from the canvas one.// * Clipping paths are not implemented.// * Coordsize. The width and height attribute have higher priority than the// width and height style values which isn't correct.// * Painting mode isn't implemented.// * Canvas width/height should is using content-box by default. IE in// Quirks mode will draw the canvas using border-box. Either change your// doctype to HTML5// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)// or use Box Sizing Behavior from WebFX// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)// * Non uniform scaling does not correctly scale strokes.// * Optimize. There is always room for speed improvements.// Only add this code if we do not already have a canvas implementationif (!document.createElement('canvas').getContext){
(function(){
// alias some functions to make (compiled) code shorter var m = Math;
var mr = m.round;
var ms = m.sin;
var mc = m.cos;
var abs = m.abs;
var sqrt = m.sqrt;
// this is used for sub pixel precision var Z = 10;
var Z2 = Z / 2;
var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
/** * This funtion is assigned to the <canvas> elements as element.getContext(). * @this{
HTMLElement}
* @return{
CanvasRenderingContext2D_}
*/
function getContext(){
return this.context_ || (this.context_ = new CanvasRenderingContext2D_(this));
}
var slice = Array.prototype.slice;
/** * Binds a function to an object. The returned function will always use the * passed in{
@code obj}
as{
@code this}
. * * Example:* * g = bind(f,obj,a,b) * g(c,d) // will do f.call(obj,a,b,c,d) * * @param{
Function}
f The function to bind the object to * @param{
Object}
obj The object that should act as this when the function * is called * @param{
*}
var_args Rest arguments that will be used as the initial * arguments when the function is called * @return{
Function}
A new function that has bound this */
function bind(f,obj,var_args){
var a = slice.call(arguments,2);
return function(){
return f.apply(obj,a.concat(slice.call(arguments)));
}
;
}
function encodeHtmlAttribute(s){
return String(s).replace(/&/g,'&
').replace(/"/g,'"
');
}
function addNamespace(doc,prefix,urn){
if (!doc.namespaces[prefix]){
doc.namespaces.add(prefix,urn,'#default#VML');
}
}
function addNamespacesAndStylesheet(doc){
addNamespace(doc,'g_vml_','urn:schemas-microsoft-com:vml');
addNamespace(doc,'g_o_','urn:schemas-microsoft-com:office:office');
// Setup default CSS. Only add one style sheet per document if (!doc.styleSheets['ex_canvas_']){
var ss = doc.createStyleSheet();
ss.owningElement.id = 'ex_canvas_';
ss.cssText = 'canvas{
display:inline-block;
overflow:hidden;
' + // default size is 300x150 in Gecko and Opera 'text-align:left;
width:300px;
height:150px}
';
}
}
// Add namespaces and stylesheet at startup. addNamespacesAndStylesheet(document);
var G_vmlCanvasManager_ ={
init:function(opt_doc){
var doc = opt_doc || document;
// Create a dummy element so that IE will allow canvas elements to be // recognized. doc.createElement('canvas');
doc.attachEvent('onreadystatechange',bind(this.init_,this,doc));
}
,init_:function(doc){
// find all canvas elements var els = doc.getElementsByTagName('canvas');
for (var i = 0;
i < els.length;
i++){
this.initElement(els[i]);
}
}
,/** * Public initializes a canvas element so that it can be used as canvas * element from now on. This is called automatically before the page is * loaded but if you are creating elements using createElement you need to * make sure this is called on the element. * @param{
HTMLElement}
el The canvas element to initialize. * @return{
HTMLElement}
the element that was created. */
initElement:function(el){
if (!el.getContext){
el.getContext = getContext;
// Add namespaces and stylesheet to document of the element. addNamespacesAndStylesheet(el.ownerDocument);
// Remove fallback content. There is no way to hide text nodes so we // just remove all childNodes. We could hide all elements and remove // text nodes but who really cares about the fallback content. el.innerHTML = '';
// do not use inline function because that will leak memory el.attachEvent('onpropertychange',onPropertyChange);
el.attachEvent('onresize',onResize);
var attrs = el.attributes;
if (attrs.width && attrs.width.specified){
// TODO:use runtimeStyle and coordsize // el.getContext().setWidth_(attrs.width.nodeValue);
el.style.width = attrs.width.nodeValue + 'px';
}
else{
el.width = el.clientWidth;
}
if (attrs.height && attrs.height.specified){
// TODO:use runtimeStyle and coordsize // el.getContext().setHeight_(attrs.height.nodeValue);
el.style.height = attrs.height.nodeValue + 'px';
}
else{
el.height = el.clientHeight;
}
//el.getContext().setCoordsize_()}
return el;
}
}
;
function onPropertyChange(e){
var el = e.srcElement;
switch (e.propertyName){
case 'width':el.getContext().clearRect();
el.style.width = el.attributes.width.nodeValue + 'px';
// In IE8 this does not trigger onresize. el.firstChild.style.width = el.clientWidth + 'px';
break;
case 'height':el.getContext().clearRect();
el.style.height = el.attributes.height.nodeValue + 'px';
el.firstChild.style.height = el.clientHeight + 'px';
break;
}
}
function onResize(e){
var el = e.srcElement;
if (el.firstChild){
el.firstChild.style.width = el.clientWidth + 'px';
el.firstChild.style.height = el.clientHeight + 'px';
}
}
G_vmlCanvasManager_.init();
// precompute "00" to "FF" var decToHex = [];
for (var i = 0;
i < 16;
i++){
for (var j = 0;
j < 16;
j++){
decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
}
}
function createMatrixIdentity(){
return [ [1,0,0],[0,1,0],[0,0,1] ];
}
function matrixMultiply(m1,m2){
var result = createMatrixIdentity();
for (var x = 0;
x < 3;
x++){
for (var y = 0;
y < 3;
y++){
var sum = 0;
for (var z = 0;
z < 3;
z++){
sum += m1[x][z] * m2[z][y];
}
result[x][y] = sum;
}
}
return result;
}
function copyState(o1,o2){
o2.fillStyle = o1.fillStyle;
o2.lineCap = o1.lineCap;
o2.lineJoin = o1.lineJoin;
o2.lineWidth = o1.lineWidth;
o2.miterLimit = o1.miterLimit;
o2.shadowBlur = o1.shadowBlur;
o2.shadowColor = o1.shadowColor;
o2.shadowOffsetX = o1.shadowOffsetX;
o2.shadowOffsetY = o1.shadowOffsetY;
o2.strokeStyle = o1.strokeStyle;
o2.globalAlpha = o1.globalAlpha;
o2.font = o1.font;
o2.textAlign = o1.textAlign;
o2.textBaseline = o1.textBaseline;
o2.arcScaleX_ = o1.arcScaleX_;
o2.arcScaleY_ = o1.arcScaleY_;
o2.lineScale_ = o1.lineScale_;
}
var colorData ={
aliceblue:'#F0F8FF',antiquewhite:'#FAEBD7',aquamarine:'#7FFFD4',azure:'#F0FFFF',beige:'#F5F5DC',bisque:'#FFE4C4',black:'#000000',blanchedalmond:'#FFEBCD',blueviolet:'#8A2BE2',brown:'#A52A2A',burlywood:'#DEB887',cadetblue:'#5F9EA0',chartreuse:'#7FFF00',chocolate:'#D2691E',coral:'#FF7F50',cornflowerblue:'#6495ED',cornsilk:'#FFF8DC',crimson:'#DC143C',cyan:'#00FFFF',darkblue:'#00008B',darkcyan:'#008B8B',darkgoldenrod:'#B8860B',darkgray:'#A9A9A9',darkgreen:'#006400',darkgrey:'#A9A9A9',darkkhaki:'#BDB76B',darkmagenta:'#8B008B',darkolivegreen:'#556B2F',darkorange:'#FF8C00',darkorchid:'#9932CC',darkred:'#8B0000',darksalmon:'#E9967A',darkseagreen:'#8FBC8F',darkslateblue:'#483D8B',darkslategray:'#2F4F4F',darkslategrey:'#2F4F4F',darkturquoise:'#00CED1',darkviolet:'#9400D3',deeppink:'#FF1493',deepskyblue:'#00BFFF',dimgray:'#696969',dimgrey:'#696969',dodgerblue:'#1E90FF',firebrick:'#B22222',floralwhite:'#FFFAF0',forestgreen:'#228B22',gainsboro:'#DCDCDC',ghostwhite:'#F8F8FF',gold:'#FFD700',goldenrod:'#DAA520',grey:'#808080',greenyellow:'#ADFF2F',honeydew:'#F0FFF0',hotpink:'#FF69B4',indianred:'#CD5C5C',indigo:'#4B0082',ivory:'#FFFFF0',khaki:'#F0E68C',lavender:'#E6E6FA',lavenderblush:'#FFF0F5',lawngreen:'#7CFC00',lemonchiffon:'#FFFACD',lightblue:'#ADD8E6',lightcoral:'#F08080',lightcyan:'#E0FFFF',lightgoldenrodyellow:'#FAFAD2',lightgreen:'#90EE90',lightgrey:'#D3D3D3',lightpink:'#FFB6C1',lightsalmon:'#FFA07A',lightseagreen:'#20B2AA',lightskyblue:'#87CEFA',lightslategray:'#778899',lightslategrey:'#778899',lightsteelblue:'#B0C4DE',lightyellow:'#FFFFE0',limegreen:'#32CD32',linen:'#FAF0E6',magenta:'#FF00FF',mediumaquamarine:'#66CDAA',mediumblue:'#0000CD',mediumorchid:'#BA55D3',mediumpurple:'#9370DB',mediumseagreen:'#3CB371',mediumslateblue:'#7B68EE',mediumspringgreen:'#00FA9A',mediumturquoise:'#48D1CC',mediumvioletred:'#C71585',midnightblue:'#191970',mintcream:'#F5FFFA',mistyrose:'#FFE4E1',moccasin:'#FFE4B5',navajowhite:'#FFDEAD',oldlace:'#FDF5E6',olivedrab:'#6B8E23',orange:'#FFA500',orangered:'#FF4500',orchid:'#DA70D6',palegoldenrod:'#EEE8AA',palegreen:'#98FB98',paleturquoise:'#AFEEEE',palevioletred:'#DB7093',papayawhip:'#FFEFD5',peachpuff:'#FFDAB9',peru:'#CD853F',pink:'#FFC0CB',plum:'#DDA0DD',powderblue:'#B0E0E6',rosybrown:'#BC8F8F',royalblue:'#4169E1',saddlebrown:'#8B4513',salmon:'#FA8072',sandybrown:'#F4A460',seagreen:'#2E8B57',seashell:'#FFF5EE',sienna:'#A0522D',skyblue:'#87CEEB',slateblue:'#6A5ACD',slategray:'#708090',slategrey:'#708090',snow:'#FFFAFA',springgreen:'#00FF7F',steelblue:'#4682B4',tan:'#D2B48C',thistle:'#D8BFD8',tomato:'#FF6347',turquoise:'#40E0D0',violet:'#EE82EE',wheat:'#F5DEB3',whitesmoke:'#F5F5F5',yellowgreen:'#9ACD32'}
;
function getRgbHslContent(styleString){
var start = styleString.indexOf('(',3);
var end = styleString.indexOf(')',start + 1);
var parts = styleString.substring(start + 1,end).split(',');
// add alpha if needed if (parts.length != 4 || styleString.charAt(3) != 'a'){
parts[3] = 1;
}
return parts;
}
function percent(s){
return parseFloat(s) / 100;
}
function clamp(v,min,max){
return Math.min(max,Math.max(min,v));
}
function hslToRgb(parts){
var r,g,b,h,s,l;
h = parseFloat(parts[0]) / 360 % 360;
if (h < 0) h++;
s = clamp(percent(parts[1]),0,1);
l = clamp(percent(parts[2]),0,1);
if (s == 0){
r = g = b = l;
// achromatic}
else{
var q = l < 0.5 ? l * (1 + s):l + s - l * s;
var p = 2 * l - q;
r = hueToRgb(p,q,h + 1 / 3);
g = hueToRgb(p,q,h);
b = hueToRgb(p,q,h - 1 / 3);
}
return '#' + decToHex[Math.floor(r * 255)] + decToHex[Math.floor(g * 255)] + decToHex[Math.floor(b * 255)];
}
function hueToRgb(m1,m2,h){
if (h < 0) h++;
if (h > 1) h--;
if (6 * h < 1) return m1 + (m2 - m1) * 6 * h;
else if (2 * h < 1) return m2;
else if (3 * h < 2) return m1 + (m2 - m1) * (2 / 3 - h) * 6;
else return m1;
}
var processStyleCache ={
}
;
function processStyle(styleString){
if (styleString in processStyleCache){
return processStyleCache[styleString];
}
var str,alpha = 1;
styleString = String(styleString);
if (styleString.charAt(0) == '#'){
str = styleString;
}
else if (/^rgb/.test(styleString)){
var parts = getRgbHslContent(styleString);
var str = '#',n;
for (var i = 0;
i < 3;
i++){
if (parts[i].indexOf('%') != -1){
n = Math.floor(percent(parts[i]) * 255);
}
else{
n = +parts[i];
}
str += decToHex[clamp(n,0,255)];
}
alpha = +parts[3];
}
else if (/^hsl/.test(styleString)){
var parts = getRgbHslContent(styleString);
str = hslToRgb(parts);
alpha = parts[3];
}
else{
str = colorData[styleString] || styleString;
}
return processStyleCache[styleString] ={
color:str,alpha:alpha}
;
}
var DEFAULT_STYLE ={
style:'normal',variant:'normal',weight:'normal',size:10,family:'sans-serif'}
;
// Internal text style cache var fontStyleCache ={
}
;
function processFontStyle(styleString){
if (fontStyleCache[styleString]){
return fontStyleCache[styleString];
}
var el = document.createElement('div');
var style = el.style;
try{
style.font = styleString;
}
catch (ex){
// Ignore failures to set to invalid font.}
return fontStyleCache[styleString] ={
style:style.fontStyle || DEFAULT_STYLE.style,variant:style.fontVariant || DEFAULT_STYLE.variant,weight:style.fontWeight || DEFAULT_STYLE.weight,size:style.fontSize || DEFAULT_STYLE.size,family:style.fontFamily || DEFAULT_STYLE.family}
;
}
function getComputedStyle(style,element){
var computedStyle ={
}
;
for (var p in style){
computedStyle[p] = style[p];
}
// Compute the size var canvasFontSize = parseFloat(element.currentStyle.fontSize),fontSize = parseFloat(style.size);
if (typeof style.size == 'number'){
computedStyle.size = style.size;
}
else if (style.size.indexOf('px') != -1){
computedStyle.size = fontSize;
}
else if (style.size.indexOf('em') != -1){
computedStyle.size = canvasFontSize * fontSize;
}
else if(style.size.indexOf('%') != -1){
computedStyle.size = (canvasFontSize / 100) * fontSize;
}
else if (style.size.indexOf('pt') != -1){
computedStyle.size = fontSize / .75;
}
else{
computedStyle.size = canvasFontSize;
}
// Different scaling between normal text and VML text. This was found using // trial and error to get the same size as non VML text. computedStyle.size *= 0.981;
return computedStyle;
}
function buildStyle(style){
return style.style + ' ' + style.variant + ' ' + style.weight + ' ' + style.size + 'px ' + style.family;
}
var lineCapMap ={
'butt':'flat','round':'round'}
;
function processLineCap(lineCap){
return lineCapMap[lineCap] || 'square';
}
/** * This class implements CanvasRenderingContext2D interface as described by * the WHATWG. * @param{
HTMLElement}
canvasElement The element that the 2D context should * be associated with */
function CanvasRenderingContext2D_(canvasElement){
this.m_ = createMatrixIdentity();
this.mStack_ = [];
this.aStack_ = [];
this.currentPath_ = [];
// Canvas context properties this.strokeStyle = '#000';
this.fillStyle = '#000';
this.lineWidth = 1;
this.lineJoin = 'miter';
this.lineCap = 'butt';
this.miterLimit = Z * 1;
this.globalAlpha = 1;
this.font = '10px sans-serif';
this.textAlign = 'left';
this.textBaseline = 'alphabetic';
this.canvas = canvasElement;
var cssText = 'width:' + canvasElement.clientWidth + 'px;
height:' + canvasElement.clientHeight + 'px;
overflow:hidden;
position:absolute';
var el = canvasElement.ownerDocument.createElement('div');
el.style.cssText = cssText;
canvasElement.appendChild(el);
var overlayEl = el.cloneNode(false);
// Use a non transparent background. overlayEl.style.backgroundColor = 'red';
overlayEl.style.filter = 'alpha(opacity=0)';
canvasElement.appendChild(overlayEl);
this.element_ = el;
this.arcScaleX_ = 1;
this.arcScaleY_ = 1;
this.lineScale_ = 1;
}
var contextPrototype = CanvasRenderingContext2D_.prototype;
contextPrototype.clearRect = function(){
if (this.textMeasureEl_){
this.textMeasureEl_.removeNode(true);
this.textMeasureEl_ = null;
}
this.element_.innerHTML = '';
}
;
contextPrototype.beginPath = function(){
// TODO:Branch current matrix so that save/restore has no effect // as per safari docs. this.currentPath_ = [];
}
;
contextPrototype.moveTo = function(aX,aY){
var p = getCoords(this,aX,aY);
this.currentPath_.push({
type:'moveTo',x:p.x,y:p.y}
);
this.currentX_ = p.x;
this.currentY_ = p.y;
}
;
contextPrototype.lineTo = function(aX,aY){
var p = getCoords(this,aX,aY);
this.currentPath_.push({
type:'lineTo',x:p.x,y:p.y}
);
this.currentX_ = p.x;
this.currentY_ = p.y;
}
;
contextPrototype.bezierCurveTo = function(aCP1x,aCP1y,aCP2x,aCP2y,aX,aY){
var p = getCoords(this,aX,aY);
var cp1 = getCoords(this,aCP1x,aCP1y);
var cp2 = getCoords(this,aCP2x,aCP2y);
bezierCurveTo(this,cp1,cp2,p);
}
;
// Helper function that takes the already fixed cordinates. function bezierCurveTo(self,cp1,cp2,p){
self.currentPath_.push({
type:'bezierCurveTo',cp1x:cp1.x,cp1y:cp1.y,cp2x:cp2.x,cp2y:cp2.y,x:p.x,y:p.y}
);
self.currentX_ = p.x;
self.currentY_ = p.y;
}
contextPrototype.quadraticCurveTo = function(aCPx,aCPy,aX,aY){
// the following is lifted almost directly from // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes var cp = getCoords(this,aCPx,aCPy);
var p = getCoords(this,aX,aY);
var cp1 ={
x:this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),y:this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)}
;
var cp2 ={
x:cp1.x + (p.x - this.currentX_) / 3.0,y:cp1.y + (p.y - this.currentY_) / 3.0}
;
bezierCurveTo(this,cp1,cp2,p);
}
;
contextPrototype.arc = function(aX,aY,aRadius,aStartAngle,aEndAngle,aClockwise){
aRadius *= Z;
var arcType = aClockwise ? 'at':'wa';
var xStart = aX + mc(aStartAngle) * aRadius - Z2;
var yStart = aY + ms(aStartAngle) * aRadius - Z2;
var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
// IE won't render arches drawn counter clockwise if xStart == xEnd. if (xStart == xEnd && !aClockwise){
xStart += 0.125;
// Offset xStart by 1/80 of a pixel. Use something // that can be represented in binary}
var p = getCoords(this,aX,aY);
var pStart = getCoords(this,xStart,yStart);
var pEnd = getCoords(this,xEnd,yEnd);
this.currentPath_.push({
type:arcType,x:p.x,y:p.y,radius:aRadius,xStart:pStart.x,yStart:pStart.y,xEnd:pEnd.x,yEnd:pEnd.y}
);
}
;
contextPrototype.rect = function(aX,aY,aWidth,aHeight){
this.moveTo(aX,aY);
this.lineTo(aX + aWidth,aY);
this.lineTo(aX + aWidth,aY + aHeight);
this.lineTo(aX,aY + aHeight);
this.closePath();
}
;
contextPrototype.strokeRect = function(aX,aY,aWidth,aHeight){
var oldPath = this.currentPath_;
this.beginPath();
this.moveTo(aX,aY);
this.lineTo(aX + aWidth,aY);
this.lineTo(aX + aWidth,aY + aHeight);
this.lineTo(aX,aY + aHeight);
this.closePath();
this.stroke();
this.currentPath_ = oldPath;
}
;
contextPrototype.fillRect = function(aX,aY,aWidth,aHeight){
var oldPath = this.currentPath_;
this.beginPath();
this.moveTo(aX,aY);
this.lineTo(aX + aWidth,aY);
this.lineTo(aX + aWidth,aY + aHeight);
this.lineTo(aX,aY + aHeight);
this.closePath();
this.fill();
this.currentPath_ = oldPath;
}
;
contextPrototype.createLinearGradient = function(aX0,aY0,aX1,aY1){
var gradient = new CanvasGradient_('gradient');
gradient.x0_ = aX0;
gradient.y0_ = aY0;
gradient.x1_ = aX1;
gradient.y1_ = aY1;
return gradient;
}
;
contextPrototype.createRadialGradient = function(aX0,aY0,aR0,aX1,aY1,aR1){
var gradient = new CanvasGradient_('gradientradial');
gradient.x0_ = aX0;
gradient.y0_ = aY0;
gradient.r0_ = aR0;
gradient.x1_ = aX1;
gradient.y1_ = aY1;
gradient.r1_ = aR1;
return gradient;
}
;
contextPrototype.drawImage = function(image,var_args){
var dx,dy,dw,dh,sx,sy,sw,sh;
// to find the original width we overide the width and height var oldRuntimeWidth = image.runtimeStyle.width;
var oldRuntimeHeight = image.runtimeStyle.height;
image.runtimeStyle.width = 'auto';
image.runtimeStyle.height = 'auto';
// get the original size var w = image.width;
var h = image.height;
// and remove overides image.runtimeStyle.width = oldRuntimeWidth;
image.runtimeStyle.height = oldRuntimeHeight;
if (arguments.length == 3){
dx = arguments[1];
dy = arguments[2];
sx = sy = 0;
sw = dw = w;
sh = dh = h;
}
else if (arguments.length == 5){
dx = arguments[1];
dy = arguments[2];
dw = arguments[3];
dh = arguments[4];
sx = sy = 0;
sw = w;
sh = h;
}
else if (arguments.length == 9){
sx = arguments[1];
sy = arguments[2];
sw = arguments[3];
sh = arguments[4];
dx = arguments[5];
dy = arguments[6];
dw = arguments[7];
dh = arguments[8];
}
else{
throw Error('Invalid number of arguments');
}
var d = getCoords(this,dx,dy);
var w2 = sw / 2;
var h2 = sh / 2;
var vmlStr = [];
var W = 10;
var H = 10;
// For some reason that I've now forgotten,using divs didn't work vmlStr.push(' <g_vml_:group',' coordsize="',Z * W,',',Z * H,'"',' coordorigin="0,0"',' style="width:',W,'px;
height:',H,'px;
position:absolute;
');
// If filters are necessary (rotation exists),create them // filters are bog-slow,so only create them if abbsolutely necessary // The following check doesn't account for skews (which don't exist // in the canvas spec (yet) anyway. if (this.m_[0][0] != 1 || this.m_[0][1] || this.m_[1][1] != 1 || this.m_[1][0]){
var filter = [];
// Note the 12/21 reversal filter.push('M11=',this.m_[0][0],',','M12=',this.m_[1][0],',','M21=',this.m_[0][1],',','M22=',this.m_[1][1],',','Dx=',mr(d.x / Z),',','Dy=',mr(d.y / Z),'');
// Bounding box calculation (need to minimize displayed area so that // filters don't waste time on unused pixels. var max = d;
var c2 = getCoords(this,dx + dw,dy);
var c3 = getCoords(this,dx,dy + dh);
var c4 = getCoords(this,dx + dw,dy + dh);
max.x = m.max(max.x,c2.x,c3.x,c4.x);
max.y = m.max(max.y,c2.y,c3.y,c4.y);
vmlStr.push('padding:0 ',mr(max.x / Z),'px ',mr(max.y / Z),'px 0;
filter:progid:DXImageTransform.Microsoft.Matrix(',filter.join(''),",sizingmethod='clip');
");
}
else{
vmlStr.push('top:',mr(d.y / Z),'px;
left:',mr(d.x / Z),'px;
');
}
vmlStr.push(' ">','<g_vml_:image src="',image.src,'"',' style="width:',Z * dw,'px;
',' height:',Z * dh,'px"',' cropleft="',sx / w,'"',' croptop="',sy / h,'"',' cropright="',(w - sx - sw) / w,'"',' cropbottom="',(h - sy - sh) / h,'"',' />','</g_vml_:group>');
this.element_.insertAdjacentHTML('BeforeEnd',vmlStr.join(''));
}
;
contextPrototype.stroke = function(aFill){
var lineStr = [];
var lineOpen = false;
var W = 10;
var H = 10;
lineStr.push('<g_vml_:shape',' filled="',!!aFill,'"',' style="position:absolute;
width:',W,'px;
height:',H,'px;
"',' coordorigin="0,0"',' coordsize="',Z * W,',',Z * H,'"',' stroked="',!aFill,'"',' path="');
var newSeq = false;
var min ={
x:null,y:null}
;
var max ={
x:null,y:null}
;
for (var i = 0;
i < this.currentPath_.length;
i++){
var p = this.currentPath_[i];
var c;
switch (p.type){
case 'moveTo':c = p;
lineStr.push(' m ',mr(p.x),',',mr(p.y));
break;
case 'lineTo':lineStr.push(' l ',mr(p.x),',',mr(p.y));
break;
case 'close':lineStr.push(' x ');
p = null;
break;
case 'bezierCurveTo':lineStr.push(' c ',mr(p.cp1x),',',mr(p.cp1y),',',mr(p.cp2x),',',mr(p.cp2y),',',mr(p.x),',',mr(p.y));
break;
case 'at':case 'wa':lineStr.push(' ',p.type,' ',mr(p.x - this.arcScaleX_ * p.radius),',',mr(p.y - this.arcScaleY_ * p.radius),' ',mr(p.x + this.arcScaleX_ * p.radius),',',mr(p.y + this.arcScaleY_ * p.radius),' ',mr(p.xStart),',',mr(p.yStart),' ',mr(p.xEnd),',',mr(p.yEnd));
break;
}
// TODO:Following is broken for curves due to // move to proper paths. // Figure out dimensions so we can do gradient fills // properly if (p){
if (min.x == null || p.x < min.x){
min.x = p.x;
}
if (max.x == null || p.x > max.x){
max.x = p.x;
}
if (min.y == null || p.y < min.y){
min.y = p.y;
}
if (max.y == null || p.y > max.y){
max.y = p.y;
}
}
}
lineStr.push(' ">');
if (!aFill){
appendStroke(this,lineStr);
}
else{
appendFill(this,lineStr,min,max);
}
lineStr.push('</g_vml_:shape>');
this.element_.insertAdjacentHTML('beforeEnd',lineStr.join(''));
}
;
function appendStroke(ctx,lineStr){
var a = processStyle(ctx.strokeStyle);
var color = a.color;
var opacity = a.alpha * ctx.globalAlpha;
var lineWidth = ctx.lineScale_ * ctx.lineWidth;
// VML cannot correctly render a line if the width is less than 1px. // In that case,we dilute the color to make the line look thinner. if (lineWidth < 1){
opacity *= lineWidth;
}
lineStr.push( '<g_vml_:stroke',' opacity="',opacity,'"',' joinstyle="',ctx.lineJoin,'"',' miterlimit="',ctx.miterLimit,'"',' endcap="',processLineCap(ctx.lineCap),'"',' weight="',lineWidth,'px"',' color="',color,'" />' );
}
function appendFill(ctx,lineStr,min,max){
var fillStyle = ctx.fillStyle;
var arcScaleX = ctx.arcScaleX_;
var arcScaleY = ctx.arcScaleY_;
var width = max.x - min.x;
var height = max.y - min.y;
if (fillStyle instanceof CanvasGradient_){
// TODO:Gradients transformed with the transformation matrix. var angle = 0;
var focus ={
x:0,y:0}
;
// additional offset var shift = 0;
// scale factor for offset var expansion = 1;
if (fillStyle.type_ == 'gradient'){
var x0 = fillStyle.x0_ / arcScaleX;
var y0 = fillStyle.y0_ / arcScaleY;
var x1 = fillStyle.x1_ / arcScaleX;
var y1 = fillStyle.y1_ / arcScaleY;
var p0 = getCoords(ctx,x0,y0);
var p1 = getCoords(ctx,x1,y1);
var dx = p1.x - p0.x;
var dy = p1.y - p0.y;
angle = Math.atan2(dx,dy) * 180 / Math.PI;
// The angle should be a non-negative number. if (angle < 0){
angle += 360;
}
// Very small angles produce an unexpected result because they are // converted to a scientific notation string. if (angle < 1e-6){
angle = 0;
}
}
else{
var p0 = getCoords(ctx,fillStyle.x0_,fillStyle.y0_);
focus ={
x:(p0.x - min.x) / width,y:(p0.y - min.y) / height}
;
width /= arcScaleX * Z;
height /= arcScaleY * Z;
var dimension = m.max(width,height);
shift = 2 * fillStyle.r0_ / dimension;
expansion = 2 * fillStyle.r1_ / dimension - shift;
}
// We need to sort the color stops in ascending order by offset,// otherwise IE won't interpret it correctly. var stops = fillStyle.colors_;
stops.sort(function(cs1,cs2){
return cs1.offset - cs2.offset;
}
);
var length = stops.length;
var color1 = stops[0].color;
var color2 = stops[length - 1].color;
var opacity1 = stops[0].alpha * ctx.globalAlpha;
var opacity2 = stops[length - 1].alpha * ctx.globalAlpha;
var colors = [];
for (var i = 0;
i < length;
i++){
var stop = stops[i];
colors.push(stop.offset * expansion + shift + ' ' + stop.color);
}
// When colors attribute is used,the meanings of opacity and o:opacity2 // are reversed. lineStr.push('<g_vml_:fill type="',fillStyle.type_,'"',' method="none" focus="100%"',' color="',color1,'"',' color2="',color2,'"',' colors="',colors.join(','),'"',' opacity="',opacity2,'"',' g_o_:opacity2="',opacity1,'"',' angle="',angle,'"',' focusposition="',focus.x,',',focus.y,'" />');
}
else if (fillStyle instanceof CanvasPattern_){
if (width && height){
var deltaLeft = -min.x;
var deltaTop = -min.y;
lineStr.push('<g_vml_:fill',' position="',deltaLeft / width * arcScaleX * arcScaleX,',',deltaTop / height * arcScaleY * arcScaleY,'"',' type="tile"',// TODO:Figure out the correct size to fit the scale. //' size="',w,'px ',h,'px"',' src="',fillStyle.src_,'" />');
}
}
else{
var a = processStyle(ctx.fillStyle);
var color = a.color;
var opacity = a.alpha * ctx.globalAlpha;
lineStr.push('<g_vml_:fill color="',color,'" opacity="',opacity,'" />');
}
}
contextPrototype.fill = function(){
this.stroke(true);
}
;
contextPrototype.closePath = function(){
this.currentPath_.push({
type:'close'}
);
}
;
function getCoords(ctx,aX,aY){
var m = ctx.m_;
return{
x:Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,y:Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2}
;
}
;
contextPrototype.save = function(){
var o ={
}
;
copyState(this,o);
this.aStack_.push(o);
this.mStack_.push(this.m_);
this.m_ = matrixMultiply(createMatrixIdentity(),this.m_);
}
;
contextPrototype.restore = function(){
if (this.aStack_.length){
copyState(this.aStack_.pop(),this);
this.m_ = this.mStack_.pop();
}
}
;
function matrixIsFinite(m){
return isFinite(m[0][0]) && isFinite(m[0][1]) && isFinite(m[1][0]) && isFinite(m[1][1]) && isFinite(m[2][0]) && isFinite(m[2][1]);
}
function setM(ctx,m,updateLineScale){
if (!matrixIsFinite(m)){
return;
}
ctx.m_ = m;
if (updateLineScale){
// Get the line scale. // Determinant of this.m_ means how much the area is enlarged by the // transformation. So its square root can be used as a scale factor // for width. var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
ctx.lineScale_ = sqrt(abs(det));
}
}
contextPrototype.translate = function(aX,aY){
var m1 = [ [1,0,0],[0,1,0],[aX,aY,1] ];
setM(this,matrixMultiply(m1,this.m_),false);
}
;
contextPrototype.rotate = function(aRot){
var c = mc(aRot);
var s = ms(aRot);
var m1 = [ [c,s,0],[-s,c,0],[0,0,1] ];
setM(this,matrixMultiply(m1,this.m_),false);
}
;
contextPrototype.scale = function(aX,aY){
this.arcScaleX_ *= aX;
this.arcScaleY_ *= aY;
var m1 = [ [aX,0,0],[0,aY,0],[0,0,1] ];
setM(this,matrixMultiply(m1,this.m_),true);
}
;
contextPrototype.transform = function(m11,m12,m21,m22,dx,dy){
var m1 = [ [m11,m12,0],[m21,m22,0],[dx,dy,1] ];
setM(this,matrixMultiply(m1,this.m_),true);
}
;
contextPrototype.setTransform = function(m11,m12,m21,m22,dx,dy){
var m = [ [m11,m12,0],[m21,m22,0],[dx,dy,1] ];
setM(this,m,true);
}
;
/** * The text drawing function. * The maxWidth argument isn't taken in account,since no browser supports * it yet. */
contextPrototype.drawText_ = function(text,x,y,maxWidth,stroke){
var m = this.m_,delta = 1000,left = 0,right = delta,offset ={
x:0,y:0}
,lineStr = [];
var fontStyle = getComputedStyle(processFontStyle(this.font),this.element_);
var fontStyleString = buildStyle(fontStyle);
var elementStyle = this.element_.currentStyle;
var textAlign = this.textAlign.toLowerCase();
switch (textAlign){
case 'left':case 'center':case 'right':break;
case 'end':textAlign = elementStyle.direction == 'ltr' ? 'right':'left';
break;
case 'start':textAlign = elementStyle.direction == 'rtl' ? 'right':'left';
break;
default:textAlign = 'left';
}
// 1.75 is an arbitrary number,as there is no info about the text baseline switch (this.textBaseline){
case 'hanging':case 'top':offset.y = fontStyle.size / 1.75;
break;
case 'middle':break;
default:case null:case 'alphabetic':case 'ideographic':case 'bottom':offset.y = -fontStyle.size / 2.25;
break;
}
switch(textAlign){
case 'right':left = delta;
right = 0.05;
break;
case 'center':left = right = delta / 2;
break;
}
var d = getCoords(this,x + offset.x,y + offset.y);
lineStr.push('<g_vml_:line from="',-left,' 0" to="',right,' 0.05" ',' coordsize="100 100" coordorigin="0 0"',' filled="',!stroke,'" stroked="',!!stroke,'" style="position:absolute;
width:1px;
height:1px;
">');
if (stroke){
appendStroke(this,lineStr);
}
else{
// TODO:Fix the min and max params. appendFill(this,lineStr,{
x:-left,y:0}
,{
x:right,y:fontStyle.size}
);
}
var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' + m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0';
var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z);
lineStr.push('<g_vml_:skew on="t" matrix="',skewM,'" ',' offset="',skewOffset,'" origin="',left,' 0" />','<g_vml_:path textpathok="true" />','<g_vml_:textpath on="true" string="',encodeHtmlAttribute(text),'" style="v-text-align:',textAlign,';
font:',encodeHtmlAttribute(fontStyleString),'" /></g_vml_:line>');
this.element_.insertAdjacentHTML('beforeEnd',lineStr.join(''));
}
;
contextPrototype.fillText = function(text,x,y,maxWidth){
this.drawText_(text,x,y,maxWidth,false);
}
;
contextPrototype.strokeText = function(text,x,y,maxWidth){
this.drawText_(text,x,y,maxWidth,true);
}
;
contextPrototype.measureText = function(text){
if (!this.textMeasureEl_){
var s = '<span style="position:absolute;
' + 'top:-20000px;
left:0;
padding:0;
margin:0;
border:none;
' + 'white-space:pre;
"></span>';
this.element_.insertAdjacentHTML('beforeEnd',s);
this.textMeasureEl_ = this.element_.lastChild;
}
var doc = this.element_.ownerDocument;
this.textMeasureEl_.innerHTML = '';
this.textMeasureEl_.style.font = this.font;
// Don't use innerHTML or innerText because they allow markup/whitespace. this.textMeasureEl_.appendChild(doc.createTextNode(text));
return{
width:this.textMeasureEl_.offsetWidth}
;
}
;
/******** STUBS ********/
contextPrototype.clip = function(){
// TODO:Implement}
;
contextPrototype.arcTo = function(){
// TODO:Implement}
;
contextPrototype.createPattern = function(image,repetition){
return new CanvasPattern_(image,repetition);
}
;
// Gradient / Pattern Stubs function CanvasGradient_(aType){
this.type_ = aType;
this.x0_ = 0;
this.y0_ = 0;
this.r0_ = 0;
this.x1_ = 0;
this.y1_ = 0;
this.r1_ = 0;
this.colors_ = [];
}
CanvasGradient_.prototype.addColorStop = function(aOffset,aColor){
aColor = processStyle(aColor);
this.colors_.push({
offset:aOffset,color:aColor.color,alpha:aColor.alpha}
);
}
;
function CanvasPattern_(image,repetition){
assertImageIsValid(image);
switch (repetition){
case 'repeat':case null:case '':this.repetition_ = 'repeat';
break case 'repeat-x':case 'repeat-y':case 'no-repeat':this.repetition_ = repetition;
break;
default:throwException('SYNTAX_ERR');
}
this.src_ = image.src;
this.width_ = image.width;
this.height_ = image.height;
}
function throwException(s){
throw new DOMException_(s);
}
function assertImageIsValid(img){
if (!img || img.nodeType != 1 || img.tagName != 'IMG'){
throwException('TYPE_MISMATCH_ERR');
}
if (img.readyState != 'complete'){
throwException('INVALID_STATE_ERR');
}
}
function DOMException_(s){
this.code = this[s];
this.message = s +':DOM Exception ' + this.code;
}
var p = DOMException_.prototype = new Error;
p.INDEX_SIZE_ERR = 1;
p.DOMSTRING_SIZE_ERR = 2;
p.HIERARCHY_REQUEST_ERR = 3;
p.WRONG_DOCUMENT_ERR = 4;
p.INVALID_CHARACTER_ERR = 5;
p.NO_DATA_ALLOWED_ERR = 6;
p.NO_MODIFICATION_ALLOWED_ERR = 7;
p.NOT_FOUND_ERR = 8;
p.NOT_SUPPORTED_ERR = 9;
p.INUSE_ATTRIBUTE_ERR = 10;
p.INVALID_STATE_ERR = 11;
p.SYNTAX_ERR = 12;
p.INVALID_MODIFICATION_ERR = 13;
p.NAMESPACE_ERR = 14;
p.INVALID_ACCESS_ERR = 15;
p.VALIDATION_ERR = 16;
p.TYPE_MISMATCH_ERR = 17;
// set up externs G_vmlCanvasManager = G_vmlCanvasManager_;
CanvasRenderingContext2D = CanvasRenderingContext2D_;
CanvasGradient = CanvasGradient_;
CanvasPattern = CanvasPattern_;
DOMException = DOMException_;
}
)();
}
// ifJS代码(pieChart.js):
// 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();
/** * Set up the chart data and colours,as well as the chart and table click handlers,* and draw the initial pie chart */
function init(){
// Get the canvas element in the page canvas = document.getElementById('chart');
// Exit if the browser isn't canvas-capable if ( typeof canvas.getContext === 'undefined' ) return;
// Initialise some properties of the canvas and chart canvasWidth = canvas.width;
canvasHeight = canvas.height;
centreX = canvasWidth / 2;
centreY = canvasHeight / 2;
chartRadius = Math.min( canvasWidth,canvasHeight ) / 2 * ( chartSizePercent / 100 );
// Grab the data from the table,// and assign click handlers to the table data cells var currentRow = -1;
var currentCell = 0;
$('#chartData td').each( function(){
currentCell++;
if ( currentCell % 2 != 0 ){
currentRow++;
chartData[currentRow] = [];
chartData[currentRow]['label'] = $(this).text();
}
else{
var value = parseFloat($(this).text());
totalValue += value;
value = value.toFixed(2);
chartData[currentRow]['value'] = value;
}
// Store the slice index in this cell,and attach a click handler to it $(this).data( 'slice',currentRow );
$(this).click( handleTableClick );
// Extract and store the cell colour if ( rgb = $(this).css('color').match( /rgb\((\d+),(\d+),(\d+)/) ){
chartColours[currentRow] = [ rgb[1],rgb[2],rgb[3] ];
}
else if ( hex = $(this).css('color').match(/#([a-fA-F0-9]{
2}
)([a-fA-F0-9]{
2}
)([a-fA-F0-9]{
2}
)/) ){
chartColours[currentRow] = [ parseInt(hex[1],16),parseInt(hex[2],16),parseInt(hex[3],16) ];
}
else{
alert( "Error:Colour could not be determined! Please specify table colours using the format '#xxxxxx'" );
return;
}
}
);
// Now compute and store the start and end angles of each slice in the chart data var currentPos = 0;
// The current position of the slice in the pie (from 0 to 1) for ( var slice in chartData ){
chartData[slice]['startAngle'] = 2 * Math.PI * currentPos;
chartData[slice]['endAngle'] = 2 * Math.PI * ( currentPos + ( chartData[slice]['value'] / totalValue ) );
currentPos += chartData[slice]['value'] / totalValue;
}
// All ready! Now draw the pie chart,and add the click handler to it drawChart();
$('#chart').click ( handleChartClick );
}
/** * Process mouse clicks in the chart area. * * If a slice was clicked,toggle it in or out. * If the user clicked outside the pie,push any slices back in. * * @param Event The click event */
function handleChartClick ( clickEvent ){
// Get the mouse cursor position at the time of the click,relative to the canvas var mouseX = clickEvent.pageX - this.offsetLeft;
var mouseY = clickEvent.pageY - this.offsetTop;
// Was the click inside the pie chart? var xFromCentre = mouseX - centreX;
var yFromCentre = mouseY - centreY;
var distanceFromCentre = Math.sqrt( Math.pow( Math.abs( xFromCentre ),2 ) + Math.pow( Math.abs( yFromCentre ),2 ) );
if ( distanceFromCentre <= chartRadius ){
// Yes,the click was inside the chart. // Find the slice that was clicked by comparing angles relative to the chart centre. var clickAngle = Math.atan2( yFromCentre,xFromCentre ) - chartStartAngle;
if ( clickAngle < 0 ) clickAngle = 2 * Math.PI + clickAngle;
for ( var slice in chartData ){
if ( clickAngle >= chartData[slice]['startAngle'] && clickAngle <= chartData[slice]['endAngle'] ){
// Slice found. Pull it out or push it in,as required. toggleSlice ( slice );
return;
}
}
}
// User must have clicked outside the pie. Push any pulled-out slice back in. pushIn();
}
/** * Process mouse clicks in the table area. * * Retrieve the slice number from the jQuery data stored in the * clicked table cell,then toggle the slice * * @param Event The click event */
function handleTableClick ( clickEvent ){
var slice = $(this).data('slice');
toggleSlice ( slice );
}
/** * Push a slice in or out. * * If it's already pulled out,push it in. Otherwise,pull it out. * * @param Number The slice index (between 0 and the number of slices - 1) */
function toggleSlice ( slice ){
if ( slice == currentPullOutSlice ){
pushIn();
}
else{
startPullOut ( slice );
}
}
/** * Start pulling a slice out from the pie. * * @param Number The slice index (between 0 and the number of slices - 1) */
function startPullOut ( slice ){
// Exit if we're already pulling out this slice if ( currentPullOutSlice == slice ) return;
// Record the slice that we're pulling out,clear any previous animation,then start the animation currentPullOutSlice = slice;
currentPullOutDistance = 0;
clearInterval( animationId );
animationId = setInterval( function(){
animatePullOut( slice );
}
,pullOutFrameInterval );
// Highlight the corresponding row in the key table $('#chartData td').removeClass('highlight');
var labelCell = $('#chartData td:eq(' + (slice*2) + ')');
var valueCell = $('#chartData td:eq(' + (slice*2+1) + ')');
labelCell.addClass('highlight');
valueCell.addClass('highlight');
}
/** * Draw a frame of the pull-out animation. * * @param Number The index of the slice being pulled out */
function animatePullOut ( slice ){
// Pull the slice out some more currentPullOutDistance += pullOutFrameStep;
// If we've pulled it right out,stop animating if ( currentPullOutDistance >= maxPullOutDistance ){
clearInterval( animationId );
return;
}
// Draw the frame drawChart();
}
/** * Push any pulled-out slice back in. * * Resets the animation variables and redraws the chart. * Also un-highlights all rows in the table. */
function pushIn(){
currentPullOutSlice = -1;
currentPullOutDistance = 0;
clearInterval( animationId );
drawChart();
$('#chartData td').removeClass('highlight');
}
/** * Draw the chart. * * Loop through each slice of the pie,and draw it. */
function drawChart(){
// Get a drawing context var context = canvas.getContext('2d');
// Clear the canvas,ready for the new frame context.clearRect ( 0,0,canvasWidth,canvasHeight );
// Draw each slice of the chart,skipping the pull-out slice (if any) for ( var slice in chartData ){
if ( slice != currentPullOutSlice ) drawSlice( context,slice );
}
// If there's a pull-out slice in effect,draw it. // (We draw the pull-out slice last so its drop shadow doesn't get painted over.) if ( currentPullOutSlice != -1 ) drawSlice( context,currentPullOutSlice );
}
/** * Draw an individual slice in the chart. * * @param Context A canvas context to draw on * @param Number The index of the slice to draw */
function drawSlice ( context,slice ){
// Compute the adjusted start and end angles for the slice var startAngle = chartData[slice]['startAngle'] + chartStartAngle;
var endAngle = chartData[slice]['endAngle'] + chartStartAngle;
if ( slice == currentPullOutSlice ){
// We're pulling (or have pulled) this slice out. // Offset it from the pie centre,draw the text label,// and add a drop shadow. var midAngle = (startAngle + endAngle) / 2;
var actualPullOutDistance = currentPullOutDistance * easeOut( currentPullOutDistance/maxPullOutDistance,.8 );
startX = centreX + Math.cos(midAngle) * actualPullOutDistance;
startY = centreY + Math.sin(midAngle) * actualPullOutDistance;
context.fillStyle = 'rgb(' + chartColours[slice].join(',') + ')';
context.textAlign = "center";
context.font = pullOutLabelFont;
context.fillText( chartData[slice]['label'],centreX + Math.cos(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ),centreY + Math.sin(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ) );
context.font = pullOutValueFont;
context.fillText( pullOutValuePrefix + chartData[slice]['value'] + " (" + ( parseInt( chartData[slice]['value'] / totalValue * 100 + .5 ) ) + "%)",centreX + Math.cos(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ),centreY + Math.sin(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ) + 20 );
context.shadowOffsetX = pullOutShadowOffsetX;
context.shadowOffsetY = pullOutShadowOffsetY;
context.shadowBlur = pullOutShadowBlur;
}
else{
// This slice isn't pulled out,so draw it from the pie centre startX = centreX;
startY = centreY;
}
// Set up the gradient fill for the slice var sliceGradient = context.createLinearGradient( 0,0,canvasWidth*.75,canvasHeight*.75 );
sliceGradient.addColorStop( 0,sliceGradientColour );
sliceGradient.addColorStop( 1,'rgb(' + chartColours[slice].join(',') + ')' );
// Draw the slice context.beginPath();
context.moveTo( startX,startY );
context.arc( startX,startY,chartRadius,startAngle,endAngle,false );
context.lineTo( startX,startY );
context.closePath();
context.fillStyle = sliceGradient;
context.shadowColor = ( slice == currentPullOutSlice ) ? pullOutShadowColour:"rgba( 0,0,0,0 )";
context.fill();
context.shadowColor = "rgba( 0,0,0,0 )";
// Style the slice border appropriately if ( slice == currentPullOutSlice ){
context.lineWidth = pullOutBorderWidth;
context.strokeStyle = pullOutBorderStyle;
}
else{
context.lineWidth = sliceBorderWidth;
context.strokeStyle = sliceBorderStyle;
}
// Draw the slice border context.stroke();
}
/** * Easing function. * * A bit hacky but it seems to work! (Note to self:Re-read my school maths books sometime) * * @param Number The ratio of the current distance travelled to the maximum distance * @param Number The power (higher numbers = more gradual easing) * @return Number The new ratio */
function easeOut( ratio,power ){
return ( Math.pow ( 1 - ratio,power ) + 1 );
}
}
;
CSS代码(style.css):
@charset "utf-8";/* reset */
*{margin:0;padding:0;list-style-type:none;}
a{blr:expression(this.onFocus=this.blur())}
/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
:focus{outline:0;}
label{cursor:pointer;}
img{vertical-align:middle;}
table{empty-cells:show;border-collapse:collapse;border-spacing:0;}
h1{font-size:16px;}
h2,h3,h4{font-size:14px;}
h5,h6{font-size:12px;}
abbr,acronym{border:0;font-variant:normal}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%}
a,img{border:0;}
a,a:visited{color:#5e5e5e;text-decoration:none;}
a:hover{color:#4183C4;text-decoration:underline;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}
/* Hides from IE-mac \*/
*html .clearfix{height:1%;}
.clearfix{display:block;}
/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}
body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
/* shortcut */
.shortcut{position:fixed;top:0;left:0;z-index:9999;width:100%;}
*html,*html body /* 修正IE6振动bug */
{background-image:url(about:blank);background-attachment:fixed;}
*html .shortcut{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
.shortcut{height:28px;line-height:28px;font-size:12px;background:#EEEEEE;text-transform:uppercase;box-shadow:1px 0px 2px rgba(0,0,0,0.2);border-bottom:1px solid #DDDDDD;}
.shortcut h1{font-size:14px;font-family:"微软雅黑","宋体";}
.shortcut a,.shortcut h1{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}
.shortcut a:hover{background:#fff;}
.shortcut span.right{float:right;}
.shortcut span.right a{float:left;display:block;color:#ff6600;font-weight:800;}
.headeline{height:40px;overflow:hidden;}
.adv960x90{width:960px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}
.adv728x90{width:728px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}
分享到QQ
分享到微博
微信扫一扫
