html5柱状图前台页⾯源码，利⽤HTML5Canvas实现柱状图表
统计代码
特效描述：利⽤HTML5 Canvas实现 柱状图表 统计代码。利⽤HTML5 Canvas实现柱状图表统计代码
代码结构
1. HTML代码
您的浏览器不⽀持HTML5 Canvas
// 图表数据
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;
// 图表属性
var cWidth, cHeight, cMargin, cSpace;
var cMarginSpace, cMarginHeight;
// 条形图属性
var bWidth, bMargin, totalBars, maxDataValue;
var bWidthMargin;
// 条形动画
var ctr, numctr, speed;
// 轴属性
var totLabelsOnYAxis;html导航源码
// 条形图构造函数
function barChart() {
canvas = ElementById('bchart');
if (canvas && Context) {
context = Context('2d');
}
chartSettings();
drawAxisLabelMarkers(); drawChartWithAnimation();
}
// 初始化图表和条形图值
function chartSettings() {
// 图表属性
cMargin = 25;
cSpace = 60;
cHeight = canvas.height - 2 * cMargin - cSpace; cWidth = canvas.width - 2 * cMargin - cSpace; cMarginSpace = cMargin + cSpace; cMarginHeight = cMargin + cHeight;
// 条形图属性
bMargin = 15;
totalBars = arrVisitors.length;
bWidth = (cWidth / totalBars) - bMargin;
//到要在图表上绘制的最⼤值
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";
// 初始化动画变量
ctr = 0;
numctr = 100;
speed = 10;
}
// 绘制图表轴、标签和标记
function drawAxisLabelMarkers() {
context.lineWidth = "2.0";
// 绘制y轴
drawAxis(cMarginSpace, cMarginHeight, cMarginSpace, cMargin);
/
/绘制x轴
drawAxis(cMarginSpace, cMarginHeight, cMarginSpace + cWidth, cMarginHeight); context.lineWidth = "1.0";
drawMarkers();
}
//绘制X和Y轴
function drawAxis(x, y, X, Y) {
context.beginPath();
context.lineTo(X, Y);
context.closePath();
context.stroke();
}
//在X和Y轴上绘制图表标记
function drawMarkers() {
var numMarkers = parseInt(maxDataValue / totLabelsOnYAxis);
context.fillStyle = "#000";;
//y轴
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轴
for (var i = 0; i < totalBars; i++) {
arrval = arrVisitors[i].split(",");
name = arrval[0];
markerXPos = cMarginSpace + bMargin
+ (i * (bWidth + bMargin)) + (bWidth/2);
markerYPos = cMarginHeight + 15; //X轴⽂字位置context.fillText(name, markerXPos, markerYPos, bWidth); }
context.save();
//添加Y轴标题
context.fillText('游客总数', 0, 0);
//添加X轴标题
context.fillText('年份', cMarginSpace +
(cWidth / 2), cMarginHeight + 30 );
}
function drawChartWithAnimation() {
/
/循环遍历总条并绘制
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);
}
// 超时运⾏并检查是否已达到条
// 所需⾼度；如果不是，则继续增长
if (ctr < numctr) {
ctr = ctr + 1;
setTimeout(arguments.callee, speed);
}
}
function drawRectangle(x, y, w, h, fill) {
context.beginPath();
<(x, y, w, h);
context.closePath();
context.stroke();
if (fill) {
var gradient = ateLinearGradient(0, 0, 0, 300); gradient.addColorStop(0, 'yellow');
/
/gradient.addColorStop(1, 'rgba(67,203,36,.15)'); gradient.addColorStop(1, 'red');
context.fillStyle = gradient;
context.strokeStyle = gradient;
context.fill();
}
}
此图表不可⽤，因为您的计算机上禁⽤了JavaScript。 请启⽤JavaScript并刷新此页⾯以查看正在运⾏的图表。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。