HTML 柱狀圖代碼可以用來在網頁中展示各種數據，讓用戶更直觀地了解數據的分布情況。下面是一個示例代碼：
<html>
<head>
<title>柱狀圖</title>
<style>
#chart {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 0 auto;
position: relative;
}
.bar {
position: absolute;
bottom: 0;
width: 30px;
background-color: #69c;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #fff;
transition: all 0.3s ease-out;
cursor: pointer;
}
.bar:hover {
background-color: #279;
transform: scale(1.2);
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
var data = [20, 40, 60, 80, 100];
var chart = document.getElementById("chart");
for (var i = 0; i < data.length; i++) {
var bar = document.createElement("div");
bar.className = "bar";
bar.style.height = data[i] + "px";
bar.style.left = (i * 70 + 50) + "px";
bar.innerHTML = data[i];
chart.appendChild(bar);
}
</script>
</body>
</html>上面的代碼可以在瀏覽器中運行，生成一個簡單的柱狀圖。具體來說，代碼中包含了一個包含多個柱形條的容器 #chart，以及每個柱形條的樣式 .bar。數據保存在數組 data 中，通過 JavaScript 動態生成每個柱形條的 HTML 并設置其高度和位置。當用戶將鼠標懸停在柱形條上時，會出現動畫效果。
下一篇html 查詢框架代碼