仅使用HTML和CSS创建交互式条形图

超人

我在工作应用程序中构建了一个交互式条形图。从那以后，他们回到了我身边，获得了总体积极的反馈，并邀请我参加最后阶段的采访。但是，我真的很想尝试解决他们对我提交的代码给我的反馈。

<body>
  <div class="container">
    <h1>CSS Project</h1>
    <h2>Choose your level of risk</h2>
    <p id="description">Read the definitions and choose the risk level that best suits you.</p>
    <h3>Potential Return</h3>
    <div id="graph-wrapper">
      <div id="left-float">
        <p>Low Risk</p>
        <p>Lower potential return</p>
      </div>
      <div id="right-float">
        <p>High Risk</p>
        <p>Higher potential return</p>
      </div>
      <input type="checkbox" style="display: none" id="defensive-checkbox">
      <label id="defensive-label" for="defensive-checkbox">Defensive</label>
      <input type="checkbox" style="display: none" id="cautious-checkbox">
      <label id="cautious-label" for="cautious-checkbox">Cautious</label>
      <input type="checkbox" style="display: none" id="balanced-checkbox">
      <label id="balanced-label" for="balanced-checkbox">Balanced</label>
      <input type="checkbox" style="display: none" id="growth-checkbox">
      <label id="growth-label" for="growth-checkbox">Captial Growth</label>
      <input type="checkbox" style="display: none" id="aggressive-checkbox">
      <label id="aggressive-label" for="aggressive-checkbox">Aggressive</label>
      <div id="defensive-bar" class="bar"></div>
      <div id="cautious-bar" class="bar"></div>
      <div id="balanced-bar" class="bar"></div>
      <div id="growth-bar" class="bar"></div>
      <div id="aggressive-bar" class="bar"></div>
      <div id="defensive-info" class="info">
        <h4>Defensive</h4>
        <p>The Defensive investor may be very sensitive to short-term losses. A Defensive investor's potential aversion to short-term losses could compel them to sell their investment and hold a zero risk investment instead if losses occur.</p>
        <p>Defensive investors would possibly accept lower long-term return in exchange for smaller and less frequent changes in portfolio value. Analysing the risk-return choices available, a Defensive investor is usually willing to accept a lower return
          in order to assure the safety of his or her investment.</p>
      </div>
      <div id="cautious-info" class="info">
        <h4>Cautious</h4>
        <p>The Cautious investor may be sensitive to short-term losses. A Cautious investor's potential aversion to losses could compel them to shift into a more stable investment if significant short-term losses occur.</p>
        <p>Analysing the risk-return choices available, a Cautious investor is usually willing to accept somewhat lower returns in order to assure greater safety of his or her investment.</p>
      </div>
      <div id="balanced-info" class="info">
        <h4>Balanced</h4>
        <p>The Balanced investor may be somewhat concerned with short-term losses and may shift to a more stable option in the event of significant losses. The safeties of investment and return are typically of equal importance to the Balanced investor.</p>
      </div>
      <div id="growth-info" class="info">
        <h4>Captial Growth</h4>
        <p>The Captial Growth investor may be willing to accept high risk and chance of loss in order to achieve higher returns on his or her investment. Significant losses over an extended period may prompt the Captal Growth Investor to shift to a less
          risky investment.</p>
      </div>
      <div id="aggressive-info" class="info">
        <h4>Aggressive</h4>
        <p>The Aggressive investor usually aims to maxmise long-term expected returns rather than minimise possible short-term losses. An Aggressive investor values high returns relatively more and can tolerate both large and frequent fluctuations through
          time in portfolio value in exchange for a higher return over the long term.</p>
      </div>
    </div>
  </div>
</body>

这是CSS：

$purple: #7f3f98;
$dark-purple: #1D1060;
$light-purple: #a576b1;
$green: #7cc14c;
$white: #ffffff;
$black: #000000;
$alt-purple: #592a6b;

body {
    background-color: $purple;
    color: $white;
    font-family: 'Open Sans', sans-serif;
    box-sizing: content-box;
    width: 100%;
    h1 {
        margin: 1em;
        text-align: center;
    }
    h2, h3 {
        margin-bottom: 1em;
    }
    #description {
        margin-bottom: 2em;
    }
}

body {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: $purple;
  }
  50% {
    background-color: $alt-purple;
  }
  100% {
    background-color: $purple;
  }
}

#graph-wrapper {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 300px auto 1fr;
    grid-gap: 10px;
}

#left-float, #right-float {
    position: absolute;
    top: 150px;
    p {
        margin-bottom: 0;
    }
}
#left-float {
    left: 0.5em;
}
#right-float {
    text-align: right;
    right: 0.5em;
}


// Bar Styles
.bar {
    grid-row: 1 / 2;
    align-self: end;
    width: 100%;
    background-color: $light-purple;
    border-top: 5px solid $light-purple;
    border-radius: 5px;
}

#defensive-bar {
    grid-column: 1 / span 1; 
    height: 15px;
}

#cautious-bar {
    grid-column: 2 / span 1;
    height: 50px;
}

#balanced-bar {
    grid-column: 3 / span 1;
    height: 80px;
}

