Javascript - 薄く積み重なった棒グラフを作成する

Question

次の問題が発生します。3つの変数のみを保持できる積み上げ棒グラフを作成するにはどうすればよいですか？ (x, y, z)およびx + y + z = 100%。

重要なことは、下の図のように、バーのxyとyzの間の色のエッジをどのように色あせるかです。 ユーザーは、（これはされませんJavaScriptを使用して適切な値を持つ％のunitiesを「置き換え」する必要があります：私は使用してCSSのための静的な解決策を作った

Answer 1

をあなたが達成するために4パーセントの場所で、CSSで単一の線形勾配を使用することができます望ましい結果。あなたは0％と100％の色を指定する必要はありませんが、起動やフェードにどちらかの側の数パーセントを終了する必要がありますか、ハードな色の変化を取得します。ラベルの中央揃えに役立つ機能はありますが、検証やエッジケースは処理しません。

function updateGradientBar(agree, depends, disagree) { 
 

 
    let 
 
    \t padding = 3, 
 
    agreeFadeStart = agree - padding, 
 
    dependsFadeStart = agree + padding, 
 
    dependsFadeEnd = agree + depends - padding, 
 
    disagreeFadeStart = agree + depends + padding, 
 

 
    labelAgree = $('#gradient-bar .label.agree'), 
 
    agreeLabelPosition = agree/2, 
 

 
    labelDepends = $('#gradient-bar .label.depends'), 
 
    dependsLabelPosition = agree + (depends/2), 
 

 
    labelDisagree = $('#gradient-bar .label.disagree'), 
 
    disgreeLabelPosition = agree + depends + (disagree/2); 
 

 

 
    $('#gradient-bar').css(
 
    'background', 
 
    'linear-gradient(to right, green ' + agreeFadeStart + '%,' + 'orange ' + dependsFadeStart + '%, orange ' + dependsFadeEnd + '%,' + 'red ' + disagreeFadeStart + '%)'); 
 

 

 
    labelAgree.css('left', agreeLabelPosition + '%').text(agree + '%'); 
 
    labelDepends.css('left', dependsLabelPosition + '%').text(depends + '%'); 
 
    labelDisagree.css('left', disgreeLabelPosition + '%').text(disagree + '%'); 
 

 
} 
 

 
updateGradientBar(35, 40, 25);

#gradient-bar { 
 
    height: 20px; 
 
    border-radius: 4px; 
 
    background: blue; 
 
    position: relative; 
 
} 
 

 
#gradient-bar .label { 
 
    color: white; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translatex(-50%) translateY(-50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="gradient-bar"> 
 
    <div class="label agree"></div> 
 
    <div class="label depends"></div> 
 
    <div class="label disagree"></div> 
 
</div>

Answer 2

（いずれも人気のライブラリを使用することができます）ビッグディール）。 解決策：まず：純粋なCSSに色を交差させる可能性はありません。そこで、透明度を含む背景色を持つバーの絶対配置されたdivに追加しました。 HTML：

<div class="bar"> 
    <div class="agree"> 
    20% 
    </div> 
    <div class="seperator part1"> 

    </div> 
    <div class="independants"> 
    30% 
    </div> 
    <div class="seperator part2"> 

    </div> 
    <div class="disagree"> 
    50% 
    </div> 
</div> 

とCSS：

.bar { 
    display: flex; 
    width: 100%; 
    border: 1px solid #000; 
    border-radius: 3px; 
} 

.bar > div { 
    height: 20px; 
    color: #fff; 
    text-align: center; 
} 
.agree { 
    flex: 1 0 20%; 
    background: green; 
} 

.independants { 
    flex: 1 0 30%; 
    background: orange; 
} 
.disagree { 
    flex: 1 0 50%; 
    background: red; 
} 

.seperator { 
    position: absolute; 
    width: 5%; 
    z-index: 20; 
} 
.part1 { 
    left: 16%; 
    background: linear-gradient(to right, rgba(122,188,255,0) 0%,rgba(249,186,97,0.44) 44%,rgba(237,176,64,1) 100%); 
} 
.part2 { 
    left: 50%; 
    background: linear-gradient(to right, rgba(255,164,28,1) 0%,rgba(249,186,97,0.56) 44%,rgba(237,176,64,0) 100%); 
} 

がここにそれのためのフィドルをチェックアウト：https://jsfiddle.net/taxostd0/5/