0

我正在尝试创建一个简单的条形图，但 CSS 存在很大问题。是的，我已经与 D3 碰撞了一段时间，但放弃了并决定创建自己的。这是我的代码：

请注意，它是从一个较大的页面中提取的，该页面包含在单个 div 中，但我已将其放入单独的页面中。

#B2Card {
  height: 340px;
  padding: 0;
  padding-bottom: 5px;
}

#B2CardLeft {
  position: absolute;
  height: inherit;
  float: left;
  width: 10%;
  text-align: right;
}

#B2CardRight {
  float: right;
  width: 90%;
  height: inherit;
}

#BarChart {
  float: left;
  height: 75%;
  width: 100%;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  text-align: left;
}

#BarChartXAxis {
  float: left;
  height: 25%;
  width: 100%;
  background-color: #0FC;
}

.verticaltext {
  position: absolute;
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  bottom: -85%;
  color: #fff;
}
<div id="B2Card">
  <div id="B2CardLeft">
    <p class="YAxis">60</p>
    <p class="YAxis">50</p>
    <p class="YAxis">40</p>
    <p class="YAxis">30</p>
    <p class="YAxis">20</p>
    <p class="YAxis">10</p>
  </div>
  <div id="B2CardRight">
    <div id="BarChart"></div>
    <div id="BarChartXAxis">
      <p class="verticaltext" style="left:32%;">2017-10-10</p>
      <p class="verticaltext" style="left:33%;">2017-10-11</p>
      <p class="verticaltext" style="left:34%;">2017-10-12</p>
      <p class="verticaltext" style="left:35%;">2017-10-13</p>
      <p class="verticaltext" style="left:36%;">2017-10-14</p>
    </div>
  </div>
</div>

我的第一个也是最重要的问题是，我无法将 X 轴中的旋转文本 (class="verticaltext") 可靠地定位在较低的 div (#BarChartXAxis) 中。我已经尝试了左/右/下等的各种值，但文本到处都是。我终于用上面的代码让它工作了，但是一旦我改变了浏览器窗口的大小，它就会再次被修改。请注意，日期是动态生成的，因此可能少至 7 个日期，多至 90 个。因此我需要能够动态调整它。

我的第二个问题是次要的 - 我无法让 Y 轴文本位于它所在的 Div 的底部（#B2CardLeft）。

对于上述两种情况，如果 jQuery 可靠，我愿意使用它。蒂亚！

4

1 回答 1

1

要解决您的第一个问题：

#B2Card {
  height: 340px;
  padding: 0;
  padding-bottom: 5px;
}

#B2CardLeft {
  height: inherit;
  float: left;
  width: 10%;
  text-align: right;
}

#B2CardRight {
  float: right;
  width: 90%;
  height: inherit;
  position: relative;
}

#BarChart {
  float: left;
  height: 75%;
  width: 100%;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  text-align: left;
}

#BarChartXAxis {
  float: left;
  height: 25%;
  width: 100%;
  background-color: #0FC;
}

.verticaltext {
  position: absolute;
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  bottom: 15px;
  color: #fff;
}
<div id="B2Card">
  <div id="B2CardLeft">
    <p class="YAxis">60</p>
    <p class="YAxis">50</p>
    <p class="YAxis">40</p>
    <p class="YAxis">30</p>
    <p class="YAxis">20</p>
    <p class="YAxis">10</p>
  </div>
  <div id="B2CardRight">
    <div id="BarChart"></div>
    <div id="BarChartXAxis">
      <p class="verticaltext">2017-10-10</p>
      <p class="verticaltext" style="left:4%">2017-10-11</p>
      <p class="verticaltext" style="left:8%">2017-10-12</p>
      <p class="verticaltext" style="left:12%">2017-10-13</p>
      <p class="verticaltext" style="left:16%">2017-10-14</p>
    </div>
  </div>
</div>

于 2017-12-02T07:35:29.410 回答