#growth-bar {
    grid-column: 4 / span 1;
    height: 140px;
}

#aggressive-bar {
    grid-column: 5 / span 1;
    height: 200px;
}


// Button Styles
label {
    grid-row: 2 / 3;
    display: inline-block;
    text-align: center;
    border: none;
    border-radius: 5px;
    padding: 0.5em;
    background-color: $dark-purple;
    color: $white;
    cursor: pointer;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
}

#defensive-checkbox:checked ~ #defensive-label {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#defensive-checkbox:checked ~ #defensive-bar {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#cautious-checkbox:checked ~ #cautious-label {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#cautious-checkbox:checked ~ #cautious-bar {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#balanced-checkbox:checked ~ #balanced-label {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#balanced-checkbox:checked ~ #balanced-bar {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#growth-checkbox:checked ~ #growth-label {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#growth-checkbox:checked ~ #growth-bar {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#aggressive-checkbox:checked ~ #aggressive-label {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#aggressive-checkbox:checked ~ #aggressive-bar {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}

#defensive-label {
    grid-column: 1 / span 1; 
}

#cautious-label {
    grid-column: 2 / span 1; 
}

#balanced-label {
    grid-column: 3 / span 1; 
}

#growth-label {
    grid-column: 4 / span 1; 
}

#aggressive-label {
    grid-column: 5 / span 1; 
}


// Information Section
.info {
    display: none;
    grid-column: 1 / span 5;
    grid-row: 3 / 4;
    background-color: $white;
    color: $black;
    position: relative;
    padding: 2em 1.5em;
    border: 4px solid $white;
    border-radius: 10px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    h4 {
        color: $purple;
        margin-bottom: 1em;
    }
}

.info:after, .info:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.info:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: $white;
    border-width: 30px;
    margin-left: -30px;
}
.info:before {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: $white;
    border-width: 36px;
    margin-left: -36px;
}

#defensive-info:after, #defensive-info:before {
    left: 10%;
}

#cautious-info:after, #cautious-info:before {
    left: 30%;
}

#balanced-info:after, #balanced-info:before {
    left: 50%;
}

#growth-info:after, #growth-info:before {
    left: 70%;
}

#aggressive-info:after, #aggressive-info:before {
    left: 90%;
}


// Defensive Active
#defensive-checkbox:checked ~ #defensive-info {
    display: block;
}
#defensive-checkbox:checked ~ #cautious-info,
#defensive-checkbox:checked ~ #balanced-info,
#defensive-checkbox:checked ~ #growth-info,
#defensive-checkbox:checked ~ #aggressive-info {
    display: none;
}
#defensive-checkbox:checked ~ #defensive-label {
    background-color: $green;
}
#defensive-checkbox:checked ~ div#defensive-bar.bar {
    border-color: $white;
}


// Cautious Active
#cautious-checkbox:checked ~ #cautious-info {
    display: block;
}
#cautious-checkbox:checked ~ #defensive-info,
#cautious-checkbox:checked ~ #balanced-info,
#cautious-checkbox:checked ~ #growth-info,
#cautious-checkbox:checked ~ #aggressive-info {
    display: none;
}
#cautious-checkbox:checked ~ #cautious-label {
    background-color: $green;
}
#cautious-checkbox:checked ~ div#defensive-bar.bar,
#cautious-checkbox:checked ~ div#cautious-bar.bar {
    border-color: $white;
}


// Balanced Active
#balanced-checkbox:checked ~ #balanced-info {
    display: block;
}
#balanced-checkbox:checked ~ #defensive-info,
#balanced-checkbox:checked ~ #cautious-info,
#balanced-checkbox:checked ~ #growth-info,
#balanced-checkbox:checked ~ #aggressive-info {
    display: none;
}
#balanced-checkbox:checked ~ #balanced-label {
    background-color: $green;
}
#balanced-checkbox:checked ~ div#defensive-bar.bar,
#balanced-checkbox:checked ~ div#cautious-bar.bar,
#balanced-checkbox:checked ~ div#balanced-bar.bar {
    border-color: $white;
}


// Growth Active
#growth-checkbox:checked ~ #growth-info {
    display: block;
}
#growth-checkbox:checked ~ #defensive-info,  
#growth-checkbox:checked ~ #cautious-info, 
#growth-checkbox:checked ~ #balanced-info,
#growth-checkbox:checked ~ #aggressive-info{
    display: none;
}
#growth-checkbox:checked ~ #growth-label {
    background-color: $green;
}
#growth-checkbox:checked ~ div#defensive-bar.bar,
#growth-checkbox:checked ~ div#cautious-bar.bar,
#growth-checkbox:checked ~ div#balanced-bar.bar,
#growth-checkbox:checked ~ div#growth-bar.bar {
    border-color: $white;
}


