canvas画出饼状图
加标签,不过标签不会随饼图旋转
by Mike Lin
HTML
<script src="https://raw.githubusercontent.com/Regaddi/Chart.js/bd5bff2cd4d782fa72a529f81a8e188fc2348d77/Chart.js"></script>
<canvas id="canvas" height="450" width="450"></canvas>
JavaScript
$(document).ready(function () {
var pieData = [{
value : 30,
color : "#F38630",
label : '80%',
labelColor : 'white',
labelFontSize : '16'
},
{
value : 30,
color : "#F34353",
label : 'Sleep',
labelColor : 'white',
labelFontSize : '16'
}];
var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData, {
animationSteps: 100,
animationEasing: 'easeInOutQuart' });
});
//Chart.js
//Define the global Chart Variable as a class.
var Chart = function(context){
var chart = this;
//Easing functions adapted from Robert Penner's easing equations
//http://www.robertpenner.com/easing/
var animationOptions = {
linear : function (t){
return t;
},
easeInQuad: function (t) {
return t*t;
},
easeOutQuad: function (t) {
return -1 *t*(t-2);
},
easeInOutQuad: function (t) {
if ((t/=1/2) < 1) return 1/2*t*t;
return -1/2 * ((--t)*(t-2) - 1);
},
easeInCubic: function (t) {
return t*t*t;
},
easeOutCubic: function (t) {
return 1*((t=t/1-1)*t*t + 1);
},
easeInOutCubic: function (t) {
if ((t/=1/2) < 1) return 1/2*t*t*t;
return 1/2*((t-=2)*t*t + 2);
},
easeInQuart: function (t) {
return t*t*t*t;
},
easeOutQuart: function (t) {
return -1 * ((t=t/1-1)*t*t*t - 1);
},
easeInOutQuart: function (t) {
if ((t/=1/2) < 1) return 1/2*t*t*t*t;
return -1/2 * ((t-=2)*t*t*t - 2);
},
easeInQuint: function (t) {
return 1*(t/=1)*t*t*t*t;
},
easeOutQuint: function (t) {
return 1*((t=t/1-1)*t*t*t*t + 1);
},
easeInOutQuint: function (t) {
if ((t/=1/2) < 1) return 1/2*t*t*t*t*t;
return 1/2*((t-=2)*t*t*t*t + 2);
},
easeInSine: function (t) {
return -1 * Math.cos(t/1 * (Math.PI/2)) + 1;
},
easeOutSine: function (t) {
return 1 *...