Javascript 需要线图下面的颜色纯html和css

我正在用HTML和CSS创建一个折线图。代码片段取自互联网

我得到了我需要的折线图。唯一剩下的是，图表上线条下方的背景色

这就是我需要的：（图1） 这就是我目前拥有的：（图2） 我们有没有办法只用HTML和CSS实现这一点，或者我们可以用JS实现这一点？任何帮助都将不胜感激

HTML:

---

这里也有一些额外的CSS，所以请忽略它。

因为您不需要JS，我建议您使用SVG，除非您需要旧的浏览器支持

上述示例中的代码：

正文{
/*背景：#ccc*/
填充：20px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
正文，html{
身高：100%；
}
.图形容器{
位置：相对位置；
}
.指针气泡{
位置：相对位置；
左：10.2米；
底部：-3.5em；
不透明度：0.9；
}
.图表{
背景：白色；
宽度：500px；
高度：200px；
左边框：1个点#555；
边框底部：1个点#555；
填充：20px 20px 20px 0；
}
.x标签、.y标签{
颜色：灰色；
字体大小：0.7em；
}
.x标签{
位置：相对位置；
底部：0px；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}
.5月6日{
左侧边缘：13 em；
}
.5月15日{
左侧边缘：19 em；
}
.y标签{
位置：相对位置；
底部：19em；
右：64em；
显示器：flex；
弯曲方向：立柱；
调整内容：灵活启动；
}
.y-标签.垫片{
高度：8em；
}
#指针{
宽度：120px；
高度：80px；
背景：红色；
位置：相对位置；
-moz边界半径：10px；
-webkit边界半径：10px；
边界半径：10px；
}
#指针：之前{
内容：“；
位置：绝对位置；
右：100%；
顶部：26px；
宽度：0；
身高：0；
边框顶部：13px实心透明；
右边框：26px实心红色；
边框底部：13px实心透明；
}
.指针{
颜色：#ffffff；
}
5月9日下午{
利润率：0；
字体系列：Arial、Helvetica、无衬线字体；
字号：0.8em；
}
观众人数{
保证金：0.3em0；
字体系列：“Lucida Sans Unicode”，“Lucida Grande”，无衬线；
字号：0.9em；
}
.指针气泡{
边界半径：4px；
文本对齐：居中；
位置：相对位置；
宽度：8em；
高度：2米；
填充：10px；
颜色：#000；
背景：#5b；
}
.指针泡泡：之后{
内容：“；
位置：绝对位置；
底部：-10px；
左：4em；
边框宽度：10px 10px 0；/*更改这些值可更改顶点的角度*/
边框样式：实心；
边框颜色：#5b透明；
显示：块；
宽度：0；
}

5月9日，星期一
56名观众
五月一日
5月6日
5月15日
50
15

啊，谢谢，我的代码没有修改。但这肯定会对我和我所需要的工作。标记为回答再次感谢。

                <div class="line-chart-block block">
 <div class="line-chart">
   <div class='grafico'>
   <ul class='eje-y'>
     <li data-ejeY='415'></li>
     <li data-ejeY='207'></li>
     <li data-ejeY=''></li>
   </ul>
   <ul class='eje-x'>
     <li>6/10</li>
     <li>6/11</li>
     <li>6/12</li>
     <li>6/13</li>
     <li>6/14</li>
     <li>6/15</li>
     <li>Today</li>
   </ul>
     <span data-valor='25'>
       <span data-valor='8'>
         <span data-valor='13'>
           <span data-valor='5'>   
             <span data-valor='23'>   
             <span data-valor='12'>
                 <span data-valor='15'>
                 </span></span></span></span></span></span></span>
   </div>

              </div>
            </div>

        .line-chart-block, .bar-chart-block {
            }
                .line-chart {
                    height: 500px;
                    background: transparent;
                }
                .time-lenght {
                    padding-top: 22px;
                    padding-left: 38px;
          overflow: hidden;
                }
                    .time-lenght-btn {
                        display: block;
                        width: 70px;
                        line-height: 32px;
                        background: #50597b;
                        border-radius: 5px;
                        font-size: 14px;
                        text-align: center;
                        margin-right: 5px;
                        -webkit-transition: background .3s;
                        transition: background .3s;
                    }
                        .time-lenght-btn:hover {
                            text-decoration: none;
                            background: #e64c65;
                        }
                .month-data {
                    padding-top: 28px;
                }
                    .month-data p {
                        display: inline-block;
                        margin: 0;
                        padding: 0 25px 15px;            
                        font-size: 16px;
                    }
                        .month-data p:last-child {
                            padding: 0 25px;
              float: right;
                            font-size: 15px;
                        }
                        .increment {
                            color: #e64c65;
                        }

.grafico {
  padding: 2rem 1rem 1rem;
  width: 100%;
  height: 100%;
  position: relative;
  color: #fff;
  font-size: 80%;
}
.grafico span {
display: block;
    position: absolute;
    bottom: 20.6rem;
    left: 8rem;
    height: 0;
    border-top: 2px solid;
    transform-origin: left center;
}
.grafico span > span {
  left: 100%; bottom: 0;
}
[data-valor='25'] {width: 3px; transform: rotate(-45deg);}
[data-valor='8'] {width: 105px; transform: rotate(20deg);}
[data-valor='13'] {width: 114px; transform: rotate(7deg);}
[data-valor='5'] {width: 125px; transform: rotate(40deg);}
[data-valor='23'] {width: 69px; transform: rotate(-70deg);}
[data-valor='12'] {width: 36px; transform: rotate(75deg);}
[data-valor='15'] {width: 45px; transform: rotate(-45deg);}

[data-valor]:before {
  content: '';
  position: absolute;
  display: block;
  right: -4px;
  bottom: -3px;
  padding: 4px;
  background: red;
  border-radius: 50%;
}

[class^='eje-'] {
  position: absolute;
  left: 0;
  bottom: 0rem;
  width: 100%;
  padding: 1rem 1rem 0 2rem;
  height: 80%;
}
.eje-x {
  height: 20rem;
}
.eje-y li {
  height: 25%;
  border-top: 1px solid #777;
    list-style: none;
    color: #C4C4C4;
}
[data-ejeY]:before {
  content: attr(data-ejeY);
  display: inline-block;
  width: 2rem;
  text-align: right;
  line-height: 0;
  position: relative;
      left: 0.5rem;
    top: 0.5rem;
} 
.eje-x li {
  width: 14%;
  float: left;
  text-align: center;
    list-style: none;
    color: #C4C4C4;
}