// Aggressive Active
#aggressive-checkbox:checked ~ #aggressive-info {
    display: block;
}
#aggressive-checkbox:checked ~ #defensive-info,
#aggressive-checkbox:checked ~ #cautious-info,
#aggressive-checkbox:checked ~ #balanced-info,  
#aggressive-checkbox:checked ~ #growth-info {
    display: none;
}
#aggressive-checkbox:checked ~ #aggressive-label {
    background-color: $green;
}
#aggressive-checkbox:checked ~ div#defensive-bar.bar,
#aggressive-checkbox:checked ~ div#cautious-bar.bar,
#aggressive-checkbox:checked ~ div#balanced-bar.bar,
#aggressive-checkbox:checked ~ div#growth-bar.bar,
#aggressive-checkbox:checked ~ div#aggressive-bar.bar {
    border-color: $white;
}

基本上，他们提到了两点：

该网站在Internet Explorer中已损坏，浏览器测试是前端开发过程的重要组成部分。
按钮的活动状态功能不一致。

第一点是可以预期的，因为它是由IE不支持的CSS Grid构建的。因此，我打算研究创建一些要在IE中显示的图像。

但是第二个我有点坚持。我认为他们正在寻找的是单击后续按钮时突出显示先前的按钮。例如，如果我单击按钮4，则按钮1、2、3和4将显示为绿色。然后，如果我单击按钮2，它将仅突出显示按钮1和2。我遇到的问题是，似乎没有一种方法可以选择CSS以前的兄弟姐妹。

我正处于一个阶段，我在考虑是否应该研究构建此目标的不同方法来解决他们的观点。

法肯多·克拉迪尼

以前的兄弟姐妹或父选择器在CSS中不是问题。

我同意这种行为是不一致的，但是要解决此问题，您只需使用单选按钮而不是复选框，然后将按钮移到HTML流上受影响的元素之前，然后使用标签标签从下方对其进行操作在视觉输出上，并使用〜常规同级组合器影响正确的元素。

我刚刚用笔来展示您所需的基本示例，整个窍门都在底线

#rb1:checked ~ #div1{
  background:lime;
}

#rb2:checked ~ #div1, #rb2:checked ~ #div2 {
  background:lime;
}

section{
  display:flex;
}

div{
  background-color:grey;
  margin:1rem;
  width:100px; height:100px;
}

label{
  background-color:lightgrey;
  margin:1rem;
  width:100px;
  text-align:center;
  box-sizing:border-box;
  padding:1rem;
  cursor:pointer;
}

#rb1, #rb2, #rb3, #rb4, #rb5{
  display:none;
}

#rb1:checked ~ #div1{
  background:lime;
}

#rb2:checked ~ #div1, #rb2:checked ~ #div2 {
  background:lime;
}

#rb3:checked ~ #div1, #rb3:checked ~ #div2, #rb3:checked ~ #div3 {
  background:lime;
}

#rb4:checked ~ #div1, #rb4:checked ~ #div2, #rb4:checked ~ #div3, #rb4:checked ~ #div4{
  background:lime;
}

#rb5:checked ~ #div1, #rb5:checked ~ #div2, #rb5:checked ~ #div3, #rb5:checked ~ #div4, #rb5:checked ~ #div5{
  background:lime;
}

<section>
  <input type="radio" name="rb" id="rb1">
  <input type="radio" name="rb" id="rb2">
  <input type="radio" name="rb" id="rb3">
  <input type="radio" name="rb" id="rb4">
  <input type="radio" name="rb" id="rb5">
  <div id="div1"> </div>
  <div id="div2"> </div>
  <div id="div3"> </div>
  <div id="div4"> </div>
  <div id="div5"> </div>
</section>

<section>
  <label id="lb1" for="rb1">First</label>
  <label for="rb2">Second</label>
  <label for="rb3">Third</label>
  <label for="rb4">Fourth</label>
  <label for="rb5">Fifth</label>
</section>

当然，将代码重构为SASS for loops将使代码变得更加干燥，并且显然根本没有“最佳实践” ..只是想给您一个快速指南。稍后可能会重构代码，因为我认为这是展示的好技巧:)

至于“ 1.该站点在Internet Explorer中已损坏，浏览器测试是前端开发过程的重要组成部分”，这是完全正确的，但是前端开发的另一个重要组成部分是告诉开发人员所需的浏览器支持范围。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-11-25

我来说两句

0 条评论

登录后参与评论

上一篇：为什么“ ..”可以在字符向量变量中传递列名？

TOP 榜单

文章

仅使用HTML和CSS创建交互式条形图

仅使用HTML和CSS创建交互式条形图

蓝屏死机没有修复解决方案

计算数据帧中每行的NA

UITableView的项目向下滚动后更改颜色，然后快速备份

Node.js中未捕获的异常错误，发生调用

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

Linux的官方Adobe Flash存储库是否已过时？

验证REST API参数

ggplot：对齐多个分面图-所有大小不同的分面

Mac OS X更新后的GRUB 2问题

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

带有错误“ where”条件的查询如何返回结果？

用日期数据透视表和日期顺序查询

VB.net将2条特定行导出到DataGridView

如何从视图一次更新多行（ASP.NET - Core）

Java Eclipse中的错误13，如何解决？

尝试反复更改屏幕上按钮的位置 - kotlin android studio

离子动态工具栏背景色

应用发明者仅从列表中选择一个随机项一次

当我尝试下载 StanfordNLP en 模型时，出现错误

python中的boto3文件上传

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID