我的页面计算 X 队战胜 Y 队的机会百分比。我不想用百分比来表达这一点，而是想用条形图显示它(水平或垂直并不重要，无论是最简单的)
我读过previous question on stackoverflow只用 HTML 和 CSS 创建这样一个栏是可能的，但它并没有完全解决我的问题
这是在用户做出所有选择并计算所有变量后，我的页面上显示的内容的图像。
现在，如果有人可以帮助我以一种简单的方式在图表中显示上述图像，我将不胜感激。
如果仅使用 HTML 和 CSS 无法使其保持简单，至少您可以告诉我一个我可以使用的优秀图形插件/包。
我将显示一些与显示栏相关的代码，因为代码很长，如果您需要更多/不同的代码，请告诉我。
//teamstrength1
$teamstrength = ($teamstrength / 30 * 20);
//teamstrength2
$team2strength = ($team2strength /30 * 20);
//add international experience for team1
$teamstrength = $teamstrength + $internationalPlayersT1;
//add international experience for team2
$team2strength = $team2strength + $internationalPlayersT2;
//add players which is better for team 1
$teamstrength = $teamstrength + $bettert1;
//add players who is better for team2
$team2strength = $team2strength + $bettert2;
//add homefield advantage
$teamstrength = $teamstrength + 5;
//echo team chances
echo '<h3>team1 chance '.$teamstrength.'</h3>';
echo'<br>';
echo '<h3>team2 chance '.$team2strength.'</h3>';
提前感谢这个伟大网站上所有乐于助人的贡献者
真诚的 李
最佳答案
我希望我正确理解了你的问题，如果你想用html和css显示百分比，你可以使用php来改变div 的 css，将其显示为条形图，我在下面有一个简单的示例
代码
<!DOCTYPE html>
<html>
<head>
<style>
#container{
background-color:grey;
width:500px;
height:400px;
position:absolute;
}
#team1{
width:<?php
$team1 = 52.6 * 4; //Used a multiplier factor of four to increase size of bar
echo $team1."px"; ?>;
height:100px;
margin-top:50px;
background-color:blue;
}
#team2{
width:<?php
$team1 = 41.6 * 4;
echo $team1."px"; ?>;
height:100px;
margin-top:50px;
background-color:blue;
}
.percent{
color:white;
}
</style>
</head>
<div id="container">
<div id="team1">
<span class="percent">Team 1 Percentage 52.6%</span>
</div>
<div id="team2">
<span class="percent">Team 2 Percentage 41.6%</span>
</div>
</div>
<body>
</body>
</html>
关于php - 在网站上显示一个简单的条形图，没什么花哨的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22003848/