css图表制作
CSS图表制作方法
纯CSS柱状图
使用HTML的<div>元素和CSS样式创建简单的柱状图。通过设置不同的高度和颜色来区分数据。
<div class="chart">
<div class="bar" style="height: 40%; background: #3498db;"></div>
<div class="bar" style="height: 70%; background: #2ecc71;"></div>
<div class="bar" style="height: 30%; background: #e74c3c;"></div>
</div>.chart {
display: flex;
height: 200px;
align-items: flex-end;
gap: 10px;
}
.bar {
width: 50px;
transition: height 0.3s ease;
}CSS饼图
利用conic-gradient和border-radius属性实现饼图效果。
.pie-chart {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(
#3498db 0% 30%,
#2ecc71 30% 70%,
#e74c3c 70% 100%
);
}CSS折线图
结合伪元素和transform属性创建折线图。
<div class="line-chart">
<div class="point" style="left: 10%; bottom: 20%;"></div>
<div class="point" style="left: 30%; bottom: 50%;"></div>
<div class="point" style="left: 70%; bottom: 80%;"></div>
</div>.line-chart {
position: relative;
height: 200px;
width: 100%;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
}
.point {
position: absolute;
width: 8px;
height: 8px;
background: #e74c3c;
border-radius: 50%;
transform: translate(-50%, 50%);
}
.point::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 1000px;
height: 2px;
background: #3498db;
transform-origin: left;
}动画效果增强
为图表添加悬停动画提升交互体验。
.bar:hover {
opacity: 0.8;
transform: scaleY(1.1);
}
.pie-chart:hover {
transform: rotate(10deg);
}响应式设计
使用媒体查询确保图表在不同设备上正常显示。
@media (max-width: 600px) {
.chart {
height: 150px;
}
.bar {
width: 30px;
}
}数据标签添加
通过伪元素显示具体数值。
.bar::after {
content: attr(data-value);
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
}这些方法无需JavaScript即可实现基本的数据可视化效果，适合简单场景使用。复杂图表建议结合SVG或专业库如Chart.js。
