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

2019年7月27日 190次阅读

我有这个问题,我真的很挣扎,理论上它应该很简单,但我没有正确实现它.也许我接近这个的逻辑错了……？

挑战

我有一个简单的网络应用程序,用户投票谁将在锦标赛中赢得体育赛事,每轮比赛有多达8场比赛.

一些用户投票的例子：

>第1轮第2轮：5名用户投票选择利物浦获胜,3位用户选择了Manu获胜
>第2轮比赛2：3用户投票支持阿森纳获胜,5名用户投票选举切尔西

等等

：

我想做的事

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

这样的事情：

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

我的实施

我有2个表1用于事件,称为事件,另一个表用于记录称为multiple_picks的投票

请考虑以下查询

(注意pickNr是指团队收到的投票数)

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 = '$round' AND multiple_picks.tournament ='$tour'
            GROUP BY pick
            ORDER BY round_game_nr

查询生成以下结果

《从css和php创建简单的条形图》
重要注意事项

从表中可以看出,每第2排都是一款新游戏！

2.还有15名球员进入了比赛,所以每场比赛相当于15票

我的逻辑

>获得A队和A队的投票数B队在每场比赛中
>为A队和A队制作投票百分比每个比赛示例中的B队(Highlanders =(9/15)* 100 = 60％)
>在div中显示每个匹配百分比 – 团队1的div< div style =“width：’.$t1Votes.’; height：25px; float：left”>

团队2的DIV< div style =“width：’.$t2Votes.’; height：25px; float：right”>

我的执行

 $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

我的问题

这是最终结果的一部分看起来有点正确但它永远不会到达第二个if if else if($t1！= $pick),因此,容器div永远不会被关闭…所以我必须有一个逻辑错误！

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

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

非常感谢您花时间阅读,感谢任何帮助.

旁注：请不要仔细检查我使用折旧的mysql_query()语句,我这样开始“程序”,所以我不妨用这种方式完成它,然后从头开始更改它

最佳答案 有一些问题,但你大部分都有.只需要计算一次百分比,因为每个循环都是一个新条目.你分配了$t1 = $pick,这意味着永远不会达到最后的其他.您还有样式括号外的背景颜色：绿色,因此它不呈现背景颜色.

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
点赞