Canvas之画柱状图

<canvas id="bchart_b" width="850" height="300"></canvas>

<script type="text/javascript">
// chart sample data
var arrVisitors = new Array();


var canvas_b;
var context_b;

window.onload = function() {

barChart_b();
}


function barChart_b() {
arrVisitors[0] = "45min以下, 324";
arrVisitors[1] = "45-90min, 254";
arrVisitors[2] = "90-150min, 543";
arrVisitors[3] = "150以上, 473";
canvas_b = document.getElementById('bchart_b');
if(canvas_b && canvas_b.getContext) {
context_b = canvas_b.getContext('2d');
}


drawChartWithAnimation_b(canvas_b,context_b);
drawText(context_b,canvas_b);
}



function drawChartWithAnimation_b(canvas,context) {
// Loop through the total bars and draw
var cMargin = 25;
var cSpace = 60;
var cHeight = canvas.height - 2 * cMargin - cSpace;
var cWidth = canvas.width - 2 * cMargin - cSpace;
var cMarginSpace = cMargin + cSpace;
var cMarginHeight = cMargin + cHeight;
// bar properties
var bMargin = 15;
var totalBars = arrVisitors.length;
var bWidth = ((cWidth / totalBars) - bMargin) / 5;
// find maximum value to plot on chart
var maxDataValue = 0;
for(var i = 0; i < totalBars; i++) {
var arrVal = arrVisitors[i].split(",");
var barVal = parseInt(arrVal[1]);
if(parseInt(barVal) > parseInt(maxDataValue))
maxDataValue = barVal;
}
var totLabelsOnYAxis = 10;
context.font = "10pt Garamond";

// initialize Animation variables
ctr = 100;
numctr = 100;
speed = 10;


for(var i = 0; i < totalBars; i++) {
var arrVal = arrVisitors[i].split(",");
bVal = parseInt(arrVal[1]);
bHt = (bVal * cHeight / maxDataValue) / numctr * ctr;
bX = cMarginSpace + (i * (canvas.width/4)) + bMargin;

bY = cMarginHeight - bHt + 70;

if(bHt > 0) {
drawRectangle_b(bX, bY, bWidth, bHt,context, true);
}



}

}
function drawText(context,canvas) {
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.strokeStyle = "white"; //设置描边样式
context.fillStyle = "white";

context.font = "20px sans-serif"; //设置字体大小和字体

//绘制字体，并且指定位置
context.fillText("0", canvas.width * 0.98, canvas.height * 0.98);

context.stroke(); //执行绘制

context.restore();
}

function drawRectangle(x, y, w, h,context,fill) {
context.beginPath();

context.rect(x, y, w, h,context);
drawRoundRect(x, y, w, h, w / 2,context);
context.closePath();
context.stroke();
if(fill) {
var gradient = context.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0, 'green');
gradient.addColorStop(1, 'green');
context.fillStyle = gradient;
context.strokeStyle = gradient;
context.fill();
}
}

function drawRectangle_b(x, y, w, h,context,fill) {
context.beginPath();

context.rect(x, y, w, h,context);
drawRoundRect(x, y, w, h, w / 2,context);
context.closePath();
context.stroke();
if(fill) {
var gradient = context.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'white');
context.fillStyle = gradient;
context.strokeStyle = gradient;
context.fill();
}
}

function drawRectangle1(x, y, w, h, context,fill) {
context.beginPath();
context.rect(x, y, w, h,context);
drawRoundRect(x, y, w, h, w / 2,context);
context.closePath();
context.stroke();
if(fill) {
var gradient = context.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0, 'gray');
gradient.addColorStop(1, 'gray');
context.fillStyle = gradient;
context.strokeStyle = gradient;
context.fill();
}
}

function drawRoundRect(x, y, width, height, radius,context) {
var value = height - width;
if(value < 0) {
radius = height/2;
}
context.beginPath();
context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
context.lineTo(width - radius + x, y);
context.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
context.lineTo(width + x, height + y - radius);
context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
context.lineTo(radius + x, height + y);
context.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
context.closePath();
}
</script>