css制作charts
使用纯CSS制作图表
纯CSS可以通过伪元素、变形和动画等技术实现简单的图表效果，适用于不需要复杂交互的场景。
条形图
通过调整height或width属性控制条形长度，结合:before或:after伪元素添加标签：
.bar {
background-color: #4CAF50;
height: 20px;
width: var(--width, 50%);
transition: width 1s;
}饼图
利用conic-gradient和border-radius创建圆形分割效果：
.pie-chart {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(
#FF6384 0% 30%,
#36A2EB 30% 70%,
#FFCE56 70% 100%
);
}结合HTML结构的CSS图表
折线图
通过flex布局和border属性连接数据点：
<div class="line-chart">
<div class="point" style="--y: 30%;"></div>
<div class="point" style="--y: 60%;"></div>
</div>.line-chart {
display: flex;
align-items: flex-end;
height: 200px;
}
.point {
width: 20px;
height: var(--y);
background: #333;
position: relative;
}
.point:not(:last-child)::after {
content: '';
position: absolute;
right: -20px;
bottom: 0;
width: 20px;
border-bottom: 2px solid #333;
}CSS框架辅助方案
使用CSS变量动态控制 通过JavaScript动态更新CSS变量实现数据绑定：
document.querySelector('.bar').style.setProperty('--width', '75%');结合Grid布局 创建坐标系背景：
.chart-grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
background:
linear-gradient(to right, #eee 1px, transparent 1px),
linear-gradient(to bottom, #eee 1px, transparent 1px);
}动画增强效果
加载动画 为图表元素添加入场效果：
@keyframes grow {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}
.bar {
animation: grow 0.5s ease-out forwards;
transform-origin: bottom;
}悬停交互 显示详细数据提示：
.data-point:hover::after {
content: attr(data-value);
position: absolute;
top: -30px;
background: rgba(0,0,0,0.8);
color: white;
padding: 2px 5px;
border-radius: 3px;
}响应式适配
视窗单位适配
使用vw和vh单位确保图表缩放：
.chart-container {
width: 90vw;
height: 50vh;
}媒体查询调整 针对不同屏幕尺寸修改布局：
@media (max-width: 600px) {
.bar-chart {
flex-direction: column;
}
}这些方法展示了如何不依赖JavaScript库创建基础数据可视化效果。复杂项目建议考虑专业图表库，但CSS方案在性能要求高、数据简单的场景下具有优势。
