[分享]css两个y轴联动

CSS中的两个Y轴联动是一种非常有用的技巧，可以实现不同图表的联动效果，让用户可以更方便地查看相关数据。下面是实现两个Y轴联动的CSS代码：.container { display: flex; } ...

CSS中的两个Y轴联动是一种非常有用的技巧，可以实现不同图表的联动效果，让用户可以更方便地查看相关数据。

下面是实现两个Y轴联动的CSS代码：

.container {
  display: flex;
}

.chart1 {
  flex: 1;
  position: relative;
}

.chart1:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-right: 1px solid #ccc;
}

.chart2 {
  flex: 1;
  position: relative;
}

.chart2:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 1px solid #ccc;
} 

这里使用了弹性盒子布局（Flexbox），将两个图表分别放在一个.flex-item元素（.container的子元素）中。在每个图表的外部，使用了伪元素:before来画一条中间的竖线（通过绝对定位将他定位在中间）。

然后，我们需要分别给每个图表添加一个Y轴。例如，对于第一个图表，我们可以这样实现：

.chart1 .y-axis {
  position: absolute;
  left: -60px;
  top: 0;
  bottom: 0;
  width: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.chart1 .y-axis span {
  transform: rotate(-90deg);
} 

这里用了绝对定位将Y轴放在图表的左侧，通过弹性盒子布局实现了竖向排列，并将文字旋转了90度。对于第二个图表的Y轴，可以按照同样的方式实现。

有了这个CSS代码，我们就可以将两个图表联系起来，实现Y轴联动。如果需要实现更多的图表联动，只需要按照相同的方式添加新的图表和Y轴即可。