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。