效果图：
<!doctype>
<html>
<head>
<title>bring your charts to life</title>
<script type="text/javascript">
// chart sample data
var arrvisitors = new array();
arrvisitors[0] = "2007, 750";
arrvisitors[1] = "2008, 425";
arrvisitors[2] = "2009, 960";
arrvisitors[3] = "2010, 700";
arrvisitors[4] = "2011, 800";
arrvisitors[5] = "2012, 975";
arrvisitors[6] = "2013, 375";
arrvisitors[7] = "2014, 775";
var canvas;
var context;
// chart properties
var cwidth, cheight, cmargin, cspace;
var cmarginspace, cmarginheight;
// bar properties
var bwidth, bmargin, totalbars, maxdatavalue;
var bwidthmargin;
// bar animation
var ctr, numctr, speed;
// axis property
var totlabelsonyaxis;
// barchart constructor
function barchart() {
canvas = document.getelementbyid('bchart');
if (canvas && canvas.getcontext) {
context = canvas.getcontext('2d');
}
chartsettings();
drawaxislabelmarkers();
drawchartwithanimation();
}
// initialize the chart and bar values
function chartsettings() {
// chart properties
cmargin = 25;
cspace = 60;
cheight = canvas.height - 2 * cmargin - cspace;
cwidth = canvas.width - 2 * cmargin - cspace;
cmarginspace = cmargin + cspace;
cmarginheight = cmargin + cheight;
// bar properties
bmargin = 15;
totalbars = arrvisitors.length;
bwidth = (cwidth / totalbars) - bmargin;
// find maximum value to plot on chart
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;
}
totlabelsonyaxis = 10;
context.font = "10pt garamond";
// initialize animation variables
ctr = 0;
numctr = 100;
speed = 10;
}
// draw chart axis, labels and markers
function drawaxislabelmarkers() {
context.linewidth = "2.0";
// draw y axis
drawaxis(cmarginspace, cmarginheight, cmarginspace, cmargin);
// draw x axis
drawaxis(cmarginspace, cmarginheight, cmarginspace + cwidth, cmarginheight);
context.linewidth = "1.0";
drawmarkers();
}
// draw x and y axis
function drawaxis(x, y, x, y) {
context.beginpath();
context.moveto(x, y);
context.lineto(x, y);
context.closepath();
context.stroke();
}
// draw chart markers on x and y axis
function drawmarkers() {
var nummarkers = parseint(maxdatavalue / totlabelsonyaxis);
context.textalign = "right";
context.fillstyle = "#000";;
// y axis
for (var i = 0; i <= totlabelsonyaxis; i++) {
markerval = i * nummarkers;
markervalht = i * nummarkers * cheight;
var xmarkers = cmarginspace - 5;
var ymarkers = cmarginheight - (markervalht / maxdatavalue);
context.filltext(markerval, xmarkers, ymarkers, cspace);
}
// x axis
context.textalign = 'center';
for (var i = 0; i < totalbars; i++) {
arrval = arrvisitors[i].split(",");
name = arrval[0];
markerxpos = cmarginspace + bmargin
+ (i * (bwidth + bmargin)) + (bwidth/2);
markerypos = cmarginheight + 10;
context.filltext(name, markerxpos, markerypos, bwidth);
}
context.save();
// add y axis title
context.translate(cmargin + 10, cheight / 2);
context.rotate(math.pi * -90 / 180);
context.filltext('visitors in thousands', 0, 0);
context.restore();
// add x axis title
context.filltext('year wise', cmarginspace +
(cwidth / 2), cmarginheight + 30 );
}
function drawchartwithanimation() {
// loop through the total bars and draw
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 * (bwidth + bmargin)) + bmargin;
by = cmarginheight - bht - 2;
drawrectangle(bx, by, bwidth, bht, true);
}
// timeout runs and checks if bars have reached
// the desired height; if not, keep growing
if (ctr < numctr) {
ctr = ctr + 1;
settimeout(arguments.callee, speed);
}
}
function drawrectangle(x, y, w, h, fill) {
context.beginpath();
context.rect(x, y, w, h);
context.closepath();
context.stroke();
if (fill) {
var gradient = context.createlineargradient(0, 0, 0, 300);
gradient.addcolorstop(0, 'green');
gradient.addcolorstop(1, 'rgba(67,203,36,.15)');
context.fillstyle = gradient;
context.strokestyle = gradient;
context.fill();
}
}
</script>
<noscript>
this chart is unavailable because javascript is disabled on your computer. please enable
javascript and refresh this page to see the chart in action.
</noscript>
</head>
<body onload="barchart();">
<canvas id="bchart" height="400" width="600">your browser does not support html5 canvas
</canvas>
</body>
</html>
相关文章：
html5生成柱状图(条形图)效果的实例代码
使用html实现简单的柱状图效果
以上就是使用html5 canvas画柱状图的详细内容。