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

【问题标题】：Creating interactive bar chart with only HTML and CSS仅使用 HTML 和 CSS 创建交互式条形图
【发布时间】：2018-06-16 17:07:41
【问题描述】：

我构建了一个交互式条形图作为工作申请的一部分。从那以后，他们带着总体积极的反馈和最后阶段面试的邀请回到我身边。但是，我真的很想尝试解决他们对我提交的代码的反馈。

Codepen Link

<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 选择以前的兄弟姐妹。

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

【问题讨论】：

标签： html css sass css-selectors

【解决方案1】：

以前的兄弟或父选择器在 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 循环会使代码更加干燥，而且显然根本不存在“最佳实践”……只是想给你一个快速指南。以后可能会重构代码，因为我认为这是我展示中的一个好技巧:)

至于“1.IE浏览器坏了，浏览器测试是前端开发过程中必不可少的部分”，完全正确，但是前端开发的另一个重要部分 告诉开发人员所需的浏览器支持范围。

【讨论】：

感谢您的帮助，这看起来很棒。我会用它来更新笔:)
@SuperEpicMan 很高兴为您提供帮助。让我们知道进一步的进展:)
单选按钮工作得非常好，起初我无法取消选择它们，但我没有意识到我需要给它们起相同的名称。我已经更新了笔，但我可能会看到关于重构我的 SASS，因为它很大。我也可能会看到我可以对 IE 做些什么，考虑在 IE 中放入一些图像以显示。感谢您的帮助:)
哇，真快！对于 IE，您可以为您的网格考虑一个后备方案。也许在@supports 查询中使用您的网格声明，并在级联流上方设置回退到 inline-block、floats 甚至 display:table-cell 以服务于渐进式增强。 IE7 支持 ~ 选择器，所以应该不是问题。但同样，最好知道所需的浏览器支持范围。试图让它在 IE11 上工作，而不是在 IE8 上工作……和该死的 IE6 不同。
我已经更新了笔以包含对旧浏览器的一些支持，由于我没有 Windows 机器，因此无法正确测试它，但在 Edge 模拟器上加载它现在看起来好多了.我可能会暂时离开它，看看它在工作中的样子，但感谢您的建议，我可能会考虑将它们纳入明天。