JobPlus
JobPlus知识库 IT DBA 文章
Jpgraph实现投票效果
个人头像
沈锵良
2018-06-26 9556人阅读 0人打赏

之前接触Jpgraph时想做一下网上展示的小例子，但在琢磨透别人的做法后，总想用自己的方式做一下。借此可以巩固一下基础，锻炼一下自己的思维。

      本例并没有使用Ajax实现无刷新般的显示投票结果。在Echarts实现时再考虑Ajax的使用，学习要讲求循序渐进，工作也是。

      第一步：建立简单的前端页面，很简单的。大佬要是看见了，别喷啊。我是小菜。暂不考虑代码分离问题，其实也简单。

[html]

  1. <?php   
  2.  header("content-type:text/html;charset=utf-8");  //设置网页字符集  

[html] 

  1. //连接MySQL服务器选择数据库并设定字符集  
  2.  if(!mysql_connect("localhost".":"."3306","root","root"))  
  3.  {  
  4.     die("MYSQL服务器连接失败！");  
  5.  }  
  6.  if(!mysql_select_db("online007"))  
  7.  {  die("online007数据库连接失败");}  
  8.    
  9.   mysql_query("set names utf8");  
  10.  //判断前台是否提交  
  11.  if(isset($_GET['ac'])&&$_GET['ac']=='ac')  
  12.  {      //在前台有投票动作时获取选定参选人对应的id以更新数据库里参选人的计票数  
  13.     $id=$_GET['vote'];  
  14.     $sql="update vote set count=count+1 where electorid={$id}";  

[html]

  1.     if(mysql_query($sql))  
  2.         {  
  3.         $str="您的投票成功计数，感谢您的参与。";   
  4.         header("refresh:2;url=vote.php");  
  5.          }  
  6.        else  
  7.        {  
  8.         $str= "系统故障，投票未成功！";  
  9.        }  
  10. }  
  11. else  
  12. {    
  13.     $str="";}  
  14.   
  15. ?>  
  16. <!DOCTYPE html>  
  17. <html lang="en">  
  18. <head>  
  19.     <meta charset="UTF-8">  
  20.     <title>参选投票</title>  
  21.     <script>  
  22.         window.onload=function(){  
  23.             var obj=document.getElementById("view");  
  24.             obj.onclick=function()  
  25.             {location.href="votecount.php";}  
  26.         }  
  27.     </script>  
  28. </head>  
  29. <body>  
  30.     <fieldset>  
  31.         <legend>请投下您宝贵的一票</legend>  
  32.         <form action="" method="get">  
  33.             <input type="radio" name="vote" value="1" checked>小布什    
  34.             <input type="radio" name="vote" value="2">奥巴马    
  35.             <input type="submit" value="投票">  
  36.             <input type="hidden" name="ac" value="ac">  
  37.             <input type="button" id="view" value="查看当前结果">  
  38.             <label><?php echo $str ?></label>  
  39.         </form>  
  40.     </fieldset>  
  41. </body>  
  42. </html>  

前台页面效果：

未投票前：

 投票成功：

第二步：当单击“查看当前结果”时，在另一页面显示图片，图片由jpgraph根据数据库相关信息生成。

