HTML5提供的柱形圖代碼，是Web開發(fā)中一個(gè)非常有用的功能。柱形圖能夠展示數(shù)據(jù)的分布情況，讓用戶更直觀地了解數(shù)據(jù)的狀況。下面我們將介紹一些基本的HTML5柱形圖代碼。 首先，我們需要設(shè)置柱形圖的基本參數(shù)，例如數(shù)據(jù)的填充顏色、柱形之間的間隔、坐標(biāo)軸的線條樣式等。代碼如下：

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.strokeStyle = "black";
var barWidth = 50;
var barGap = 10;
var maxValue = 100;
var data = [76, 45, 80, 90, 60];
</script>

上述代碼創(chuàng)建了一個(gè)canvas元素，并通過JavaScript獲取了其上下文。我們?cè)O(shè)置了柱形的填充顏色為藍(lán)色，柱形邊框的樣式為黑色。barWidth和barGap分別為柱形寬度和柱形之間的間距，maxValue表示數(shù)據(jù)的最大值，data數(shù)組保存了柱形圖中每個(gè)柱形的高度。 接下來我們可以通過循環(huán)的方式繪制柱形圖：

<script>
var x = 50;
var y = canvas.height - 40;
for(var i=0; i<data.length; i++) {
var barHeight = (data[i] / maxValue) * (canvas.height - 100);
ctx.fillRect(x, canvas.height - barHeight - 40, barWidth, barHeight);
x += barWidth + barGap;
}
</script>

上述代碼通過循環(huán)遍歷data數(shù)組，計(jì)算每個(gè)柱形的高度，并通過fillRect方法繪制出柱形。其中fillRect的四個(gè)參數(shù)分別為柱形的左上角x、y坐標(biāo)、寬度和高度。在循環(huán)中，我們還需要更新x坐標(biāo)，使得每個(gè)柱形之間的距離為barGap。 最后我們可以在柱形圖中加入坐標(biāo)軸，使得圖像更加直觀：

<script>
// 繪制x軸
ctx.beginPath();
ctx.moveTo(20, y);
ctx.lineTo(canvas.width - 20, y);
ctx.stroke();
// 繪制y軸
ctx.beginPath();
ctx.moveTo(30, 20);
ctx.lineTo(30, canvas.height - 40);
ctx.stroke();
// 繪制y軸刻度
ctx.font = "12px Arial";
ctx.textAlign = "right";
for(var i=0; i<=maxValue; i+=20) {
var scaleHeight = (i / maxValue) * (canvas.height - 100);
ctx.fillText(i, 25, y-scaleHeight);
ctx.moveTo(30, y-scaleHeight);
ctx.lineTo(35, y-scaleHeight);
ctx.stroke();
}
</script>

上述代碼繪制了x軸和y軸，并且在y軸上加入了刻度值。其中moveTo和lineTo方法用于繪制坐標(biāo)軸的線條，fillText方法用于繪制刻度值，當(dāng)然您也可以自由定制這些參數(shù)。 通過以上的代碼，我們就可以得到一張漂亮的柱形圖了。其中，您可以按照自己的需要編輯數(shù)據(jù)和樣式，更好地適配自己的網(wǎng)頁(yè)。