当前位置：首页 > CSS

css图表制作

2026-01-28 04:24:47CSS

CSS图表制作方法

使用纯CSS制作图表可以实现轻量级、无需JavaScript的可视化效果。以下是几种常见图表的实现方式：

条形图

通过CSS的linear-gradient和伪元素创建条形图：

css图表制作

.bar-chart {
  width: 300px;
  height: 200px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.bar {
  flex: 1;
  background: linear-gradient(to top, #4a90e2 75%, transparent 0%);
  position: relative;
}

.bar::after {
  content: attr(data-value);
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
}

饼图

使用conic-gradient实现饼图：

.pie-chart {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(
    #4a90e2 0% 30%,
    #50e3c2 30% 60%,
    #e3507a 60% 100%
  );
}

折线图

通过CSS伪元素和边框创建折线连接点：

css图表制作

.line-chart {
  position: relative;
  height: 200px;
  width: 300px;
}

.data-point {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #4a90e2;
  border-radius: 50%;
}

.data-point::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 2px;
  background: #4a90e2;
  top: 3px;
  left: 8px;
  transform: rotate(30deg);
}

响应式图表技巧

使用CSS变量和视口单位实现响应式：

.chart-container {
  --chart-height: 50vh;
  height: var(--chart-height);
}

@media (max-width: 768px) {
  .chart-container {
    --chart-height: 30vh;
  }
}

动画效果

为图表添加加载动画：

@keyframes grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.animated-bar {
  transform-origin: bottom;
  animation: grow 1s ease-out forwards;
}

这些方法均使用纯CSS实现，可根据需求组合使用或扩展。对于复杂图表，建议结合SVG或Canvas实现，但CSS方案在简单可视化场景中具有性能优势和易维护性。