canvas制作簡單的每年游客人數統計柱狀圖表代碼。

使用方法：

body引入代碼，默認調用函數onLoad="barChart();"

您的瀏覽器不支持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;

// 條形圖構造函數

function barChart() {

canvas = document.getElementById('bchart');

if (canvas && canvas.getContext) {

context = canvas.getContext('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.moveTo(x, y);

context.lineTo(X, Y);

context.closePath();

context.stroke();

}

//在X和Y軸上繪制圖表標記

function drawMarkers() {

var numMarkers = parseInt(maxDataValue / totLabelsOnYAxis);

context.textAlign = "right";

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軸

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 + 15; //X軸文字位置

context.fillText(name, markerXPos, markerYPos, bWidth);

}

context.save();

//添加Y軸標題

context.translate(cMargin + 10, cHeight / 2);

context.rotate(Math.PI * -90 / 180);

context.fillText('游客總數', 0, 0);

context.restore();

//添加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();

context.rect(x, y, w, h);

context.closePath();

context.stroke();

if (fill) {

var gradient = context.createLinearGradient(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并刷新此頁面以查看正在運行的圖表。

注：此資源非帝國CMS模板/特效/源碼，需要帝國CMS整站模板源碼的小伙伴，請移步 帝國CMS模板，感謝支持！

總結

以上是生活随笔為你收集整理的游客显示的html代码,html5游客总数柱状图代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。