css如何生成折线图

CSS 可以通过制作折线图来展示数据，它可以直观地显示数据趋势和变化。下面将介绍如何使用 CSS 生成折线图。

//HTML 结构
<div class="chart">
  <div class="line l1"></div>
  <div class="line l2"></div>
  <div class="line l3"></div>
</div>

//CSS 样式
.chart {
  width: 500px;
  height: 300px;
  position: relative;
}
.line {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}
.l1 {
  height: 80px;
  background-color: #f00;
}
.l2 {
  height: 160px;
  background-color: #0f0;
}
.l3 {
  height: 240px;
  background-color: #00f;
}

通过设置图表容器的宽度和高度，以及设置每个折线的高度，可以得到一个简单的折线图。为了实现折线图效果，每个折线都是一个绝对定位的 1 像素高的 div 元素。通过设置它们的背景颜色来实现折线图效果。