从css和php创建简单的条形图

我有一个我正在努力解决的问题，理论上它应该足够简单，但我没有正确地实现它。也许我的逻辑是错误的，在处理这个

挑战

我有一个简单的web应用程序，用户可以在其中投票选出谁将赢得锦标赛中的一项体育赛事，每轮有多场比赛，最多8场

一些用户投票的示例：

• 第1轮比赛第2轮：5名用户投票支持利物浦获胜，3名用户投票支持马努获胜
• 第二场比赛第二轮：3名用户投票支持阿森纳获胜，5名用户投票支持切尔西

等等

:

我想做什么

我想在一个简单的css条形图中显示每场比赛中每支球队的投票数

大概是这样的：

我的实施

 $sql    = "SELECT multiple_picks.pick, multiple_picks.round_game_nr, COUNT(multiple_picks.round_game_nr) as pickNr ,events.event_id, events.team1, events.team2, events.round, events.tournament
            From multiple_picks
            JOIN events
            ON multiple_picks.event_id = events.event_id
            WHERE multiple_picks.round = '4' AND multiple_picks.tournament ='Super Rugby'
            GROUP BY pick
            ORDER BY round_game_nr";
    $result=mysql_query($sql);
    while($row = mysql_fetch_array($result)){
        //get vars
        $rgm = $row['round_game_nr']; //not important for example
        $t1 = $row['team1']; //team 1
        $t2 = $row['team2']; //team 2
        $pick =$row['pick']; //selected team
        $pickCount = $row['pickNr']; //number votes

        $t1 = $pick;
        if($pick == "Draw"){
            //skip draws for now
        }
        else if($t1 =$pick ){
            echo'<div id="container">';//opem container
            $percentage1 = ($pickCount / 15) * 100;
            echo'<div class="t1" style=" float:left; height:25px; background-color:red; width:'.$percentage1.'%">'.$pick.'</div>';  
        }//else if
            else if($t1 != $pick){
                $percentage2 = ($pickCount / 15) * 100;
                echo'<div class="t2" background-color:green; style=" float:right; height:25px;  width:'.$percentage2.'%">'.$pick.'</div>';
                echo'</div>';//container
                echo'<div style="clear:">';
            }//else if

    }//while

我有两个表1用于事件，称为

events

，另一个表用于记录投票，称为

multi_pick

考虑以下查询

（注

pickNr

指一个团队获得的投票数）

查询产生以下结果

需要注意的重要事项

1.从表中可以看出，每第二排是一个新游戏

2.还有15名球员进入了游泳池，因此每场比赛相当于15票

我的逻辑

• 在每场比赛中获得A队和B队的票数
• 在每个比赛示例中，为A队和B队获得一定百分比的选票（

  Highlanders=（9/15）*100=60%

  ）
• 在小组1的

  分区中显示每个匹配百分比

第2组的

DIV

我的执行力

 $sql    = "SELECT multiple_picks.pick, multiple_picks.round_game_nr, COUNT(multiple_picks.round_game_nr) as pickNr ,events.event_id, events.team1, events.team2, events.round, events.tournament
            From multiple_picks
            JOIN events
            ON multiple_picks.event_id = events.event_id
            WHERE multiple_picks.round = '4' AND multiple_picks.tournament ='Super Rugby'
            GROUP BY pick
            ORDER BY round_game_nr";
    $result=mysql_query($sql);
    while($row = mysql_fetch_array($result)){
        //get vars
        $rgm = $row['round_game_nr']; //not important for example
        $t1 = $row['team1']; //team 1
        $t2 = $row['team2']; //team 2
        $pick =$row['pick']; //selected team
        $pickCount = $row['pickNr']; //number votes

        $t1 = $pick;
        if($pick == "Draw"){
            //skip draws for now
        }
        else if($t1 =$pick ){
            echo'<div id="container">';//opem container
            $percentage1 = ($pickCount / 15) * 100;
            echo'<div class="t1" style=" float:left; height:25px; background-color:red; width:'.$percentage1.'%">'.$pick.'</div>';  
        }//else if
            else if($t1 != $pick){
                $percentage2 = ($pickCount / 15) * 100;
                echo'<div class="t2" background-color:green; style=" float:right; height:25px;  width:'.$percentage2.'%">'.$pick.'</div>';
                echo'</div>';//container
                echo'<div style="clear:">';
            }//else if

    }//while

