当前位置：首页 > CSS

css图表制作

2026-02-12 22:49:52CSS

CSS图表制作方法

CSS图表可以通过纯CSS或结合少量JavaScript实现，适用于数据可视化需求。以下是几种常见类型的实现方法：

柱状图

使用HTML的<div>元素和CSS的height属性创建柱状图：

<div class="bar-chart">
  <div class="bar" style="height: 60%;" data-value="60"></div>
  <div class="bar" style="height: 30%;" data-value="30"></div>
</div>

.bar-chart {
  display: flex;
  height: 200px;
  align-items: flex-end;
}
.bar {
  width: 40px;
  margin-right: 10px;
  background-color: #4285f4;
  transition: height 0.3s ease;
}

饼图

利用CSS的conic-gradient实现饼图：

.pie-chart {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(
    #4285f4 0% 60%,
    #ea4335 60% 85%,
    #fbbc05 85% 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>

.line-chart {
  position: relative;
  height: 200px;
  border-bottom: 1px solid #ccc;
}
.point {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #34a853;
  border-radius: 50%;
}
.point::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  height: 1px;
  background: #34a853;
}

动画效果

为图表添加交互动画：

.bar:hover {
  opacity: 0.8;
  transform: scaleY(1.05);
}
@keyframes grow {
  from { height: 0; }
  to { height: var(--target-height); }
}
.bar {
  animation: grow 0.5s ease forwards;
}

响应式设计

使用CSS变量和媒体查询确保图表适配不同屏幕：

:root {
  --chart-height: 200px;
}
@media (max-width: 600px) {
  :root {
    --chart-height: 150px;
  }
}
.bar-chart {
  height: var(--chart-height);
}