[php] 

  1. <?php // content="text/plain; charset=utf-8"  
  2. header("content-type:text/html;charset=utf-8");  
  3. require_once ('../jpgraph/Examples/jpgraph/jpgraph.php');  
  4. require_once ('../jpgraph/Examples/jpgraph/jpgraph_bar.php');  
  5.   
  6. // require_once("conn.php");  
  7. //单独连接数据库以免对其它图表产生影响  
  8. if(!@mysql_connect("localhost".":"."3306","root","root"))  
  9. {  
  10.     die("MYSQL服务器连接失败！");  
  11. }  
  12. if(!@mysql_select_db("online007"))  
  13.  {die("online007数据库连接失败");}  
  14. mysql_query("set names utf8");  
  15. //构建取数据的SQL语句  
  16. $sql="select name,count from vote group by name";  
  17. $result=mysql_query($sql);  
  18. // var_dump($result);  
  19. $arr1=array();//定义数组$arr1保存各参选人姓名  
  20. $arr2=array();//定义数组$arr2保存各参选人得票数  
  21. while($arr=mysql_fetch_assoc($result))  
  22. {$arr1[]=$arr['name'];  
  23.  $arr2[]=$arr['count'];}  
  24. // print_r($arr1);  
  25. // Create the graph.  
  26. $graph = new Graph(350,250);  
  27. $graph->SetScale('textlin');  
  28. $graph->SetMarginColor('silver');  
  29. // Setup title  
  30. $graph->title->Set('参选人投票结果');  
  31.   
  32. // Create the first bar  
  33. $bplot = new BarPlot($arr2);  
  34. $bplot->SetFillGradient('red','pink',GRAD_VERT);  
  35. $bplot->SetColor('darkred');  
  36.   
  37.   
  38. $graph->xaxis->SetTickLabels($arr1);  
  39. $graph->title->SetFont(FF_SIMSUN);  
  40. $graph->xaxis->SetFont(FF_SIMSUN);  
  41.   
  42. $graph->Add($bplot);  
  43. $bplot->value->Show();  //此两行代码需放在图表添加到图像对象之后才能生效  
  44. $bplot->value->SetFormat("%d");  
  45. $graph->Stroke();  
  46. ?>  

显示投票结果图片：

另注另一种做法：当然可以把投票结果图片用img标签(src属性可以是PHP文件名)直接显示到投票页面，因为没有使用ajax实现无刷新展示，所以点击投票后页面会有刷新时的抖动。

[php] 

  1. <?php   
  2.  header("content-type:text/html;charset=utf-8");  
  3.  if(!mysql_connect("localhost".":"."3306","root","root"))  
  4.  {  
  5.     die("MYSQL服务器连接失败！");  
  6.  }  
  7.  if(!mysql_select_db("online007"))  
  8.  {  die("online007数据库连接失败");}  
  9.    
  10.   mysql_query("set names utf8");  
  11.   
  12.  if(isset($_GET['ac'])&&$_GET['ac']=='ac')  
  13.  {  
  14.     $id=$_GET['vote'];  
  15.     $sql="update vote set count=count+1 where electorid={$id}";  
  16.     if(mysql_query($sql))  
  17.      {  
  18.         header("refresh:0;url=voteimg.php");  
  19.         die();  
  20.       }  
  21.  }  
  22.  ?>  
  23.  <!DOCTYPE html>  
  24.  <html lang="en">  
  25.  <head>  
  26.     <meta charset="UTF-8">  
  27.     <title>参选投票</title>  
  28.  </head>  
  29.  <body>  
  30.     <fieldset>  
  31.         <legend>请投下您宝贵的一票</legend>  
  32.         <form action="" method="get">  
  33.             <input type="radio" name="vote" value="1" checked>小布什    
  34.             <input type="radio" name="vote" value="2">奥巴马    
  35.             <input type="submit" value="投票">  
  36.             <input type="hidden" name="ac" value="ac"><br>  
  37.             <img src="votecount.php">  
  38.         </form>  
  39.     </fieldset>  
  40.  </body>  
  41.  </html>  

效果展示：


如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！

¥ 打赏支持
338人赞 举报
分享到
用户评价(0)

暂无评价，你也可以发布评价哦:)

15 人收藏了这篇文章
个人头像 个人头像 个人头像 个人头像 个人头像 个人头像 ...

相关文章

腾讯云数据库性能卓越稳定可靠，为您解决数据库运维难题
广告

关于我们

公司介绍

人才招聘

联系方式

法律声明

服务条款

权利声明

隐私声明

帮助中心

使用攻略

建议反馈

联系客服

网站地图

二维码
JobPlus官方公众号
微博
JobPlus官方微博
Copyright © jobplus.com.cn All rights reserved
苏州聘十信息技术有限公司 版权所有苏ICP备16046992号
扫码APP

扫描使用APP

扫码使用

扫描使用小程序