css图表两个y轴

在网页开发中，展示数据往往需要用到图表。而对于一些比较复杂的数据，我们可能还需要使用两个 y 轴来展示不同的数据类型。这时候，我们可以使用 CSS 图表来让我们的数据更加清晰明了。

使用 CSS 图表中展示两个 y 轴的数据，我们需要使用到::before 和 ::after 伪元素，来构建出两个 y 轴，并使它们与图表上的数据对应。

.chart {
  position: relative;
}
.chart::before,.chart::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  bottom: 0;
  background: #ccc;
}
.chart::before {
  left: 40px; /* 第一个 y 轴的距离 */
}
.chart::after {
  right: 40px; /* 第二个 y 轴的距离 */
}

除了两个 y 轴之外，我们还需要修改图表上数据点的位置，以对应到正确的 y 轴。例如：

.point {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
}
.left-y {
  left: 30px; /* 第一个 y 轴的距离 */
}
.right-y {
  right: 30px; /* 第二个 y 轴的距离 */
}

在 HTML 中，我们可以按照如下方式定义图表：

<div class="chart">
  <div class="point left-y" style="top: 50%;"></div>
  <div class="point right-y" style="top: 80%;"></div>
</div>

以上代码中，我们创建了一个 class 为 “chart” 的 div，其他的 div 元素则是我们的数据点。其中，第一个数据点对应第一个 y 轴，第二个数据点对应第二个 y 轴。

通过这种方式，我们就可以轻松地在 CSS 中创建出一个展示两个 y 轴数据的图表。当然，这只是其中的一种方式，我们还可以根据自己的需要，选择不同的方法来进行实现。