JavaScript 柱状图示例

原创于 2025-04-21 16:48:55 发布 · 980 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 柱状图示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #333;
}
#chart-container {
margin-top: 30px;
width: 600px;
height: 400px;
border: 1px solid #ddd;
position: relative;
}
.bar {
position: absolute;
bottom: 30px;
width: 40px;
background-color: #4CAF50;
transition: height 0.5s ease;
display: flex;
justify-content: center;
align-items: flex-end;
color: white;
font-weight: bold;
}
.bar:hover {
background-color: #45a049;
}
.axis {
position: absolute;
height: 1px;
background-color: #333;
}
.x-axis {
bottom: 30px;
left: 50px;
right: 20px;
}
.y-axis {
bottom: 30px;
left: 50px;
top: 20px;
}
.tick {
position: absolute;
background-color: #333;
}
.x-tick {
width: 1px;
height: 5px;
bottom: 30px;
}
.y-tick {
width: 5px;
height: 1px;
left: 45px;
}
.tick-label {
position: absolute;
font-size: 12px;
color: #666;
}
.x-tick-label {
bottom: 15px;
transform: translateX(-50%);
}
.y-tick-label {
left: 35px;
transform: translateY(-50%);
}
.chart-title {
position: absolute;
top: 5px;
left: 0;
right: 0;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<h1>JavaScript 柱状图示例</h1>

<div id="chart-container">
<div class="chart-title">月度销售数据</div>
<div class="axis x-axis"></div>
<div class="axis y-axis"></div>

</div>

const container = document.getElementById('chart-container');
const containerWidth = container.offsetWidth;
const containerHeight = container.offsetHeight;
const margin = { top: 40, right: 20, bottom: 50, left: 50 };
const chartWidth = containerWidth - margin.left - margin.right;
const chartHeight = containerHeight - margin.top - margin.bottom;

// 计算比例尺
const maxValue = Math.max(...data.map(item => item.value));
const yScale = chartHeight / maxValue;

const barWidth = 40;
const barSpacing = (chartWidth - (data.length * barWidth)) / (data.length + 1);

// 创建Y轴刻度
const yTicks = 5;
for (let i = 0; i <= yTicks; i++) {
const value = Math.round((maxValue / yTicks) * i);
const yPos = chartHeight - (value * yScale) + margin.top;

// Y轴刻度线
const yTick = document.createElement('div');
yTick.className = 'tick y-tick';
yTick.style.left = `${margin.left - 5}px`;
yTick.style.top = `${yPos}px`;
container.appendChild(yTick);

// Y轴刻度标签
const yLabel = document.createElement('div');
yLabel.className = 'tick-label y-tick-label';
yLabel.style.top = `${yPos}px`;
yLabel.textContent = value;
container.appendChild(yLabel);
}

// 创建柱状图
data.forEach((item, index) => {
const barHeight = item.value * yScale;
const xPos = margin.left + barSpacing + (index * (barWidth + barSpacing));

// 创建柱子
const bar = document.createElement('div');
bar.className = 'bar';
bar.style.left = `${xPos}px`;
bar.style.height = `${barHeight}px`;
bar.style.bottom = `${margin.bottom}px`;
bar.title = `${item.month}: ${item.value}`;

// 柱子上的数值标签
const barLabel = document.createElement('div');
barLabel.textContent = item.value;
barLabel.style.marginBottom = '5px';
bar.appendChild(barLabel);

container.appendChild(bar);

// X轴刻度线
const xTick = document.createElement('div');
xTick.className = 'tick x-tick';
xTick.style.left = `${xPos + barWidth / 2}px`;
container.appendChild(xTick);

// X轴刻度标签
const xLabel = document.createElement('div');
xLabel.className = 'tick-label x-tick-label';
xLabel.style.left = `${xPos + barWidth / 2}px`;
xLabel.textContent = item.month;
container.appendChild(xLabel);
});
});
</script>
</body>
</html>