$sql=“选择多个拾取。拾取，多个拾取。回合\游戏\编号，计数（多个拾取。回合\游戏\编号）作为拾取编号，事件。事件\ id，事件。团队1，事件。团队2，事件。回合，事件。锦标赛
从多个_选取
参加活动
在多个\u拾取上。事件\u id=事件。事件\u id
其中multiple_picks.round='4'和multiple_picks.touring='Super Rugby'
分组
按回合排序(游戏编号);；
$result=mysql\u查询（$sql）；
while（$row=mysql\u fetch\u数组（$result））{
//找内奸
$rgm=$row['round\u game\u nr']；//例如，这并不重要
$t1=$row['team1']；//第1组
$t2=$row['team2']；//团队2
$pick=$row['pick']；//所选团队
$pickCount=$row['pickNr']；//投票数
$t1=$pick；
如果（$pick==“Draw”）{
//暂时跳过抽签
}
else if（$t1=$pick）{
echo“”；//opem容器
$percentage1=（$pickCount/15）*100；
回音“.$pick.”；
}//否则如果
否则如果（$t1！=$pick）{
$percentage2=（$pickCount/15）*100；
回音“.$pick.”；
回显“”；//容器
回声'；
}//否则如果
}//当

我的问题

这就是最终结果的一部分，这有点正确，但它永远不会到达第二个

if语句else if（$t1！=$pick）

，因此，

容器div

永远不会关闭……所以我一定有一个逻辑错误

非常感谢您抽出时间阅读，非常感谢您的帮助。

---

旁注：请不要仔细检查我是否使用了折旧的

mysql\u query（）

语句，我是以这种方式启动“程序”的，所以我不妨以这种方式完成它，然后从一开始就开始更改它

虽然有一些问题，但您基本上都有。由于每个循环都是一个新条目，所以只需计算一次百分比。您正在分配

$t1=$pick

，这意味着最后一个

else if

将永远无法到达。另外，您的

背景色：绿色

位于样式括号之外，因此它没有渲染背景色

while($row = mysql_fetch_array($result)){
    //get vars
    $rgm = $row['round_game_nr']; //not important for example
    $t1 = $row['team1']; //team 1
    $t2 = $row['team2']; //team 2
    $pick = $row['pick']; //selected team
    $pickCount = $row['pickNr']; //number votes

    // Since it's looping for each entry you only need to calculate the total percentage once
    $percentage = ($pickCount / 15) * 100;

    if($pick == "Draw") {
        //skip draws for now
        continue;
    }
    else if($t1 == $pick ) {
        echo'<div id="container">';//opem container
        echo'<div class="t1" style=" float:left; height:25px; background-color:red; width:'.$percentage.'%">'.$pick.'</div>';  
    }//else if
        else if($t1 != $pick) {
            echo'<div class="t2" style="background-color:green; float:right; height:25px;  width:'.$percentage.'%">'.$pick.'</div>';
            echo'</div>';//container
            echo'<div style="clear:">';
        }//else if

}//while

while（$row=mysql\u fetch\u array（$result））{
//找内奸
$rgm=$row['round\u game\u nr']；//例如，这并不重要
$t1=$row['team1']；//第1组
$t2=$row['team2']；//团队2
$pick=$row['pick']；//所选团队
$pickCount=$row['pickNr']；//投票数
//因为每个条目都有循环，所以只需计算一次总百分比
$percentage=（$pickCount/15）*100；
如果（$pick==“Draw”）{
//暂时跳过抽签
继续；
}
else if（$t1==$pick）{
echo“”；//opem容器
回音“.$pick.”；
}//否则如果
否则如果（$t1！=$pick）{
回音“.$pick.”；
回显“”；//容器
回声'；
}//否则如果
}//当

html代码在哪里？@freestock.tk我已经在上面的一张图片上上传了部分html输出，现在我只是在一个空白页面上进行图表测试，php生成html输出。我看不到什么，在if语句之前分配

$t1=$pick

。在您的第一次

中，如果

您正在分配

$t1

变量，而不是执行比较

$t1==$pick

，由于最初分配的

$t1=$pick

非常感谢！，谢谢你的帮助和建议！