動態更新CSS條形圖的寬度

我剛剛使用CSS創建了一個簡單的水平條形圖，因爲我只需要3個小節。該圖顯示3個分數 - 前兩個是動態的，最後一個是靜態的。動態更新CSS條形圖的寬度

我的問題是，我不能找出一種有效的方法來改變基於它們的值的酒吧的寬度。對於每種情況，我的IF語句太多（即，如果分數A大於分數B，但分數A小於分數C等）。我怎樣才能簡化這個？

我的代碼示例可以看到here。注意：如果條形圖看起來不正確，那是因爲這些類型的分數沒有條件。請再次運行代碼，直到所有條形都看起來水平。

HTML：

<div class="graph"> 
    <span id="score-a">Score A: </span> 
    <span id="score-b">Score B: </span> 
    <span id="score-c">Score C: 5</span> 
</div>

JS：

var randomNumberA = Math.floor(Math.random() * (10 - 1 + 1)) + 1; 
var randomNumberB = Math.floor(Math.random() * (10 - 1 + 1)) + 1; 
var staticScore = 5; 

document.getElementById('score-a').innerHTML = "Score A: " + randomNumberA; 
document.getElementById('score-b').innerHTML = "Score B: " + randomNumberB; 

if (randomNumberA > randomNumberB && randomNumberA > staticScore) { 
    $('#score-a').css({ 
    'width': "auto", 
    'min-width': '100px' 
    }); 
    $('#score-b').css({ 
    'width': "auto", 
    'min-width': '122px' 
    }); 
    $('#score-c').css({ 
    'width': "auto", 
    'min-width': '112px' 
    }); 
} 

if (randomNumberA < randomNumberB && randomNumberA > staticScore) { 
    $('#score-a').css({ 
    'width': "auto", 
    'min-width': '100px' 
    }); 
    $('#score-b').css({ 
    'width': "auto", 
    'min-width': '122px' 
    }); 
    $('#score-c').css({ 
    'width': "auto", 
    'min-width': '112px' 
    }); 
}

來源

2016-07-07 mapr

我不確定這是你想要的：https://jsfiddle.net/uu9m1s3s/1/ 爲什麼你需要'if'語句？ – batmaniac7

@maddog是的，工作......謝謝你，但爲什麼'vw'單位？ – mapr

很酷。 'vw'是視口寬度。 – batmaniac7

退房this fiddle

它計算的寬度相對於最高分。

var maxScore = Math.max(randomNumberA, randomNumberB, staticScore); 
var maxWidth = 130; 

var widthA = (randomNumberA/maxScore) * maxWidth; 
$('#score-a').css({ 
    'width': widthA + 'px' 
}); 
var widthB = (randomNumberB/maxScore) * maxWidth; 
$('#score-b').css({ 
    'width': widthB + 'px' 
}); 
var widthC = (staticScore/maxScore) * maxWidth; 
$('#score-c').css({ 
    'width': widthC + 'px' 
});

我不明白您對flexbox的使用情況。這是什麼導致你的酒吧排列在一起。我修改了你的CSS，這樣就不會發生。

來源

2016-07-07 18:17:09

謝謝你的這個並修復CSS。但是當分數很小（如1或2）時，有時標籤很難看清楚。酒吧似乎比標籤更小...可能是由於'white-space：nowrap;' – mapr

通過添加'min-width'和'max-width'解決了它... – mapr

如果您有10分， 4和5，你可能會以4和5擊中'最小寬度'，在這種情況下，他們將是相同的長度，但不同的分數。您可以修改js計算以包含minWidth。即。 'var widthA = minWidth +（randomNumberA/maxScore）*（maxWidth - minWidth）;'。你的酒吧的寬度不會直接與你的分數成正比，但他們至少會接近。 –

可以使用vw代替if條件。請檢查這一個： jsfiddle.net/uu9m1s3s/1

來源

2016-07-07 18:06:11 batmaniac7

動態更新CSS條形圖的寬度

回答

相關問題