Jpgraph实现投票效果

更新时间:2018-06-28 10:06:40 点击次数:1296次

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

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

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

[html] view plain copy
  1. php
  2. header("content-type:text/html;charset=utf-8");  //设置网页字符集
[html] view plain copy
  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. mysql_query("set names utf8");
  9. //判断前台是否提交
  10. if(isset($_GET['ac'])&&$_GET['ac']=='ac')
  11. {      //在前台有投票动作时获取选定参选人对应的id以更新数据库里参选人的计票数
  12. $id=$_GET['vote'];
  13. $sql="update vote set count=count+1 where electorid={$id}";
[html] view plain copy
  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. <html lang="en">
  17. <head>
  18. <meta charset="UTF-8">
  19. <title>参选投票title>
  20. <script>
  21. window.onload=function(){
  22. var obj=document.getElementById("view");
  23. obj.onclick=function()
  24. {location.href="votecount.php";}
  25. }
  26. script>
  27. head>
  28. <body>
  29. <fieldset>
  30. <legend>请投下您宝贵的一票legend>
  31. <form action="" method="get">
  32. <input type="radio" name="vote" value="1" checked>小布什
  33. <input type="radio" name="vote" value="2">奥巴马
  34. <input type="submit" value="投票">
  35. <input type="hidden" name="ac" value="ac">
  36. <input type="button" id="view" value="查看当前结果">
  37. <label>php echo $str ?>label>
  38. form>
  39. fieldset>
  40. body>
  41. html>

前台页面效果:

未投票前:

 投票成功:

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

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

显示投票结果图片:

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

[php] view plain copy
  1. header("content-type:text/html;charset=utf-8");
  2. if(!mysql_connect("localhost".":"."3306","root","root"))
  3. {
  4. die("MYSQL服务器连接失败!");
  5. }
  6. if(!mysql_select_db("online007"))
  7. { die("online007数据库连接失败");}
  8. mysql_query("set names utf8");
  9. if(isset($_GET['ac'])&&$_GET['ac']=='ac')
  10. {
  11. $id=$_GET['vote'];
  12. $sql="update vote set count=count+1 where electorid={$id}";
  13. if(mysql_query($sql))
  14. {
  15. header("refresh:0;url=voteimg.php");
  16. die();
  17. }
  18. }
  19. ?>
  20. "en">
  21. "UTF-8">
  22. 参选投票
  23. 请投下您宝贵的一票  
  24. "" method="get">
  25. "radio" name="vote" value="1" checked>小布什
  26. "radio" name="vote" value="2">奥巴马
  27. "submit" value="投票">
  28. "hidden" name="ac" value="ac">
  29. "votecount.php">

效果展示:

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

回到顶部
嘿,我来帮您!