css制作charts
使用纯CSS制作简单图表
纯CSS可以创建基础的柱状图、饼图等简单图表，通过伪元素、transform属性和CSS变量实现。
柱状图示例：
<div class="bar-chart">
<div class="bar" style="--height: 60%"></div>
<div class="bar" style="--height: 30%"></div>
<div class="bar" style="--height: 80%"></div>
</div>.bar-chart {
display: flex;
height: 200px;
align-items: flex-end;
gap: 20px;
}
.bar {
width: 40px;
height: var(--height);
background: linear-gradient(to top, #4facfe, #00f2fe);
border-radius: 4px 4px 0 0;
}使用CSS Grid布局复杂图表
CSS Grid可以创建更复杂的数据可视化布局：
<div class="grid-chart">
<div class="cell" style="--value: 0.7"></div>
<div class="cell" style="--value: 0.4"></div>
<!-- 更多单元格 -->
</div>.grid-chart {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
gap: 2px;
width: 300px;
height: 300px;
}
.cell {
background-color: rgba(75, 192, 192, var(--value));
}创建CSS动画图表
通过CSS动画让图表具有交互效果：
.bar {
animation: grow 1s ease-out forwards;
transform-origin: bottom;
}
@keyframes grow {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}使用CSS自定义属性实现动态图表
CSS变量使图表可以动态更新：
document.querySelector('.bar').style.setProperty('--height', '75%');响应式图表设计
使用媒体查询确保图表在不同设备上正常显示：
@media (max-width: 600px) {
.bar-chart {
flex-direction: column;
height: auto;
}
.bar {
width: 100%;
height: 20px;
}
}高级技巧：CSS伪元素创建饼图
纯CSS饼图实现方法：
<div class="pie-chart" style="--percentage: 75"></div>.pie-chart {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(#4facfe calc(var(--percentage) * 1%), #eee 0);
}浏览器兼容性考虑
对于不支持CSS变量的旧浏览器，需要提供降级方案：
.bar {
height: 60%; /* 回退值 */
height: var(--height, 60%);
}性能优化建议
避免在图表中使用过多box-shadow和渐变效果，这些属性会导致重绘性能下降。对于复杂数据可视化，建议考虑专业图表库。
