增加垂直条形图中特定条形的高度

Question

我使用的是来自网站的垂直条形图::https://codepen.io/anythinggraphic/pen/xxKpBax

/* Bar Graph Vertical */
.bar-graph .year {
-webkit-animation: fade-in-text 2.2s 0.1s forwards;
-moz-animation: fade-in-text 2.2s 0.1s forwards;
animation: fade-in-text 2.2s 0.1s forwards;
}
.bar-graph-vertical {
margin-top: -109px;
max-width: 680px;
}
.bar-graph-vertical .bar-container {
float: left;
height: 150px;
margin-right: 8px;
position: relative;
text-align: center;
width: 40px;
}
.bar-graph-vertical .bar {
border-radius: 3px;
bottom: 40px;
position: absolute;
width: 40px;
}
.bar-graph-vertical .year {
bottom: 0;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.bar-graph-two .bar::after {
-webkit-animation: fade-in-text 2.2s 0.1s forwards;
-moz-animation: fade-in-text 2.2s 0.1s forwards;
animation: fade-in-text 2.2s 0.1s forwards;
color: #fff;
content: attr(data-percentage);
font-weight: 700;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
text-align: left;
top: 24px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.bar-graph-two .bar-one .bar {
background-color: #64b2d1;
-webkit-animation: show-bar-one-vertical 1.2s 0.1s forwards;
-moz-animation: show-bar-one-vertical 1.2s 0.1s forwards;
animation: show-bar-one-vertical 1.2s 0.1s forwards;
}
.bar-graph-two .bar-two .bar {
background-color: #5292ac;
-webkit-animation: show-bar-two-vertical 1.2s 0.2s forwards;
-moz-animation: show-bar-two-vertical 1.2s 0.2s forwards;
animation: show-bar-two-vertical 1.2s 0.2s forwards;
}
.bar-graph-two .bar-three .bar {
background-color: #407286;
-webkit-animation: show-bar-three-vertical 1.2s 0.3s forwards;
-moz-animation: show-bar-three-vertical 1.2s 0.3s forwards;
animation: show-bar-three-vertical 1.2s 0.3s forwards;
}
.bar-graph-two .bar-four .bar {
background-color: #2e515f;
-webkit-animation: show-bar-four-vertical 1.2s 0.4s forwards;
-moz-animation: show-bar-four-vertical 1.2s 0.4s forwards;
animation: show-bar-four-vertical 1.2s 0.4s forwards;
}

我已经从网站上发布了CSS代码块，但请参考网站。我必须增加标记为"2017"的特定条的高度。我不能那样做。我尝试了inspect元素，但做不到。请问有谁能帮我一下吗?谢谢你! !

Answer 1

有两种方法:1)
inline css on line 109

100% {
height: 108%;
}

或2)
<div class="bar" data-percentage="68%" style="height: 120% !important;"></div>

Answer 2

如果你在服务器端使用和填充data-percentage，你也可以同时填充一个cssvar()值，并使用该变量从css更新大小和标签。

Writing-mode也是一个旋转文本的选项。

例子

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
--bar: clamp(220px, 40vh, 500px);/* whatever you need here */
min-height:100vh;/*demo purpose */
display:flex;/*demo purpose */
}
body{margin:auto;/*demo purpose */}
ul {
font-size:clamp(10px, 4vmin, 16px);/* whatever you need here */
height: var(--bar);
display: flex;
align-items: end;
padding-top:0.5em;
padding-bottom: 4em;
width:max-content;/*demo purpose */
margin:auto;/*demo purpose */
background:#bee;
border-radius:0.25em;
box-shadow:0 0 5px;/*demo purpose */
transition: 0.2s
}
ul:hover {transform:rotate(-90deg);/*demo purpose */}
li {
width:2em;
writing-mode: vertical-lr;
margin: 0 0.5em;
display: flex;
align-items: center;
animation: show-bar-vertical 1.2s 0.4s forwards;
}
b {
margin-bottom: -4em;
padding:0.5em;
background:#adf
}
span {

padding: 0 0.5em;
flex: 1 1;
border-radius: 0.25em;
margin-bottom: 0.25em;
overflow:hidden; 
max-height:0;
box-shadow:1px 1px 2px white,-1px -1px 2px gray;
animation:delay 0.1s 0.25s forwards
}
span:before {
content: attr(data-percentage);
display: inline-block;
color: white;
text-indent: .5em; 
height:0;
}
li:nth-child(odd) b {background:#aef;}
li:nth-child(1) span {
background-color: #64b2d1;
}
li:nth-child(2) span {
background-color: #5292ac;
}
li:nth-child(3) span {
background-color: #407286;
}
li:nth-child(4) span {
background-color: #2e515f;
}
li:nth-child(5) span {
background-color: #1e3d49;
}
@keyframes show-bar-vertical {
0% {
height: 0;
}
100% {
height: var(--data-percentage,auto);
}
}
@keyframes delay{
to {max-height:100%;}
}

<!-- example build from a list, structure can be anything else -->
<ul id="bargraph">
<li style="--data-percentage : 40% ">
<span data-percentage=" 40%" ></span>
<b>2020</b>
</li>
<li style="--data-percentage : 55% ">
<span data-percentage=" 55%" ></span>
<b>2019</b>
</li>
<li style="--data-percentage : 100% " >
<span data-percentage=" 100%" ></span>
<b>2018</b>
</li>
<li style="--data-percentage : 82% ">
<span  data-percentage=" 82%" ></span>
<b>2017</b>
</li>
<li style="--data-percentage : 25% ">
<span data-percentage=" 25%" ></span>
<b>2016</b>
</li>  
</ul>