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

时间:2016-03-15 02:13:26

标签: php html mysql css

我有这个问题,我真的很挣扎,理论上它应该很简单,但我没有正确实现它。也许我的逻辑在接近这个方面是错误的??

挑战

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

示例一些用户投票:

  • 匹配1轮2: 5位用户投票选择利物浦获胜, 3位用户选择了Manu 获胜
  • 第2轮比赛2: 3位用户投票选举阿森纳获胜, 5位用户投票选举切尔西

等等

我想做什么

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

类似的东西:

enter image description here

我的实施

我有2个表1用于事件,名为events,另一个表用于记录名为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

查询生成以下结果

enter image description here 需要注意

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

2.还有15名玩家进入了游泳池,因此每场比赛相当于15票

我的逻辑

  • 获得A队和A队的投票数每场比赛B队
  • 为A队和A队制作投票百分比每个比赛示例中的B队(Highlanders = (9/15)*100 = 60%
  • div - div中为第1组显示每个匹配百分比<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 statement else if($t1 != $pick),因此,container div永远不会被关闭......所以我必须有一个逻辑错误!

enter image description here

enter image description here

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

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

1 个答案:

答案 0 :(得分:1)

有一些问题,但你们大多数都有。只需要计算一次百分比,因为每个循环都是一个新条目。您正在分配$t1 = $pick,这意味着永远不会达到最后else if。你的样式括号外面还有background-color: green,所以它没有渲染背景颜色。

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